DUChart
ChartsLightweight Tailwind/SVG charts (bar, line, donut) without ApexCharts.
import { DUChart } from 'deri-ui';Live preview
Weekly
M
T
W
typescript
<DUChart variant="bar" title="Revenue" data={[{label:'Mon',value:12}]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'bar' | 'line' | 'donut' | 'bar' | Chart type |
| data | DUChartDatum[] | — | Series |
| accentColor | string | — | Primary color |
| height | number | — | Plot height |
Usage
import { DUChart } from 'deri-ui';
<DUChart variant="bar" title="Revenue" data={[{label:'Mon',value:12}]} />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.