# Resource card (goodtabs UI)

The goodtabs resource cell: favicon, name, domain, description, tags and a bookmark.

## Install

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

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

## Usage

```tsx
import { ResourceCard } from "@/components/ui/resource-card"

<ResourceCard
  resource={{ name: "Mobbin", url: "https://mobbin.com", description: "Real app screens and flows.", tags: ["inspiration"], pricing: "freemium", isNew: true }}
  saved={saved}
  onSavedChange={setSaved}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| resource | `{ name; url; description; tags; pricing; isNew?; favicon? }` |  | The resource to show. pricing is free, freemium, paid or open-source. |
| saved | `boolean` |  | Controlled saved state. Leave undefined for uncontrolled. |
| onSavedChange | `(saved: boolean) => void` |  | Called with the next state when the bookmark is pressed. |
| onOpen | `(resource: Resource) => void` |  | Called when the link is followed. |

## When to use

- A directory or library of links where each entry needs a name, a line and a save
- Dense grids of 250px cells that share hairlines inside one frame
- Bookmark lists, curated collections and tool roundups

## When not to use

- Internal navigation; the cell opens an external url in a new tab
- Content with a picture or a long body; use an image card or a link card
- When nothing can be saved; the bookmark is part of the cell

## Notes for agents

- Client component: it holds the saved state when saved is undefined, and the demos pass onSavedChange
- The name is a stretched link over the whole cell and the bookmark sits above it, so nothing is nested
- The cell has no border or radius of its own: wrap one in a rounded-lg border, or many in a gap-px bg-border grid
- The brand colour appears only on the New dot and the saved bookmark; badges stay monochrome

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