Vitre UI Documentation

Overview

Use Vitre CSS when you want semantic HTML to look complete without classes. Add Vitre JS when that semantic HTML needs progressive behavior such as dismissible alerts.

Package	Role	Use it when
`vitre-css`	Classless styling	You want semantic elements, forms, tables, code, dialogs, and alerts styled by default.
`vitre-js`	Optional behavior	You want progressive interactivity for Vitre-compatible semantic component markup.

Install

Install the packages you need from npm.

pnpm add vitre-css vitre-js

Link Vitre CSS before the page renders and import Vitre JS from a static module.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vitre-css/vitre.css">

import "https://cdn.jsdelivr.net/npm/vitre-js/vitre.js";

For static pages without a build step, load the browser files from a CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vitre-css/vitre.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/vitre-js/vitre.js"></script>

Vitre CSS

Vitre CSS styles semantic HTML directly. It targets modern browsers and exposes customization through --vitre-* CSS variables.

Semantic Markup

<main>
  <section>
    <h1>Account settings</h1>
    <p>Manage your profile and notification preferences.</p>

    <form>
      <label>
        Email
        <input type="email" placeholder="you@example.com">
      </label>

      <button>Save changes</button>
    </form>
  </section>
</main>

Theme Tokens

Override variables after importing Vitre CSS.

:root {
  --vitre-hue: 168;
  --vitre-primary: hsl(var(--vitre-hue) 76% 42%);
  --vitre-radius: 0.5rem;
  --vitre-measure: 80ch;
}

Token	Preview	Role
`--vitre-primary`		Links, focus rings, and primary actions
`--vitre-surface`		Panels and elevated surfaces
`--vitre-muted`		Secondary text

Button Variants

Vitre JS

Vitre JS discovers supported semantic component patterns and enhances them in place. Browser script usage applies automatically on page load.

import { Vitre, apply } from "vitre-js";

Vitre.apply();
Vitre.apply(document.querySelector("#dynamic-content"), ["alerts"]);

The first supported behavior is alerts. Alerts use data-kind="alert", optional dismiss, and optional timeout.

Examples

Saved successfully. This alert can be dismissed.

Review this warning. It can be dismissed or time out after twelve seconds.

<div data-kind="alert" data-color="success" role="status" dismiss>
  Saved successfully.
</div>