BaseLayer: React Aria Components for Agents via the shadcn MCP Server

What is BaseLayer?

BaseLayer is a component collection built for the shadcn ecosystem. Like shadcn/ui, its components are copied into your project and become part of your codebase, not installed as dependencies. It uses React Aria Components and Tailwind with tailwind-variants.

There is no BaseLayer server to run. The docs say it is AI native through the built-in shadcn MCP server, which treats the BaseLayer registry like any other shadcn registry.

What changes in your agent's output

• The agent installs components from the registry with the shadcn CLI instead of writing buttons and forms from scratch.
• React Aria Components supply the accessibility behavior, so keyboard and screen reader handling is not rewritten per page.
• Components such as Accordion, RadioGroup and CheckboxGroup export both single and grouped versions from one component.
• An llms.txt file lets chat assistants without MCP read the docs by URL.

How the setup works

1. Make sure the project uses React, TypeScript and Tailwind 4 or newer, then initialize shadcn if there is no components.json.
2. Add the @baselayer registry to components.json, or use the full registry URL once.
3. Enable the shadcn MCP server in your client and ask for BaseLayer components by name.

Who BaseLayer is for

Best for

• React and Tailwind apps that want accessible components with the copy-the-source model of shadcn registries.
• Teams comparing sources, such as Plate for editors and the community shadcn/ui server for stock components.
• Builders who also review output with a skill like an improve UI skill.

Not for

• Projects without Tailwind 4 or newer. The usage docs list it as a prerequisite.
• Anyone looking for BaseLayer-specific MCP tools. Everything runs through the generic shadcn server.
• Design-to-code from Figma. This is a component source, not a design reader.

Use it with UiChemy

BaseLayer gives a React front end its components. For a WordPress site, UiChemy builds there: AI to WordPress imports an existing AI build, and Composer edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect BaseLayer: React Aria Components for Agents via the shadcn MCP Server to your AI client

npx shadcn@latest add @baselayer/button

1. Initialize shadcn

   Run npx shadcn@latest init if the project has no components.json. The docs say the CLI also configures itself on first use.

2. Register BaseLayer

   Add the @baselayer entry above to components.json for shorter commands, or add a component by its full registry URL.

3. Add a component

   Run npx shadcn@latest add @baselayer/button. The CLI handles installation, dependencies and file placement.

4. Enable the shadcn MCP server

   Use your client's shadcn MCP setup, which runs npx shadcn@latest mcp. Then ask for BaseLayer components. The docs suggest a rule telling the agent to prefer BaseLayer over stock shadcn/ui.

Client configuration

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

Endpoints and ports

What you can do with it

• Own the sourceComponents are copied into your codebase and become yours to edit, with no dependency to keep updated.
• React Aria foundationAccessible primitives from React Aria Components sit under every component.
• Variant-based stylingTailwind and tailwind-variants give typed variants for customization.
• Works with the shadcn CLIThe usual add command and registry mechanism apply, including a shorter registry name.
• Grouped componentsAccordion, RadioGroup and CheckboxGroup bundle individual and group behavior in one export.
• Plain-text docs for chat toolsAn llms.txt and an Open in AI button serve assistants that cannot use MCP.

Tools it exposes

Frequently asked questions