Intro

What is BaseLayer?

BaseLayer is a component collection built for the shadcn ecosystem. Like shadcn/ui, components are copied into your project and become part of your codebase - not installed as dependencies.

BaseLayer uses React Aria Components and all components have beautiful default styles.

Key Features

  • Own your components - Components live in your codebase, not as a dependency
  • shadcn CLI compatible - Use the familiar npx shadcn add workflow to add components
  • AI Native - Works seamlessly with AI coding assistants via the built-in shadcn MCP server
  • Variant-based design - Powered by TailwindCSS and tailwind-variants for effortless customization
  • Accessible by default - Built on battle-tested React Aria Components

Stack

BaseLayer is built on top of the following technologies:

Design Philosophy

BaseLayer components are designed with intelligent grouping in mind. Many components like Accordion, RadioGroup, and CheckboxGroup include both individual and group functionality within the same component export. This approach provides:

  • Code reuse - Shared styling and behavior between individual and group variants
  • Consistency - Unified design language across single and grouped instances
  • Simplicity - One component to learn instead of separate individual/group components
Next
Usage