DocumentationComponents

Installation

Get started with Atelier UI in your Angular or React project.

Angular

Angular

Install the Angular component library from npm:

npm install @atelier-ui/angular

Import the components you need:

importimport {
  LlmButton, LlmCard, LlmCardHeader, LlmCardContent, LlmCardFooter,
  LlmInput, LlmTextarea, LlmCheckbox, LlmToggle,
  LlmBadge, LlmAlert, LlmSelect, LlmOption,
  LlmDialog, LlmDialogHeader, LlmDialogContent, LlmDialogFooter,
  LlmTabGroup, LlmTab, LlmAccordionGroup, LlmAccordionItem,
  LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger,
  LlmTooltip, LlmToast, LlmToastContainer, LlmToastService,
  LlmSkeleton, LlmAvatar, LlmAvatarGroup
} from '@atelier-ui/angular';

Import the design tokens in your global styles:

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

React

Install the React component library from npm:

npm install @atelier-ui/react

Import the components you need:

importimport {
  LlmButton, LlmCard, LlmCardHeader, LlmCardContent, LlmCardFooter,
  LlmInput, LlmTextarea, LlmCheckbox, LlmToggle,
  LlmBadge, LlmAlert, LlmSelect, LlmOption,
  LlmDialog, LlmDialogHeader, LlmDialogContent, LlmDialogFooter,
  LlmTabGroup, LlmTab, LlmAccordionGroup, LlmAccordionItem,
  LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger,
  LlmTooltip, LlmSkeleton, LlmAvatar, LlmAvatarGroup,
  LlmProgress, LlmBreadcrumbs, LlmBreadcrumbItem, LlmPagination,
  LlmDrawer, LlmDrawerHeader, LlmDrawerContent, LlmDrawerFooter,
  LlmToastProvider, LlmToastContainer, LlmToast, useLlmToast
} from '@atelier-ui/react';

Import the design tokens in your global styles:

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

Wrap your app root with LlmToastProvider to enable toasts:

<LlmToastProvider>
  <App/>
  <LlmToastContainer position="bottom-right"/>
</LlmToastProvider>
Vue

VueComing Soon

A Vue 3 port of Atelier UI is on the roadmap. Follow the project for updates.