Glass Tabs | Glassy UI

Preview

Copy-ready glass components.

Release demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Tabs

pnpm dlx [email protected] add @glassyui/glass-tabs

Direct registry declarations

These values belong to @glassyui/glass-tabs itself in registry.json.

Package dependencies

@radix-ui/react-tabs
clsx

Registry dependencies

@glassyui/glass-panel

File targets

components/glassyui/glass-tabs.tsx

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-tabs
clsx

Installed files

components/glassyui/glass-tabs.tsx
components/glassyui/glass-panel.tsx
components/glassyui/glass-surface.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/use-local-light.ts
components/glassyui/lib/refraction-map.ts
components/glassyui/lib/use-refraction-filter.tsx
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

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

Examples

Default tab

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

API

GlassTabs

Radix Tabs root.

GlassTabsList

Glass pill list for triggers.

GlassTabsTrigger

Semantic Radix trigger with active glass styling.

GlassTabsContent

Panel-backed tab content.

Notes

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.