Customization model
From tokens to owning the source, in order of power.
Pre-release
skiddie is being built. Commands and APIs on this page are the planned design and may change before v0.1.
| Layer | Use it for |
|---|---|
| 1. Tokens | Colors, radius, spacing, motion for everything |
| 2. Variants | Presets like variant="pill", indicator="underline", labelMode="active" |
3. className / classNames slots | Restyle with Tailwind classes. className for the root, classNames for parts: bar, item, itemActive, indicator, label, labelActive, badge |
| 4. Render props | Replace parts: renderItem, renderIndicator, renderBadge |
| 5. Motion | animation={{ type: 'spring', spring: {{ damping, stiffness }} }}, reducedMotion |
| 6. Headless hooks | Build your own on the same mechanics: useTabBar, useSegmented, useCollapsingHeader |
| 7. The source | It's in your project. Change anything. skiddie diff shows upstream changes later |
Classes
Your classes are merged after the defaults with tailwind-merge, so they win:
<FloatingTabBar
{...props}
className="bottom-6"
classNames={{
bar: 'bg-zinc-900/90 dark:bg-zinc-100/90',
indicator: 'bg-sky-400',
label: 'font-semibold',
}}
/>style still works as an escape hatch and beats classes.