# Link card (goodtabs UI)

A card that is one link, with a title, a line of text and an arrow top right.

## Install

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

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

## Usage

```tsx
import { LinkCard } from "@/components/ui/link-card"

<LinkCard href="/docs/installation" title="Installation" description="Add the registry and install any item with one command." />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| href | `string | UrlObject` |  | Where the card goes. Passed to next/link. |
| title | `string` |  | The card heading. |
| description | `string` |  | One or two lines under the title. |
| icon | `ReactNode` |  | Optional 16px icon above the title. |
| external | `boolean` | `false` | Opens in a new tab with rel="noopener noreferrer" and a sr-only note. |

## When to use

- A grid of destinations on a docs index or an overview page
- Next steps at the end of a guide, two to four cards wide
- Anywhere a whole surface should be one click, not a card with a button inside

## When not to use

- When the card holds other interactive things; nested links and buttons are invalid HTML
- For a short inline link in text; use a plain link or the arrow link
- For content that is not navigation, such as a stat or a notice

## Notes for agents

- Server component built on next/link, so it needs a Next.js app and a real href; it accepts every Link prop
- The whole card is the anchor: do not put buttons or other links inside it
- Hover is bg-accent/40 and the arrow turns foreground; focus-visible rings the card, there is no other colour
- It has no fixed width: set max-w on the card or put several in a CSS grid

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