DUCard
ComponentsComposable card with image, profile, quote, rating, progress, article variants.
import { DUCard } from 'deri-ui';Live preview
Minimal
tone=minimal
Ship reusable UI.
— Founder
typescript
<DUCard variant="simple" tone="minimal" title="Hello" description="Reusable card." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | simple | image | profile | profileRow | quote | rating | progress | article | 'simple' | Layout |
| tone | 'default' | 'flat' | 'minimal' | 'default' | Chrome |
| title / description / image / badge / action | mixed | — | Content slots |
| radius | DURadius | 'md' | Corner radius |
| className | string | — | Customization |
Usage
import { DUCard } from 'deri-ui';
<DUCard variant="simple" tone="minimal" title="Hello" description="Reusable card." />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.