Tabs with a measured sliding underline, icons, counts and crossfading panels.
npx shadcn@latest add https://hyperblur.dev/r/tabs-underline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/tabs-underline.tsx.
import { TabsUnderline } from "@/components/hyperblur/tabs-underline"
<TabsUnderline
tabs={[
{ id: "overview", label: "Overview", content: "Project summary" },
{ id: "issues", label: "Issues", count: 12, content: "Open issues" },
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | TabsUnderlineTab[] | required | Tabs with id, label, content and optional icon and count. |
| defaultValue | string | Initially selected tab id when uncontrolled. Defaults to the first tab. | |
| value | string | Controlled selected tab id. | |
| onChange | (id: string) => void | Called when the selection changes. | |
| fitted | boolean | false | Stretch the tabs to share the full width. |
| color | string | "#2f7bff" | Underline and focus ring color. |