Liquid Tabs

A beautiful navigation primitive. The tab indicator mathematically squishes and stretches based on the physical velocity of the spring transition, rather than relying on standard hard-coded scales. If you jump multiple tabs, it stretches more!

Live Preview

Current Tab

overview

Installation

CLI

npx @modus-ui/cli add liquid-tabs

Manual

Copy the code from the component tab.
Create a file at components/ui/liquid-tabs.tsx.
Paste the code.

Usage

tsx

import { LiquidTabs } from "@/components/ui/liquid-tabs";

export default function Example() {
  const tabs = [
    { label: "Home", value: "home" },
    { label: "Profile", value: "profile" },
    { label: "Settings", value: "settings" },
  ];

  return <LiquidTabs items={tabs} defaultValue="home" />;
}

Props

Prop	Type	Default	Description
`items`	`LiquidTabItem[]`	-	The tabs to render.
`defaultValue`	`string`	-	The initially active tab when uncontrolled.
`value`	`string`	-	The active tab when controlled.
`onValueChange`	`(value: string) => void`	-	Called with the new value when a tab is selected.
`squish`	`number`	`0.22`	How much the indicator stretches while it moves (0 disables the effect).