# Theme Layers

> A picture of one theme under every part: three sheets in the air, with a grid, lines of type, and color swatches.

- Name: `theme-layers`
- Status: beta
- Categories: theme, tokens, design system, isometric
- Files: the install writes `theme-layers.tsx`, and any part files named `theme-layers-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Gallery: https://arbokui.com/illustrations/theme-layers
- Registry item: https://arbokui.com/r/theme-layers.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/theme-layers
   ```

## Use it for

- A feature section about one theme for everything, like tokens for color, type, and spacing.
- Put it in a Feature Grid item's \`illustration\`, or a Bento Card's \`preview\`.
- Set \`tone\` to color the first swatch on the top sheet, 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 list of your theme's colors. Show the tokens themselves.
- A small icon beside text. Use an icon from lucide-react.

## Props

- `label`: `string`. Default `a sentence about the sheets`. What the picture says, read out in its place.
- `tone`: `"neutral" | "brand" | "danger" | "success" | "warning"`. Default `"neutral"`. The color of the first swatch on the top sheet.
- `pattern`: `boolean`. Default `true`. A field of dots behind the sheets.
- `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 top two sheets rise by the motion distance, so they spread apart. Reduced motion sets that to 0, so they stay still.

## Examples

### The default sheets

```tsx
<ThemeLayers />
```

### In your brand color

```tsx
<ThemeLayers tone="brand" label="One theme sets the color, type, and spacing of every part." />
```