Navigation
Glass Tabs
Tabs whose glass bubble stretches like a drop on its way to the selected tab.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-tabsnpx shadcn@4.14.1 add @glassyui-native/glass-tabsPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-tabsWhat this installs12 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-tabs itself in registry.json.
Package dependencies
@radix-ui/react-tabsclsx
Registry dependencies
@glassyui/glass-panel
File targets
components/glassyui/glass-tabs.tsxcomponents/glassyui/lib/liquid-motion.ts
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
@radix-ui/react-tabsclsx
Installed files
components/glassyui/glass-tabs.tsxcomponents/glassyui/lib/liquid-motion.tscomponents/glassyui/glass-panel.tsxcomponents/glassyui/glass-surface.tsxcomponents/glassyui/lib/merge-refs.tscomponents/glassyui/lib/refraction-map.tscomponents/glassyui/lib/use-refraction-filter.tsxcomponents/glassyui/lib/scene-context.tscomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-tabsnpx expo install --fixUsage
import { GlassTabs, GlassTabsContent, GlassTabsList, GlassTabsTrigger } from "@/components/glassyui/glass-tabs";
export function TabsDemo() {
return (
<GlassTabs defaultValue="preview">
<GlassTabsList>
<GlassTabsTrigger value="preview">Preview</GlassTabsTrigger>
<GlassTabsTrigger value="code">Code</GlassTabsTrigger>
</GlassTabsList>
<GlassTabsContent value="preview">Glass preview</GlassTabsContent>
<GlassTabsContent value="code">Copy-ready code</GlassTabsContent>
</GlassTabs>
);
}import {
GlassTabs,
GlassTabsContent,
GlassTabsList,
GlassTabsTrigger,
} from '@/components/glassyui/glass-tabs';
export default function TabsExample() {
return (
<GlassTabs defaultValue="overview">
<GlassTabsList>
<GlassTabsTrigger value="overview">Overview</GlassTabsTrigger>
<GlassTabsTrigger value="activity">Activity</GlassTabsTrigger>
</GlassTabsList>
<GlassTabsContent value="overview">Three projects, all up to date.</GlassTabsContent>
<GlassTabsContent value="activity">No activity this week.</GlassTabsContent>
</GlassTabs>
);
}
Examples
<GlassTabs defaultValue="preview">...</GlassTabs>API
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassTabsRadix Tabs root.
GlassTabsListGlass pill list for triggers.
GlassTabsTriggerSemantic Radix trigger with active glass styling.
GlassTabsContentPanel-backed tab content.
Notes
Motion
One glass bubble serves the whole list. It lifts, stretches toward the new tab and settles with a small bounce. Until scripts run, the active tab draws its own bubble. Reduced motion moves it straight there.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.