DUProgress
ElementsLinear progress bar with tone colors.
import { DUProgress } from 'deri-ui';Live preview
Progress68%
typescript
<DUProgress value={72} tone="success" showLabel />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value |
| max | number | 100 | Maximum |
| tone | primary | success | warning | danger | info | — | Color |
| size | 'sm' | 'md' | 'lg' | — | Thickness |
Usage
import { DUProgress } from 'deri-ui';
<DUProgress value={72} tone="success" showLabel />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.