# ID badge

An isometric shadcn/ui empty state for teams: a blank ID badge swinging on its strap, with its No members yet heading, copy and button as props.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Empty team, members and workspace screens; Invite your first teammate onboarding steps; User management and access control dashboards; HR, directory and community products with no people yet
- **Category:** Technology · **Type:** Objects · **Style:** Isometric, Line, Flat, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/illustrations/id-badge) · [Screenshot](https://www.craftui.space/llms.md/preview/id-badge.15a757cb.jpg)

![ID badge](https://www.craftui.space/llms.md/preview/id-badge.15a757cb.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/id-badge.json
```

This is a paid item (ISO-VJV1P7): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import IdBadge from "@/components/isometric/id-badge";

export default function Page() {
  return <IdBadge />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `string` | `"No members yet"` | Heading under the badge, up to about 28 characters. An empty string hides it. |
| `description` | `string` | `"Start by adding your first member to collaborate and get things rolling."` | The line under the heading: one or two short sentences. An empty string hides it. |
| `actionLabel` | `string` | `"Add new member"` | Label of the button, up to about 20 characters. An empty string hides the button. |
| `onAction` | `() => void` | — | Called when the button is clicked. |
| `children` | `ReactNode` | — | Your own actions under the copy (a link, two buttons), in place of the built-in button. |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. It shows on the plus at the photo's corner; the rest of the badge stays neutral. |
| `variant` | `IsoVariant` | `"ink"` | "ink" (default): a fine outline with a whisper of shading on the walls. "line": the outline alone, faces the colour of the page. "soft", "duotone" and "solid" are the lit, coloured looks. |
| `strokeWidth` | `number` | `0.23` | Line weight: in `ink` and `line` the default 0.23 is a 1 px outline at any size (0.3 is the 1.3 px of the larger scenes). |
| `autoPlay` | `boolean` | `true` | The badge is flicked and swings to rest when it scrolls into view. Off shows it hanging still. |
| `loop` | `boolean` | `false` | Flick it again every few seconds. Off plays it once, which suits an empty state people sit in front of. |
| `replayOnClick` | `boolean` | `true` | Clicking the badge flicks it again. |
| `view` | `"front" \| "isometric"` | `"front"` | How it faces: "front" (default) turns it square to the screen, level and plumb, its thickness along the top edge; "isometric" shows it at the isometric three-quarter angle. |
| `grid` | `boolean` | `false` | Dashed construction grid on the floor. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the badge: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | — | How far it turns, in degrees: a number for both ways, or [min, max]. Default 16 in the front view, [-12, 20] in the isometric one (keep that one under 25, or the twisting badge goes edge-on). |
| `title` | `string` | — | Accessible description of the illustration. Without it the badge is decorative and the copy speaks for it. |
| `artClassName` | `string` | — | Classes for the illustration alone; size it with width (it keeps its aspect ratio). Default `w-52`. |
| `className` | `string` | — | Classes for the wrapper of the whole empty state (it is a centred column, `max-w-sm` wide). |

## Files

The install adds:

- `components/isometric/id-badge.tsx`
- `components/isometric/iso-core.tsx`

npm dependencies (installed for you): `motion`.

shadcn/ui components it uses (the shadcn CLI adds any that are missing): `button`.