# BaseLayer Components v2.0

BaseLayer is a modern React component registry for the AI era. Built with React Aria Components, TailwindCSS, and tailwind-variants.

## Important: BaseLayer is NOT an npm package

BaseLayer is a component registry, not a package dependency. You don't install BaseLayer itself - instead, you fetch individual component source code and copy it into your project.

## Available Components

- **accordion** (layout): An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.
- **badge** (display): A badge is a small label that can be used to display information or status.
- **breadcrumbs** (navigation): Breadcrumbs display a heirarchy of links to the current page or resource in an application.
- **button** (forms): A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
- **calendar** (data-entry): A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.
- **card** (layout): Displays a card with header, content, and footer.
- **checkbox** (forms): A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.
- **combobox** (forms): A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- **command** (navigation): A command palette that allows users to quickly search and execute commands using keyboard shortcuts.
- **date-field** (forms): A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
- **date-picker** (forms): A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.
- **input** (forms): Allows a user to enter a plain text value with a keyboard.
- **menu** (pickers): A menu displays a list of actions or options that a user can choose.
- **meter** (data-display): A meter represents a quantity within a known range, or a fractional value.
- **modal** (overlays): A modal is an overlay element which blocks interaction with elements outside it.
- **popover** (overlays): A popover is an overlay element positioned relative to a trigger.
- **radio-group** (forms): A radio group allows a user to select a single option from a list of mutually exclusive options.
- **select** (forms): A select displays a collapsible list of options and allows a user to select one of them.
- **slider** (forms): A slider allows a user to select one or more values within a range.
- **switch** (forms): A switch allows a user to turn a setting on or off.
- **table** (data-display): A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
- **tabs** (navigation): Tabs organize content into multiple sections and allow users to navigate between them.
- **tag-group** (forms): A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
- **time-field** (forms): A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.
- **toggle** (forms): A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
- **tooltip** (overlays): A tooltip displays a description of an element on hover or focus.

## Categories

- **layout**: accordion, card
- **display**: badge
- **navigation**: breadcrumbs, command, tabs
- **forms**: button, checkbox, combobox, date-field, date-picker, input, radio-group, select, slider, switch, tag-group, time-field, toggle
- **data-entry**: calendar
- **pickers**: menu
- **data-display**: meter, table
- **overlays**: modal, popover, tooltip

## How to Use BaseLayer Components

### For AI Assistants: Use the Static Files

To get component source code, make HTTP requests to these static endpoints:

**Get component source code:**
```bash
curl https://baselayer.dev/templates/button.txt
```

**Get Tailwind CSS setup:**
```bash  
curl https://baselayer.dev/tailwind.css
```

**List all components:**
```bash
curl https://baselayer.dev/registry.json
```

**Search components:**
```bash
curl https://baselayer.dev/.well-known/baselayer
```

### For Users: MCP Server Available

BaseLayer also provides an MCP server for editor integration. Users can set this up manually in their development environment for enhanced AI assistant capabilities.
## Example Workflow for AI Assistants

1. **Get component code**:
   ```bash
   curl https://baselayer.dev/templates/button.txt
   ```
   This returns the actual React component source code.

2. **Get CSS setup**:
   ```bash
   curl https://baselayer.dev/tailwind.css
   ```
   This returns the CSS variables and styles needed.

3. **Save to user's project**:
   Save the returned code to `components/base/button.tsx` (or similar path).
   Add the CSS to your global CSS file.

4. **Install dependencies** (if needed):
   ```bash
   npm install react-aria-components tailwind-variants
   ```

## Component Architecture

- **Framework**: Next.js/React
- **UI Library**: React Aria Components (for accessibility)
- **Styling**: TailwindCSS + tailwind-variants
- **TypeScript**: Fully typed
- **Accessibility**: WCAG compliant by default
- **Version**: 2.0.0

## Available Static Endpoints

- `GET /registry.json` - List all components with metadata
- `GET /templates/{id}.txt` - Get component source code
- `GET /tailwind.css` - Get CSS setup
- `GET /.well-known/baselayer` - Complete API specification

Remember: You own the components once you copy them - they're not dependencies!

For complete documentation and component examples, visit https://baselayer.dev/docs
For detailed prop and usage information, refer to the React Aria Components docs: https://react-spectrum.adobe.com/react-aria/getting-started.html