# Quick links (goodtabs UI)

A grid of link tiles with icon, title and one line, sharing hairlines in one frame.

## Install

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

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

## Usage

```tsx
import { QuickLinks } from "@/components/ui/quick-links"

<QuickLinks
  items={[
    { title: "Quickstart", description: "Deploy in five minutes.", href: "/docs/quickstart", icon: <RocketIcon /> },
    { title: "CLI", description: "Install and log in.", href: "/docs/cli", icon: <TerminalIcon /> },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ title: string; description: string; href: string; icon?: ReactNode }[]` |  | The tiles, in order. The description is clipped to one line. |
| columns | `2 | 3` | `3` | Columns at the widest breakpoint. One column below sm, two from sm, three from lg. |

## When to use

- The top of a docs home, a settings index or a help centre
- Four to nine destinations that each deserve a short description
- When the tiles should read as one calm block rather than separate cards

## When not to use

- For one or two links, use arrow links in a paragraph
- When each item needs an image, a badge or more than one line of copy
- For in-page navigation, use tabs or a sidebar

## Notes for agents

- Server component using next/link, so pass real hrefs; it needs no client wrapper
- The frame clips the last column's right hairline and the last row's bottom hairline, so any item count looks right
- Pass a max-width through className; the grid is w-full
- Icons render at 16px in muted-foreground; any lucide icon or inline SVG using currentColor works

Docs: https://ui.goodtabs.co/components/quick-links