# Feature grid (goodtabs UI)

Feature columns divided by hairlines, with a plain title and a grey body.

## Install

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

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

## Usage

```tsx
import { FeatureGrid } from "@/components/feature-grid"

<FeatureGrid
  title="Built for the way you ship"
  features={[
    { title: "Installs in one line", description: "One command copies the source." },
    { title: "Tokens, not hex", description: "Dark mode comes free." },
    { title: "Keyboard first", description: "Focus states from the start." },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | Optional section heading. |
| description | `ReactNode` |  | Optional grey lead under the heading. |
| features | `{ title: string; description: string }[]` |  | The features, each a title and a one line description. |

## When to use

- Three or six equal-weight benefits under a hero
- When the copy is short and icons would only decorate
- Any section that should read as quiet text, not cards

## When not to use

- Cards with icons or borders, which want the feature card
- Mixed emphasis, which wants the bento
- Long copy or an image per feature, which wants the sticky list

## Notes for agents

- Three columns from the container's @2xl width, one column with top hairlines below
- Hairlines are border-l on columns 2 and 3 of each row; keep the count a multiple of three
- Titles are 14px foreground/85, bodies muted; there is no icon slot by design
- Server component with no state

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