Skip to content
txbrendan/ui

Stacked Blocks

beta

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

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/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

    What the picture says, read out in its place.

    string · default a sentence about the blocks

  • tone

    The color of the last block and its spark.

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

  • pattern

    A field of dots behind the blocks.

    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 last block drops by three times the motion distance. Reduced motion sets that to 0, so it stays still.

Examples

The default blocks

<StackedBlocks />

In your brand color

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