# Previous and next (goodtabs UI)

Previous and next page cards for the end of a doc. Either side can be missing.

## Install

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

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

## Usage

```tsx
import { PrevNext } from "@/components/ui/prev-next"

<PrevNext
  prev={{ label: "Installation", href: "/docs/installation" }}
  next={{ label: "Theming", href: "/docs/theming" }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| prev | `{ label: string; href: string }` |  | The page before this one. Omit on the first page. |
| next | `{ label: string; href: string }` |  | The page after this one. Omit on the last page. |
| aria-label | `string` | `"Pages"` | Accessible name of the nav landmark. |

## When to use

- At the end of a docs or guide page that sits in a sequence
- Chapters of a long form piece or a course
- Anywhere the next step is one obvious page

## When not to use

- For numbered pages of a list or table, use pagination
- For moving between sibling records in an app, use icon buttons in the header
- When there is no sequence: it renders nothing without prev or next

## Notes for agents

- Server component with next/link, so pass real hrefs; compute prev and next from your ordered page list
- With only next, the card keeps the right column from sm up so the layout does not jump between pages
- Labels truncate to one line; keep them to the page title, not a description
- The links carry rel=prev and rel=next for crawlers and readers

Docs: https://ui.goodtabs.co/components/prev-next