---
name: "@baselayer"
slug: "baselayer"
description: "React component library built on React Aria Components (Adobe) and styled with Tailwind CSS + tailwind-variants, delivering ~25 fully accessible primitives: accordion, badge, breadcrumbs, button, calendar, card, checkbox, combobox, command, date-field, date-picker, input, menu, meter, modal, popover, radio-group, select, slider, switch, table, tabs, tag-group, time-field, toggle, and tooltip. Shadcn CLI compatible; components copy directly to your codebase. MIT-licensed, open-source. MCP server support for Cursor/Claude integration. Use for: accessibility-critical products that require React Aria's WCAG-first primitives but prefer a Tailwind utility styling model over Material Design or Radix."
category: "Component library (general)"
tags: ["accessibility", "buttons", "cards", "components", "design-system", "forms", "hooks", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "zwgnr"
website: "https://www.baselayer.dev"
github: "https://github.com/zwgnr/BaseLayer"
registry: "https://www.baselayer.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 203
component_count: 26
generated_at: "2026-07-28T08:00:50.948Z"
---

# @baselayer

React component library built on React Aria Components (Adobe) and styled with Tailwind CSS + tailwind-variants, delivering ~25 fully accessible primitives: accordion, badge, breadcrumbs, button, calendar, card, checkbox, combobox, command, date-field, date-picker, input, menu, meter, modal, popover, radio-group, select, slider, switch, table, tabs, tag-group, time-field, toggle, and tooltip. Shadcn CLI compatible; components copy directly to your codebase. MIT-licensed, open-source. MCP server support for Cursor/Claude integration. Use for: accessibility-critical products that require React Aria's WCAG-first primitives but prefer a Tailwind utility styling model over Material Design or Radix.

## Links

- Website: https://www.baselayer.dev
- GitHub: https://github.com/zwgnr/BaseLayer
- Registry JSON: https://www.baselayer.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/baselayer
- This file: https://sh4dcn.vercel.app/md/baselayer.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.baselayer.dev/r/registry.json
pnpm dlx shadcn@latest add https://www.baselayer.dev/r/registry.json
bunx shadcn@latest add https://www.baselayer.dev/r/registry.json
# clone the source repo
git clone https://github.com/zwgnr/BaseLayer.git
# fetch the raw registry index
curl -s https://www.baselayer.dev/r/registry.json
```

## Components (26)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area. | `npx shadcn@latest add https://www.baselayer.dev/r/accordion.json` |
| badge | registry:ui | A badge is a small label that can be used to display information or status. | `npx shadcn@latest add https://www.baselayer.dev/r/badge.json` |
| breadcrumbs | registry:ui | Breadcrumbs display a heirarchy of links to the current page or resource in an application. | `npx shadcn@latest add https://www.baselayer.dev/r/breadcrumbs.json` |
| button | registry:ui | A button allows a user to perform an action, with mouse, touch, and keyboard interactions. | `npx shadcn@latest add https://www.baselayer.dev/r/button.json` |
| calendar | registry:ui | A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates. | `npx shadcn@latest add https://www.baselayer.dev/r/calendar.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://www.baselayer.dev/r/card.json` |
| checkbox | registry:ui | A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected. | `npx shadcn@latest add https://www.baselayer.dev/r/checkbox.json` |
| combobox | registry:ui | A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query. | `npx shadcn@latest add https://www.baselayer.dev/r/combobox.json` |
| command | registry:ui | A command palette that allows users to quickly search and execute commands using keyboard shortcuts. | `npx shadcn@latest add https://www.baselayer.dev/r/command.json` |
| date-field | registry:ui | 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. | `npx shadcn@latest add https://www.baselayer.dev/r/date-field.json` |
| date-picker | registry:ui | 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. | `npx shadcn@latest add https://www.baselayer.dev/r/date-picker.json` |
| input | registry:ui | Allows a user to enter a plain text value with a keyboard. | `npx shadcn@latest add https://www.baselayer.dev/r/input.json` |
| menu | registry:ui | A menu displays a list of actions or options that a user can choose. | `npx shadcn@latest add https://www.baselayer.dev/r/menu.json` |
| meter | registry:ui | A meter represents a quantity within a known range, or a fractional value. | `npx shadcn@latest add https://www.baselayer.dev/r/meter.json` |
| modal | registry:ui | A modal is an overlay element which blocks interaction with elements outside it. | `npx shadcn@latest add https://www.baselayer.dev/r/modal.json` |
| popover | registry:ui | A popover is an overlay element positioned relative to a trigger. | `npx shadcn@latest add https://www.baselayer.dev/r/popover.json` |
| radio-group | registry:ui | A radio group allows a user to select a single option from a list of mutually exclusive options. | `npx shadcn@latest add https://www.baselayer.dev/r/radio-group.json` |
| select | registry:ui | A select displays a collapsible list of options and allows a user to select one of them. | `npx shadcn@latest add https://www.baselayer.dev/r/select.json` |
| slider | registry:ui | A slider allows a user to select one or more values within a range. | `npx shadcn@latest add https://www.baselayer.dev/r/slider.json` |
| switch | registry:ui | A switch allows a user to turn a setting on or off. | `npx shadcn@latest add https://www.baselayer.dev/r/switch.json` |
| table | registry:ui | 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 an… | `npx shadcn@latest add https://www.baselayer.dev/r/table.json` |
| tabs | registry:ui | Tabs organize content into multiple sections and allow users to navigate between them. | `npx shadcn@latest add https://www.baselayer.dev/r/tabs.json` |
| tag-group | registry:ui | A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal. | `npx shadcn@latest add https://www.baselayer.dev/r/tag-group.json` |
| time-field | registry:ui | 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. | `npx shadcn@latest add https://www.baselayer.dev/r/time-field.json` |
| toggle | registry:ui | A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes. | `npx shadcn@latest add https://www.baselayer.dev/r/toggle.json` |
| tooltip | registry:ui | A tooltip displays a description of an element on hover or focus. | `npx shadcn@latest add https://www.baselayer.dev/r/tooltip.json` |

## For AI agents

```text
You are adding components from @baselayer to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/baselayer.md) for the component list.
2. Fetch the machine-readable index: https://www.baselayer.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: baselayer).
```