Bento Grid
Lays out cards on a grid where one can span several columns and cards in a row line up their parts.
Wallet
Every balance in one place.
Cards
A virtual card for every purpose.
Insights
Spending sorted by category, across the full row.
Configurations
Supported configurations for this component.
Configurations
3 examplesWallet
Every balance in one place.
Cards
A virtual card for every purpose.
Insights
Spending sorted by category, across the full row.
Send
Pay anyone in seconds.
Save
Set money aside in pots.
Spend
Cards that follow your rules.
Wallet
Every balance in one place, in every currency you hold, updated as each payment lands.
Updated now
Cards
A virtual card for every purpose.
3 cards active
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
BentoGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 1|2|3|4 | 2 | Columns on a desktop row. |
| tabletColumns | 1|2 | - | Columns between md and lg. Defaults to 2 for a three or four column grid, else to `columns`. |
| gap | keyof tokens.spacing | 3 | The gutter between panels, a spacing step, on both axes. The system's panel gutter is spacing[3]. |
| childrenreq | React.ReactNode | - | BentoGridItems. |
BentoGridItem
| Prop | Type | Default | Description |
|---|---|---|---|
| colSpan | number|'full' | 1 | Columns the panel runs across; 'full' takes the whole row at every width. Clamped to the columns the grid has at each width. |
| rowSpan | number | 1 | Rows the panel runs down, beside shorter neighbours. Dropped below md, where nothing stands beside it. |
| rows | number | - | Shared rows: the panel spans this many grid rows and lays its children on them (subgrid), so siblings with the same count line up part by part. One child per row. Overrides `rowSpan`. |
| rowGap | keyof tokens.spacing | 6 | The space between the shared rows, a spacing step; the card inset by default. |
| asChild | boolean | false | Render the only child (the caller's Card) as the item, merging the item's class, style and ref onto it. |
| render | React.ReactElement | - | The same as asChild, in the Base UI form some installers rewrite asChild into: the item renders this element with its class, style and ref merged on, and its children become the element's children. |
| childrenreq | React.ReactNode | - | The panel content, or with `asChild` the panel itself. |
AI Canvas