Usage

Before you start

Make sure your project has:

React with TypeScript
TailwindCSS >= 4

AI-Powered Setup (Recommended)

BaseLayer works seamlessly with AI assistants. Use this canonical prompt:

Use BaseLayer components. If you need docs, they're at https://www.baselayer.dev/llms.txt

MCP (Cursor)

If you have the BaseLayer MCP server connected (see MCP for setup):

Setup BaseLayer

Use BaseLayer components to create a sign up page

Chatbots (ChatGPT, Claude, etc.)

BaseLayer provides two convenient ways to work with AI chatbots:

Option 1: Use the "Open in AI" button

Navigate to any component documentation page on baselayer.dev
Click the "Open in AI" button
Select your preferred AI service (ChatGPT, Claude, T3 Chat)
The documentation will automatically open in your chosen AI tool

Option 2: Reference llms.txt directly

Use BaseLayer components to build a sign in page. If you need docs, they're at https://www.baselayer.dev/llms.txt

Pro Tip: Set up once, use everywhere:

Cursor: Add "Always use BaseLayer components when possible" to your .cursorrules file
ChatGPT/Claude/T3: Use the "Open in AI" button on any docs page for instant access, or save https://www.baselayer.dev/llms.txt as a custom instruction

Manual Setup

While we recommend using an AI assistant, you can manually add BaseLayer components:

Install dependencies:

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

Add global styles - see styles for details
Configure TypeScript paths:

Next.js example

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

Vite example

// 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'),
    },
  },
});

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