Components
Tabs
Tab navigation where the active tab gets a hand-drawn underline that redraws on switch.
Manage your account settings here.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/tabs.jsonProps
PropTypeDefaultDescription
animateOnHoverbooleantrueRedraws the sketch lines on hover.
defaultValuestring""Initial uncontrolled value.
onValueChange(value: string) => void—
Callback fired when the active value changes.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
valuestring—
Controlled value for the component.
With disabled tab
Overview content
Accessibility
Tabs uses semantic tab roles and only renders the active panel content. Make each trigger label short and descriptive so screen-reader users can understand the panel switch without extra context.
Examples
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
} from "@/components/crumble/ui/tabs";
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Account settings</TabsContent>
<TabsContent value="password">Change your password</TabsContent>
</Tabs>;