How-To

Installation

Add Atelier UI to an existing app — package commands for npm, pnpm, and yarn, plus the one-line token import that wires up dark mode and theming.

Each step produces the artifact the next step consumes. No config files, no bundler plugins.

1. Install the package

npm install @atelier-ui/angular

2. Import design tokens

Add the token stylesheet to your global styles file:

src/styles.css Referenced automatically by angular.json under architect.build.options.styles.

@import '@atelier-ui/angular/styles/tokens.css';

CSS Variables

Atelier UI uses CSS custom properties for all design tokens, enabling dynamic theme switching between light and dark mode with zero JavaScript.

3. Import components

Import only the components you need — all are tree-shakeable :

any standalone component .ts file Import into the component where you need it and add to the imports array — standalone, no NgModule registration.

import {
  LlmButton, LlmCard, LlmInput, LlmTextarea,
  LlmCheckbox, LlmToggle, LlmBadge, LlmAlert,
  LlmSelect, LlmOption, LlmDialog, LlmTabGroup,
  LlmTab, LlmAccordionGroup, LlmMenu, LlmMenuItem,
  LlmTooltip, LlmToast, LlmSkeleton, LlmAvatar
} from '@atelier-ui/angular';

Why this list: Toasts are shown via LlmToast on a host element; an injectable LlmToastService triggers them. No Provider tree needed — Angular DI handles it.

any component .tsx file Standard named ES imports — the bundler tree-shakes unused components automatically.

import {
  LlmButton, LlmCard, LlmInput, LlmTextarea,
  LlmCheckbox, LlmToggle, LlmBadge, LlmAlert,
  LlmSelect, LlmOption, LlmDialog, LlmTabGroup,
  LlmTab, LlmAccordionGroup, LlmMenu, LlmMenuItem,
  LlmTooltip, LlmToastProvider, useLlmToast,
  LlmSkeleton, LlmAvatar, LlmAvatarGroup
} from '@atelier-ui/react';

Why this list: Toasts need a root <LlmToastProvider>. Call useLlmToast() inside any descendant component to push messages. LlmAvatarGroup is a React-only composition helper.

any <script setup> block Import inside <script setup> in a .vue SFC, then use the component in the template.

import {
  LlmButton, LlmCard, LlmInput, LlmTextarea,
  LlmCheckbox, LlmToggle, LlmBadge, LlmAlert,
  LlmSelect, LlmOption, LlmDialog, LlmTabGroup,
  LlmTab, LlmAccordionGroup, LlmMenu, LlmMenuItem,
  LlmTooltip, LlmSkeleton, LlmAvatar, LlmAvatarGroup
} from '@atelier-ui/vue';

Why this list: Toasts use the composition API: call useLlmToast() inside <script setup>. No Provider component — a module-scoped store is shared across the app.

What's included

25+ components with identical APIs across Angular, React, and Vue
CSS custom property token system — no runtime dependency
Dark and light mode built in
WCAG AA accessible defaults
LLM-optimized flat APIs — no deep nesting
MCP server for AI-assisted component discovery