Tabs

Tabs, and a floating tab bar with a lens you can drag between items.

Your plan renews on the first of every month.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/tabs

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Tabs } from "@/components/liquikit/tabs"

<Tabs.Root defaultValue="overview">
  <Tabs.List tabs={[{ value: "overview", label: "Overview" }, { value: "activity", label: "Activity" }]} />
  <Tabs.Panel value="overview">…</Tabs.Panel>
  <Tabs.Panel value="activity">…</Tabs.Panel>
</Tabs.Root>

Examples#

Tab bar#

Tabs.Bar is the floating bar from the bottom of a phone screen, with an icon over each label.

API Reference#

Tabs.Root

Prop	Type	Default
`value`	`string` The current value, when you control it.	—
`defaultValue`	`string` The value it starts with, when it manages its own state.	—
`onValueChange`	`(value: string, eventDetails?: BaseTabs.Root.ChangeEventDetails) => void` Called with the new value when the user changes it.	—

Also takes every prop of Base UI's tabs, plus className and style.

Tabs.List

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`tabs*`	`ReadonlyArray<string \| Segment>` The tabs, as strings or `{ value, label, disabled }` objects.	—
`height`	`number` Height of the tab row, in pixels.	—

Also takes every prop of Base UI's tabs, plus className and style.

Tabs.Bar

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`height`	`number` Height of the bar, in pixels.	50
`tabs*`	`ReadonlyArray<TabBarItem>` The tabs, each with a `value`, a `label` and an `icon`.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"

Tabs.Panel

Prop	Type	Default
`value*`	`string` The tab this panel belongs to.	—

Also takes every prop of Base UI's tabs, plus className and style.

Switch Toast