Bento Grid

A cool grid layout with different child component.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/bento-grid.json"

Copy and paste the following code in the same folder

BentoGrid.vue

BentoGridCard.vue

BentoGridItem.vue

BentoGrid in MagicUI style.

Slot Name	Description
`title`	Component to show as title.
`description`	Component to show as description.
`icon`	Component to show as icon.
`header`	Component to show as header.

Slot Name	Description
`background`	Component to show in background.

Props Name	Type	Description
`name`	`string`	Name or title to show on card.
`icon`	`?string`	Icon component to show on card.
`description`	`string`	Description content to show on card.
`href`	`string`	Link to the url for CTA.
`cta`	`string`	Text to show on CTA.

On This Page