Skip to content
txbrendan/ui

Theme Layers

beta

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

Preview

brand tone

no dots, narrow container

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

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

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the illustration. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

    npx shadcn@latest add @txbrendan/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

    What the picture says, read out in its place.

    string · default a sentence about the sheets

  • tone

    The color of the first swatch on the top sheet.

    "neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"

  • pattern

    A field of dots behind the sheets.

    boolean · default true

  • className

    Extra classes on the root.

    string

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

<ThemeLayers />

In your brand color

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