# Feature card (goodtabs UI)

An icon, a title and a body, alone or in a grid that shares one set of hairlines.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/feature-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/feature-card`

## Usage

```tsx
import { FeatureCard, FeatureGrid } from "@/components/ui/feature-card"
import { ZapIcon } from "lucide-react"

<FeatureGrid>
  <FeatureCard icon={<ZapIcon />} title="Installs in one line">
    One shadcn command copies the source into your project.
  </FeatureCard>
</FeatureGrid>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| icon | `ReactNode` |  | A 16px icon, drawn in muted-foreground. |
| title | `ReactNode` |  | The feature title, one short line. |
| children | `ReactNode` |  | The body, one or two sentences. |
| columns | `2 | 3 | 4` | `3` | On FeatureGrid: columns from md up. One column below. |

## When to use

- A row of three or four benefits under a hero or a section heading
- Any grid of short, equal-weight points that should read as one surface
- A single highlighted capability inside a longer page

## When not to use

- Numbers and trends, which want the stat card
- Tiles of different sizes, which want the bento grid
- Long copy or images per feature, which want their own section

## Notes for agents

- FeatureCard has no border of its own; inside FeatureGrid the frame draws the hairlines, alone add rounded-lg border through className
- FeatureGrid paints bg-border and each cell paints bg-card, so every cell must stay opaque
- Keep the body to two lines; cells in one row share a height and long copy stretches the whole row
- Server components with no state; the icon is decorative and hidden from screen readers

Docs: https://ui.goodtabs.co/components/feature-card