Tiles of two sizes, each showing the feature in miniature: a live chart, the team, sources and an alert switch.
$ pnpm dlx shadcn@latest add @dashral/features-bentoWhen to use
- Tiles of two sizes, each showing its feature in miniature.
- Product pages that want to show, not list.
When not to use
- Features without anything to show: Features grid.
- Features that take steps to explain: Feature tour.
Usage
Features bento with your own data: every prop has the sample as its default, so pass only what you have.
example.tsx
import { FeaturesBento } from "@/components/dashral/blocks/features-bento"
<FeaturesBento
title="Built for teams"
tiles={tiles}
/>API reference
FeaturesBento
Features as a bento grid, each tile showing the thing itself in miniature: a live chart, the team sharing a board, the sources it connects and an alert you can switch on. Tiles of two sizes; one column on phones. Every part comes from props: your tiles, each with a visual of its own.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Why teams switch" |
title | React.ReactNode | sample |
tiles | BentoTile[] | sample |
type BentoTile
A tile: the thing itself in miniature (visual), its title and a line; wide takes two columns.
| Prop | Type | Default |
|---|---|---|
title | string | — |
text | React.ReactNode | — |
visual | React.ReactNode | — |
wide | boolean | — |