# Task status

An isometric shadcn/ui scene for task and project tools: tasks turn into lights that run dashed routes into pastel status tiles and light their borders.

> 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:** Project and task management product sites; Kanban, status and workflow-stage feature sections; Issue tracker and team productivity landing pages; Explaining how work is organized by status
- **Category:** Technology · **Type:** Scenes · **Style:** Gradient, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/task-status) · [Screenshot](https://www.craftui.space/llms.md/preview/task-status.06114348.jpg)

![Task status](https://www.craftui.space/llms.md/preview/task-status.06114348.jpg)

## Install

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

This is a paid item (ISO-4E36Y0): 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 TaskStatus from "@/components/isometric/task-status";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. The routes and the hub's tint. |
| `statuses` | `Partial<Record<TaskStatusKey, Partial<TaskStatusStyle>>>` | — | Name and pastel hue per status, keyed "notStarted", "inProgress", "pending" and "done" (any you leave out keep the built-in demo content: Not started, In progress, Pending and Done in purple, blue, orange and green). |
| `tasks` | `StatusTask[]` | `built-in demo content` | The tasks sorted in one cycle, in order, one issue badge and light each. Default: "Update docs" → Not started, "Fix login bug" → In progress, "Legal sign-off" → Pending, "Ship v2.4" → Done. |
| `variant` | `IsoVariant` | `"soft"` | Soft gradient drawing with a tinted outline (default), flat ink, soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `soft` 0.3 is a 1 px outline at any size (1.3 px in `ink`). |
| `autoPlay` | `boolean` | `true` | Plays while in view, looping. Off shows the calm board. |
| `grid` | `boolean` | `false` | Dashed construction grid on the floor. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the scene: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `18` | How far it turns, in degrees: a number for both ways, or [min, max]. Default 18. |
| `title` | `string` | — | Accessible description. Without it the scene is decorative. |
| `className` | `string` | — | Classes for the wrapper; size the scene with width (it keeps its aspect ratio). |

### `TaskStatusStyle`

| Field | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | Name printed under the glyph, up to about 11 characters ("In progress"). |
| `tone` (required) | `IsoTone` | Pastel hue of the tile, its glyph and its cards: a theme token name or any CSS colour. |

### `StatusTask`

| Field | Type | Description |
| --- | --- | --- |
| `title` (required) | `string` | Card title, up to about 14 characters ("Fix login bug"). |
| `status` (required) | `"notStarted" \| "inProgress" \| "pending" \| "done"` | The status it is sorted into. |

## Files

The install adds:

- `components/isometric/task-status.tsx`
- `components/isometric/iso-core.tsx`

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