Getting started: HTML + CSS
No React: a single valyro-ui/styles.css file, two attributes on <html> and markup with ui-* classes
1. Get the CSS
All of the package's CSS is a single file. Copy it to your static files (or serve it from node_modules with your bundler). It has no @font-face: the vercel theme uses Geist, so also copy fonts/geist.css and fonts/geist-mono.css with the font folders next to them (the stylesheets load the files by relative path), or text falls back to the system font; glass uses system fonts and needs none.
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. Add the styles and theme
data-theme: vercel or glass; data-mode: light or dark. Without these attributes, the --ui-* tokens are undefined.
<!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. What works without JS
Only visual components: Button, ButtonGroup, Badge, Avatar, Separator, Skeleton, Spinner, ProgressBar, Card and its parts, StatsCard without the sparkline, Alert without the close button, EmptyState, Timeline, Breadcrumbs, TextInput, Textarea (without auto-resize). Anything that opens, toggles or measures itself (Checkbox, Switch, RadioGroup, Select, Tabs, Dialog, Tooltip, toasts, DataTable, charts) gets its state from React, so it needs React. The easiest way to get the markup is from renderToStaticMarkup or the docs DOM; snippets are below.
<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>