# Stacked Blocks

> A picture of parts put together: a stack of blocks, with the last one floating down into place.

- Name: `stacked-blocks`
- Status: beta
- Categories: building, parts, agents, isometric
- Files: the install writes `stacked-blocks.tsx`, and any part files named `stacked-blocks-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Gallery: https://arbokui.com/illustrations/stacked-blocks
- Registry item: https://arbokui.com/r/stacked-blocks.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the illustration. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/stacked-blocks
   ```

## Use it for

- A feature section about building from parts, like agents putting a screen together from components.
- Put it in a Feature Grid item's \`illustration\`, or a Bento Card's \`preview\`.
- Set \`tone\` to color the last block and its spark, like brand for your main color.
- Write \`label\` as one sentence that says what the picture shows. Screen readers hear it in place of the drawing.

## Avoid it for

- A real diagram people read for facts. A picture only sets the mood.
- A small icon beside text. Use an icon from lucide-react.

## Props

- `label`: `string`. Default `a sentence about the blocks`. What the picture says, read out in its place.
- `tone`: `"neutral" | "brand" | "danger" | "success" | "warning"`. Default `"neutral"`. The color of the last block and its spark.
- `pattern`: `boolean`. Default `true`. A field of dots behind the blocks.
- `className`: `string`. Extra classes on the root.

## Accessibility

- The root is one image, named by \`label\`. The drawing is hidden from screen readers.
- Nothing inside takes focus.
- On hover the last block drops by three times the motion distance. Reduced motion sets that to 0, so it stays still.

## Examples

### The default blocks

```tsx
<StackedBlocks />
```

### In your brand color

```tsx
<StackedBlocks tone="brand" label="Agents put your screens together from our parts." />
```