# Add Card (`add-card`) - SignalOS widget

> Clickable dashed placeholder card with a label and icon, used to trigger adding a new item.

- **Version:** 0.2.0
- **Kind:** widget · **Category:** data-display
- **Install:** `npx shadcn@latest add @signalos/add-card`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/skeleton
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/widgets/add-card/AddCard.tsx`, `src/components/widgets/add-card/AddCard.types.ts`, `src/components/widgets/add-card/AddCard.utils.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
import { AddCard } from "@/components/widgets/add-card/AddCard"
```

## Example

```tsx
import { FolderPlus } from "lucide-react"

import { AddCard } from "./AddCard"

export default function Example() {
  return (
    <div className="max-w-sm">
      <div className="grid grid-cols-2 gap-6">
        <AddCard
          label="New Project"
          onClick={() => {}}
          icon={
            <div className="rounded-full bg-primary/10 p-3">
              <FolderPlus className="h-6 w-6 text-primary" />
            </div>
          }
          className="border-primary/30 bg-primary/5 hover:bg-primary/10"
        />
      </div>
    </div>
  )
}
```

## Props

### `AddCardProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `label` | `ReactNode` | yes | - | Label displayed inside the card. |
| `onClick` | `() => void` | yes | - | Callback when the card is clicked. |
| `icon` | `ReactNode` | no | - | Optional icon.  Defaults to Plus. |
| `disabled` | `boolean \| undefined` | no | - | Disable interaction. |
| `className` | `string \| undefined` | no | - | Additional CSS classes. |
| `data-testid` | `string \| undefined` | no | - | Test identifier rendered as `data-testid` on the root element. |

## Changelog

# add-card

## 0.2.0

- **Breaking:** rename the `testId` prop to `data-testid` to match the rest
  of the registry and the DOM attribute name.

## 0.1.2

- Content sync fix to bring source in line with published registry payload.


## 0.1.1

- Minor updates.

## 0.1.0

- Initial release.