Skip to content
txbrendan/ui

Get started

Add the registry, add the theme, then add components. The files land in your app, and they are yours to edit.

Before you start

You need a React app with shadcn set up, so it has a components.json. Our install test runs these steps in a fresh Next.js app.

Install

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

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

    Or add this entry by hand. Without this step, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    {
  "registries": {
    "@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. To start from your own brand color, use the theme builder.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add each component or block you need. A block also adds every component it uses.

    npx shadcn@latest add @txbrendan/button

Keep this order. A component install only adds tokens that are missing, so it never changes your colors. Only the theme install replaces them.

Use a component

With shadcn's default paths, components land in components/ui and blocks land in components. Import them like any other file.

import { Button } from "@/components/ui/button";

export function SaveButton() {
  return <Button tone="brand">Save</Button>;
}

Props use the words tone, emphasis, and size, plus loading and disabled where they fit. Each component page lists its props and when to use it.

Next