Registry

Overview

XaC Labs UI is distributed as a shadcn-compatible registry hosted at https://ui.xaclabs.dev. All components follow the shadcn/ui new-york style with Tailwind CSS v4 and CSS variables.

You can install individual components or full-page blocks directly into your project using the CLI.

Setup

1. Add the registry to your project

In your project’s components.json, add the registry under registries:

{
  "registries": {
    "@xaclabs": {
      "url": "https://ui.xaclabs.dev/r"
    }
  }
}

2. Install a component

# Using the registry alias (after adding to components.json)
npx shadcn@latest add @xaclabs/container

# Or install directly via URL (no components.json change needed)
npx shadcn@latest add https://ui.xaclabs.dev/r/container.json

3. Install a block

Blocks are full-page compositions. Each block installs its page file, all sub-components, and all registry dependencies automatically.

npx shadcn@latest add @xaclabs/home

Available Blocks

Registry URL Pattern

Items can be fetched individually for inspection:

curl https://ui.xaclabs.dev/r/container.json | jq .

Quick Start with create

Scaffold a new project with blocks pre-configured:

npm create @xaclabs/ui

This creates an Astro project with Shadcn UI, Tailwind CSS v4, and the XaC Labs UI registry already wired up.

Technical Notes

• Style: new-york (shadcn style)
• Tailwind: v4 with CSS variables (cssVariables: true)
• Base color: neutral
• Icon library: lucide
• Path aliases: @/components, @/components/ui, @/lib, @/hooks
• No RSC: Components are client-compatible (rsc: false)
• Block sub-component names are prefixed with the block name (e.g., home-hero, doc-sidebar, blog-article)
• Component file names use kebab-case, component exports use PascalCase