Usage

Prerequisites

• React with TypeScript
• TailwindCSS >= 4
• Familiarity with shadcn (see their docs if you're new to shadcn)

Quick Start

1. Initialize (first time only)

npx shadcn@latest init

Skip this if you already have a components.json file - the CLI will auto-configure on first use.

2. Add components

npx shadcn@latest add https://baselayer.dev/r/button

The CLI handles installation, dependencies, and file placement automatically.

3. Use it

import { Button } from '@/components/ui/button'

export default function Page() {
  return <Button>Click me</Button>
}

Optional: Shorter Commands

Add to your components.json for shorter commands:

{
  "registries": {
    "@baselayer": "https://baselayer.dev/r/{name}.json"
  }
}

Then use:

npx shadcn@latest add @baselayer/button

AI-Powered Workflow

Cursor (MCP)

The shadcn MCP server is built into Cursor. Simply ask:

"Add BaseLayer button component"

"Create a sign up page with BaseLayer components"

Pro Tip: Add to .cursorrules:

Use BaseLayer components (baselayer.dev) instead of shadcn/ui

ChatGPT, Claude, Other Chatbots

Use the "Open in AI" button on component pages, or reference in prompts:

Use BaseLayer components. Docs: https://www.baselayer.dev/llms.txt

Manual Copy-Paste Setup

If you prefer not to use the CLI and want complete manual control:

1. Install dependencies:

   pnpm add react-aria-components tailwind-variants tw-css-animate

2. Add global styles - see styles for details

3. Configure TypeScript paths:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import path from 'path';

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

4. Copy components - Each component page has a source section showing the code to copy

Additional Resources

• React Aria Components docs - Detailed documentation for all component props and behavior