@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.
Install this registry
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 curl -s https://www.baselayer.dev/r/registry.json Components
26 totalAn 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 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 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 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 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 Displays a card with header, content, and footer.
npx shadcn@latest add https://www.baselayer.dev/r/card.json 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 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 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 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 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 Allows a user to enter a plain text value with a keyboard.
npx shadcn@latest add https://www.baselayer.dev/r/input.json 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 A meter represents a quantity within a known range, or a fractional value.
npx shadcn@latest add https://www.baselayer.dev/r/meter.json A modal is an overlay element which blocks interaction with elements outside it.
npx shadcn@latest add https://www.baselayer.dev/r/modal.json A popover is an overlay element positioned relative to a trigger.
npx shadcn@latest add https://www.baselayer.dev/r/popover.json 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 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 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 A switch allows a user to turn a setting on or off.
npx shadcn@latest add https://www.baselayer.dev/r/switch.json 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 organize content into multiple sections and allow users to navigate between them.
npx shadcn@latest add https://www.baselayer.dev/r/tabs.json 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 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 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 A tooltip displays a description of an element on hover or focus.
npx shadcn@latest add https://www.baselayer.dev/r/tooltip.json