Начало работы: HTML + CSS

Без React: один файл valyro-ui/styles.css, два атрибута на <html> и разметка с классами ui-*

1. Возьмите CSS

Весь CSS пакета — один файл. Скопируйте его к своим статическим файлам (или отдайте из node_modules сборщиком). В нём нет @font-face: тема vercel использует Geist, поэтому скопируйте ещё fonts/geist.css и fonts/geist-mono.css вместе с папками шрифтов рядом (стили грузят файлы по относительному пути), иначе текст будет системным шрифтом; glass использует системные шрифты, ей файлы не нужны.

npm install valyro-ui
cp node_modules/valyro-ui/styles.css public/valyro-ui.css
# the vercel theme: Geist
mkdir -p public/fonts
cp -r node_modules/valyro-ui/fonts/geist.css node_modules/valyro-ui/fonts/geist node_modules/valyro-ui/fonts/geist-mono.css node_modules/valyro-ui/fonts/geist-mono public/fonts/

2. Подключите стили и тему

data-theme: vercel или glass; data-mode: light или dark. Без этих атрибутов токены --ui-* не определены.

<!doctype html>
<html lang="en" data-theme="glass" data-mode="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="valyro-ui.css" />
    <!-- the vercel theme: Geist (browsers download the files only when the text uses them) -->
    <link rel="stylesheet" href="fonts/geist.css" />
    <link rel="stylesheet" href="fonts/geist-mono.css" />
  </head>
  <body>
    <!-- markup from the next step -->
  </body>
</html>

3. Что работает без JS

Только визуальные компоненты: Button, ButtonGroup, Badge, Avatar, Separator, Skeleton, Spinner, ProgressBar, Card и его части, StatsCard без спарклайна, Alert без кнопки закрытия, EmptyState, Timeline, Breadcrumbs, TextInput, Textarea (без авто-высоты). Всё, что открывается, переключается или считает размеры (Checkbox, Switch, RadioGroup, Select, Tabs, Dialog, Tooltip, тосты, DataTable, графики), берёт состояние из React — для них нужен React. Разметку проще всего получить из renderToStaticMarkup или из DOM документации; ниже — её фрагменты.

<button class="ui-button" data-variant="primary" data-size="md" type="button"><span class="ui-button__label">Deploy</span></button>

<span class="ui-badge" data-color="green" data-variant="subtle" data-size="md"><span class="ui-badge__label">Ready</span></span>

<div class="ui-card ui-panel" data-variant="default" data-padding="md"><div class="ui-card__header"><h3 class="ui-card__title">Project</h3><p class="ui-card__description">Production deployment</p></div><div class="ui-card__content">Body</div><div class="ui-card__footer"><button class="ui-button" data-variant="secondary" data-size="md" type="button"><span class="ui-button__label">Open</span></button></div></div>

<div class="ui-progress" data-size="md" data-color="accent"><div class="ui-progress__header"><span id="upload-label" class="ui-progress__label">Uploading</span><span class="ui-progress__value" aria-hidden="true">60%</span></div><div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" aria-valuetext="60%" aria-labelledby="upload-label" class="ui-progress__track"><div class="ui-progress__fill" style="width:60%"></div></div></div>

<div class="ui-field ui-text-input" data-size="md"><input placeholder="Email" aria-label="Email" type="text" class="ui-field__input ui-text-input__input"/></div>

<span role="img" aria-label="Ada Lovelace" class="ui-avatar" data-size="md" data-shape="circle" data-hue="amber"><span class="ui-avatar__fallback" aria-hidden="true">AL</span></span>

Другие фреймворки