Glass Tabs for React

Preview

A glass lozenge slides to the selected tab.

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui/glass-tabs

Adds 13 files to components/glassyui and installs @radix-ui/react-tabs and clsx.

Usage

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>
  );
}

React Native usage

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

Default tab

<GlassTabs defaultValue="preview">...</GlassTabs>

API reference

`GlassTabs`

Prop	Type	Default	Description
`value / defaultValue`	`string`	None	Controlled or uncontrolled selected tab, matching a trigger's value.
`onValueChange`	`(value: string) => void`	None	Called with the newly selected tab's value.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Sets which arrow keys move between triggers.

Also accepts Radix Tabs.Root props.

`GlassTabsList`

The glass pill that holds the triggers and the moving indicator.

Prop	Type	Default	Description
`className`	`string`	None	Applies to the glass pill.

Also accepts Radix Tabs.List props.

`GlassTabsTrigger`

Prop	Type	Default	Description
`value`Required	`string`	None	Ties the trigger to the GlassTabsContent with the same value.

Also accepts Radix Tabs.Trigger props.

`GlassTabsContent`

The tab's panel, on a glass card.

Prop	Type	Default	Description
`value`Required	`string`	None	Shown when the trigger with the same value is selected.
`className`	`string`	None	Applies to the glass card.

Also accepts Radix Tabs.Content props.