What an application does once before its first component: install the package, choose the fonts and let light and dark follow the page. The styles load themselves, and no provider is needed.
npm install @umriss-ui/core
The command installs the package alone: React 19 or newer is its only peer and stays the application's own. Importing a component brings its stylesheet along; @umriss-ui/core/styles.css stays exported for setups that link stylesheets by hand. The styles touch nothing outside the components: no rule on html, body or * (ADR-0021).
Colours, sizes, fonts and light and dark are tokens, --u-… custom properties you override with ordinary CSS: Theming lists them. The fonts are the application's: the tokens name Geist first and fall back to the system fonts, and nothing is loaded. For Geist, install @fontsource/geist-sans (400, 500, 600) and @fontsource/geist-mono (400).
Once installed, import a component and render it – no stylesheet import, no provider.
import { Button } from "@umriss-ui/core";
export default function FirstComponent() {
return <Button variant="primary">Acknowledge the incident</Button>;
}
The keys of Button apply here.
From ButtonProps — the full table stands on Button.
| Name | Type | Default | Description |
|---|---|---|---|
variant | ButtonVariant| "primary" | "secondary" | How loud the button is. primary exactly once per surface - two main
actions side by side are no longer a main action. ghost is quiet in the
accent, plain quiet and neutral. |
What umriss deliberately does not build, and why: ADR-0032.