Skip to content

Getting Started

The Scintillar UI registry provides 57+ reusable components and blocks that you can install directly into your project using the shadcn CLI.

Prerequisites

Make sure your project is set up with:

  • React 19 or later
  • Tailwind CSS v4
  • shadcn initialized in your project

If you haven't initialized shadcn yet, run:

npx shadcn@latest init

Configure the Registry

Add the Scintillar registry to your project's components.json:

{
  "registries": {
    "@scintillar": "https://ui.scintillar.com/r/{name}.json"
  }
}

Installing Components

Once configured, install any component with:

npx shadcn@latest add @scintillar/button

This will install the component and all of its dependencies into your project.

Components vs Blocks

  • Components are UI primitives (Button, Input, Select, ColorPicker, etc.) — installed into components/ui/
  • Blocks are complex compositions (DataTable, FormSection, AuthLogin, etc.) — installed into your project with all their dependencies
# Install a primitive
npx shadcn@latest add @scintillar/password-input

# Install a block
npx shadcn@latest add @scintillar/auth-login

Project Structure

Components are installed into your project's components directory:

components/
  ui/
    button.tsx
    password-input.tsx
    color-picker.tsx
    ...

Development

Running the registry locally

pnpm install
pnpm dev

Testing

pnpm test              # Unit tests (Vitest)
pnpm test:e2e          # E2E tests (Playwright)
pnpm test:a11y         # Accessibility audit
pnpm healthcheck       # Overall health dashboard

Adding a new component

  1. Create the component in components/ui/ (or registry/new-york/blocks/ for blocks)
  2. Add JSDoc to all exported functions
  3. Register in registry.json
  4. Create a preview in components/previews/
  5. Create an accessibility doc in content/a11y/
  6. Write unit tests in tests/unit/
  7. Run pnpm healthcheck

Next Steps