DUTabs
NavigationSimple, pill, and underline tab layouts.
import { DUTabs } from 'deri-ui';Live preview
Overview panel
typescript
<DUTabs variant="pill" items={[{label:'One',content:<p>A</p>},{label:'Two',content:<p>B</p>}]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DUTabItem[] | — | Tabs |
| variant | 'simple' | 'pill' | 'line' | 'simple' | Style |
| accentColor | string | — | Active color |
Usage
import { DUTabs } from 'deri-ui';
<DUTabs variant="pill" items={[{label:'One',content:<p>A</p>},{label:'Two',content:<p>B</p>}]} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.