Alternative Workflow

shadcn/ui CLI Integration

BrutxUI features standard shadcn/ui-compatible registry JSON schemas. This allows you to copy-paste or install Brutx components directly into your codebase using the official shadcn CLI in addition to our native brutx CLI tool.

1. How it works

Each component in BrutxUI maps to a standalone, self-describing JSON file containing all source code files, npm packages, tailwind styles, and CSS custom variables. When you run the shadcn add command pointing to our hosted registry, the shadcn CLI will:

  • Automatically resolve and install any required npm dependencies (e.g. @radix-ui/react-slot, lucide-react).
  • Download the component file directly to your components/ui/ folder.
  • Merge the required Brutx tailwind extensions and custom HSL/CSS variables directly into your local tailwind.config.js and global CSS stylesheet automatically.

2. Basic Commands

You can install any component from BrutxUI by supplying the direct URL to the component's registry schema. Below are several examples:

Native Brutx CLI Workflow

npx brutx add button card

Installing via shadcn CLI

Simply target the component's absolute JSON endpoint on our registry host:

# Add the Button component
npx shadcn@latest add https://brutxui.site/registry/button.json

# Add the Card component
npx shadcn@latest add https://brutxui.site/registry/card.json

# Add complex dashboard stats block
npx shadcn@latest add https://brutxui.site/registry/dashboard-stats.json

3. Local Development, Publishing & Updates

For contributors modifying or publishing changes to registry components, the workspace offers a automated compile-and-validation suite.

Registry Build Pipeline

Step 1: Edit Component Source

Make changes directly inside the core typescript components folder: packages/ui/src/components/*.tsx.

Step 2: Re-generate Registry Files

Run the compiler script to automatically parse, strip local references, and generate matching JSON payloads.

pnpm --filter brutx-registry build

Step 3: Validate registry items

Confirm that the newly compiled schemas strictly comply with standard registry expectations and have valid file content and schema formats.

pnpm --filter brutx-registry validate