Начало работы

Установка


pnpm add @atlantum/react @atlantum/core @atlantum/utils

@atlantum/icons устанавливается дополнительно, если компонентам нужны иконки из реестра:


pnpm add @atlantum/icons

Подключение

Подключите базовые стили токенов


import "@atlantum/core/primitives.css";
import "@atlantum/core/foundation.css";

Оберните приложение в `AtlantumUIProvider`


import { AtlantumUIProvider } from "@atlantum/utils";
 
export function App({ children }) {
  return <AtlantumUIProvider theme="light">{children}</AtlantumUIProvider>;
}

theme принимает "light" или "dark" и проставляет атрибут data-theme на корневой контейнер — подробнее в разделе Темизация.

Используйте компоненты


import { Button } from "@atlantum/react";
 
<Button text="Продолжить" appearance="primary" />;

Тема из Create

Соберите пресет на странице Create, затем примените его в проекте:


pnpm dlx @atlantum/cli apply --preset <code>

Команда запишет atlantum.theme.css. Подключите файл после базовых стилей:


import "@atlantum/core/primitives.css";
import "@atlantum/core/foundation.css";
import "@atlantum/core/themes/dark.css";
import "./atlantum.theme.css";