# Success state (goodtabs UI)

Says what happened and offers one next step.

## Install

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

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

## Usage

```tsx
import { SuccessState } from "@/components/ui/success-state"

<SuccessState title="Site published">
  <Button asChild><a href="/site">View site</a></Button>
</SuccessState>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | What happened, in the past tense. |
| description | `string` |  | What changed or what comes next. |
| children | `ReactNode` |  | The one next step, a button or a link. |

## When to use

- A form or flow finished and the same space should confirm it
- Giving one obvious next step after a task completes

## When not to use

- Small background saves, where a toast is quieter
- Flows with several equal next steps

## Notes for agents

- Renders role=status, so it is announced politely when it mounts
- The check sits in a primary tile, not green, to keep the palette monochrome
- Pass one action only; the point is a single clear next step
- Add the border and radius through className when you place it inside a card

Docs: https://ui.goodtabs.co/components/success-state