Atelier
Brand:

Get started

Atelier Primitives is a hand-rolled React component library. Zero Radix, zero Tailwind, full WAI-ARIA compliance. This page walks through installation, theming, and a first component.

1. Install

npm install atelier-design-system

2. Import the stylesheet

One stylesheet covers all primitives, both brands, and both themes. Import it once at your app entry point.

import "atelier-design-system/style.css";

3. Set the brand and theme

Wrap any element with data-brand and toggle a .dark class to switch themes. Both cascade through the subtree.

<html data-brand="atelier" class="dark">
  {/* components inherit brand + theme */}
</html>

4. Use a component

import { AtelierButton } from "atelier-design-system";

export function Example() {
  return <AtelierButton variant="primary">Save</AtelierButton>;
}

What to read next

  • Foundations — tokens, colors, typography, spacing, motion. Every visual value in the system.
  • Primitives — each component page covers the API, keyboard behavior, and live examples.
  • Patterns — real-world compositions: forms, settings screens, confirmation flows.
  • Guidelines / Accessibility — the a11y expectations every primitive meets.