Grids & Layouts
Soft Clay Layout
Soft clay-inspired bento grid with rounded corners and earthy tones.
bentoclaysoftrounded
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
mainTitle | string | Soft Touch | Main card title text. |
mainIcon | React.ReactNode | Main icon component (optional). | |
balanceLabel | string | Balance | Balance card label text. |
balanceValue | string | $12,450 | Balance card value display. |
storageTitle | string | Storage | Storage card title text. |
storagePercentage | number | 60 | Storage percentage value (0-100). |
storageLabel | string | 60% Used | Storage card label text. |
backgroundColor | string | #e0e5ec | Background color (hex, rgb, or hsl). |
accentColor | string | blue-500 | Accent color (Tailwind color name or hex). |