# File cabinet

An isometric shadcn/ui empty state: a line-drawn file cabinet whose drawer rolls open with nothing inside, with its 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 states for tables and dashboards with no records; First-run and onboarding screens in SaaS apps; No files, no documents and empty archive screens; CRM, admin and data products needing a placeholder
- **Category:** Data · **Type:** Objects · **Style:** Isometric, Line, Flat, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/illustrations/file-cabinet) · [Screenshot](https://www.craftui.space/llms.md/preview/file-cabinet.e112fb37.jpg)

![File cabinet](https://www.craftui.space/llms.md/preview/file-cabinet.e112fb37.jpg)

## Install

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

This is a paid item (ISO-Z84F1M): 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 FileCabinet from "@/components/isometric/file-cabinet";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `string` | `"No data yet"` | Heading under the cabinet, up to about 28 characters. An empty string hides it. |
| `description` | `string` | `"Your data will appear here once you create or import your first records"` | The line under the heading: one or two short sentences. An empty string hides it. |
| `actionLabel` | `string` | `"Add data"` | 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 open drawer's label card; the rest of the cabinet stays neutral. |
| `drawer` | `"bottom" \| "top"` | `"bottom"` | Which drawer rolls open: "bottom" or "top". |
| `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 drawer rolls open when the cabinet scrolls into view. Off shows it open and still. |
| `loop` | `boolean` | `false` | Push the drawer shut and roll it open again every few seconds. Off plays it once, which suits an empty state people sit in front of. |
| `replayOnClick` | `boolean` | `true` | Clicking the cabinet pushes the drawer shut and rolls it open again. |
| `shadow` | `"soft" \| "none"` | `"none"` | No shadow (default), or the soft cast shadow. |
| `grid` | `boolean` | `false` | Dashed construction grid on the floor. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the cabinet: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `built-in demo content` | How far it turns, in degrees: a number for both ways, or [min, max]. Default [-14, 24]. |
| `title` | `string` | — | Accessible description of the illustration. Without it the cabinet 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-60`. |
| `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/file-cabinet.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`.