Signature / Moleculestable

Morphing Tabs

Tab component with a smoothly sliding indicator that morphs between items.

@glinui/uiComponent: morphing-tabs

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add morphing-tabs

Usage$

MorphingTabs is a "use client" component. Pass an array of items with id and label. The active indicator smoothly slides between tabs.

Basic$

TSX

1"use client"
2import { MorphingTabs } from "@glinui/ui"
3
4export function MorphingTabsDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <MorphingTabs
8      items={[
9        { id: "overview", label: "Overview" },
10        { id: "features", label: "Features" },
11        { id: "pricing", label: "Pricing" },
12        { id: "docs", label: "Docs" }
13      ]}
14    />
15  </div>
16)
17}

Examples$

Underline Variant$

TSX

1"use client"
2import { MorphingTabs } from "@glinui/ui"
3
4export function MorphingTabsUnderlineDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <MorphingTabs
8      variant="underline"
9      items={[
10        { id: "all", label: "All" },
11        { id: "active", label: "Active" },
12        { id: "archived", label: "Archived" }
13      ]}
14    />
15  </div>
16)
17}

Solid Variant$

TSX

1"use client"
2import { MorphingTabs } from "@glinui/ui"
3
4export function MorphingTabsSolidDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <MorphingTabs
8      variant="solid"
9      size="lg"
10      items={[
11        { id: "daily", label: "Daily" },
12        { id: "weekly", label: "Weekly" },
13        { id: "monthly", label: "Monthly" }
14      ]}
15    />
16  </div>
17)
18}

Accessibility$

Renders with role="tablist" on the container and role="tab" on each button.
aria-selected is set on the active tab.
Disabled tabs receive disabled attribute and are visually marked.

Reduced Motion$

When prefers-reduced-motion: reduce is active, the indicator transition duration is set to 0 for instant position changes.

API Reference$

Prop	Type	Required	Default	Description
`activeId`	`string`	No	`-`	Active tab id
`defaultActiveId`	`string`	No	`-`	Default active tab id
`items`	`MorphingTabItem[]`	Yes	`-`	Tab items
`onTabChange`	`(id: string) => void`	No	`-`	Callback when active tab changes
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Size
`variant`	`"glass" \| "solid" \| "underline"`	No	`"glass"`	Visual variant

Source$

TSX

1import { MorphingTabs } from "@glinui/ui"

packages/ui/src/components/morphing-tabs.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/morphing-tabs.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

MorphingTabsProps

`MorphingTabsProps`

Prop	Type	Required	Default	Description
`activeId`	`string`	No	`-`	Active tab id
`defaultActiveId`	`string`	No	`-`	Default active tab id
`items`	`MorphingTabItem[]`	Yes	`-`	Tab items
`onTabChange`	`(id: string) => void`	No	`-`	Callback when active tab changes
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Size
`variant`	`"glass" \| "solid" \| "underline"`	No	`"glass"`	Visual variant