Feature grid
ProFeatures in a grid separated by hairlines rather than boxes: an icon, a title and a sentence each, optionally a link. Cells rise in one after another.
npx prodular-ui add feature-gridPart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
Three features
One row with a Learn more link in the middle.
- Invoices in a minuteLine items, taxes and payment links from your price list.
- Reconciled every hourPayments match and post to your ledger on their own.
import { BellRingIcon, BookCheckIcon, FileTextIcon } from "lucide-react"
import { FeatureGrid } from "@/components/ui/feature-grid"
export default function FeatureGridProduct() { return ( <FeatureGrid className="w-full" features={[ { icon: FileTextIcon, title: "Invoices in a minute", description: "Line items, taxes and payment links from your price list." }, { icon: BellRingIcon, title: "Reminders in your tone", description: "Polite before the due date, firm after it.", href: "#" }, { icon: BookCheckIcon, title: "Reconciled every hour", description: "Payments match and post to your ledger on their own." }, ]} /> )}Anatomy
<FeatureGrid features={features} />Guidance
Use it when
- What the product does, in three or six short items.
- href on items that have their own page.
Avoid
- More than nine items.
- Paragraphs. One sentence per feature.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Pass features as { icon, title, description, href? }. Keep titles to four words or fewer.
- columns 3 by default; 2 for longer descriptions.
API
FeatureGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| features | { icon?, title, description, href? }[] | The features. | |
| columns | 2 | 3 | 4 | 3 | Columns on wide screens. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add feature-grid# or, with the registry in components.jsonnpx shadcn@latest add @prodular/feature-grid