The LiquidTabs component is a tab switcher whose selection pill flows between tabs, stretching in proportion to how fast it is travelling and settling back into shape as it lands.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/liquid-tabs.jsonEverything Liquid Tabs accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; value: string }[] | No default | The tabs to render, in order |
| defaultValue | string | first item | Selected tab when the component is uncontrolled |
| value | string | No default | Selected tab. Pass with onValueChange to control the component |
| onValueChange | (value: string) => void | No default | Called with the value of the newly selected tab |
| squish | number | 0.22 | Peak stretch of the pill at full speed, as a scale factor |
| className | string | '' | Additional CSS classes applied to the tab list |
The pill stretches as it travels and settles when it lands.