Tabs

Radix tabs with a sketch underline under the active trigger. Switching tabs slides the rule and redraws it with a derived seed.

Real HTML under a sketch underline.

Roughness1.5Lock seedAnimate

<Tabs defaultValue="ink" roughness={1.5}>
  <TabList>
    <Tab value="ink">Ink</Tab>
    <Tab value="wash">Wash</Tab>
  </TabList>
  <TabPanel value="ink">Real HTML under a sketch underline.</TabPanel>
  <TabPanel value="wash">Switching tabs redraws the rule.</TabPanel>
</Tabs>

CLI install

npx doodleui-react add tabs

Usage

import { Tabs, TabList, Tab, TabPanel } from "doodleui-react";

<Tabs defaultValue="ink">
  <TabList>
    <Tab value="ink">Ink</Tab>
    <Tab value="wash">Wash</Tab>
  </TabList>
  <TabPanel value="ink">Real HTML under a sketch underline.</TabPanel>
  <TabPanel value="wash">Switching tabs redraws the rule.</TabPanel>
</Tabs>

Arrow keys, aria-selected, and tab panels come from Radix. doodle-ui only draws the active underline.

Props

Prop	Type	Default	Notes
defaultValue / value	string	required	Active tab. Switching redraws the underline with a derived seed.
onValueChange	(value: string) => void	undefined	Fires when the active tab changes.
animate	boolean	true	Active underline redraws and slides to the selected tab. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.