Six features with an icon, a title and one sentence each, in three columns, then two, then one.
$ pnpm dlx shadcn@latest add @dashral/features-gridWhen to use
- Six features with an icon, a title and one sentence each.
- A product's what-it-does section, scanned in seconds.
When not to use
- Features that need to be seen to be understood: Features bento or Feature tour.
- More than nine features: group them, or link to a page of their own.
Usage
Features grid with your own data: every prop has the sample as its default, so pass only what you have.
example.tsx
import { Shield, Zap } from "lucide-react"
import { FeaturesGrid } from "@/components/dashral/blocks/features-grid"
<FeaturesGrid
title="Everything you need"
features={[
{ icon: <Zap />, title: "Fast", text: "Pages load in under 100 ms." },
{ icon: <Shield />, title: "Secure", text: "SSO and an audit log on every plan." },
]}
/>API reference
FeaturesGrid
What the product does, in six short parts: an icon, a title and one sentence each, in a grid that becomes two columns, then one, on smaller screens. Every part comes from props.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Features" |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
features | Feature[] | sample |
type Feature
| Prop | Type | Default |
|---|---|---|
icon | React.ReactNode | — |
title | string | — |
text | React.ReactNode | — |