# Installation

> Package `@umriss-ui/core`, version 0.40.0. Demo page: <https://romanhaendler.github.io/umriss-ui/core/installation/>. Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/core/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/core/llms-full.txt).

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.

```sh
npm install @umriss-ui/core
```

Demo page: https://romanhaendler.github.io/umriss-ui/core/installation/

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](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0021-the-styles-load-themselves-and-touch-nothing-else.md)).

Colours, sizes, fonts and light and dark are tokens, `--u-…` custom properties you override with ordinary CSS: [Theming](https://romanhaendler.github.io/umriss-ui/core/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).

## Examples

### First component

Once installed, import a component and render it – no stylesheet import, no provider.

```tsx
import { Button } from "@umriss-ui/core";

export default function FirstComponent() {
  return <Button variant="primary">Acknowledge the incident</Button>;
}
```

## Keyboard

The keys of [Button](https://romanhaendler.github.io/umriss-ui/core/button/#keyboard-button) apply here.

## Props on this page

From `ButtonProps` — the full table stands on [Button](https://romanhaendler.github.io/umriss-ui/core/button/#type-ButtonProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`variant`](https://romanhaendler.github.io/umriss-ui/core/button/#ButtonProps-variant) | [`ButtonVariant`](https://romanhaendler.github.io/umriss-ui/core/button/#type-ButtonVariant)<br>`"primary" \| "secondary" \| "ghost" \| "plain" \| "danger"` | `"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. |

## Known limits

- No font is loaded or bundled.
- Chrome 123, Firefox 120 and Safari 17.5 or newer; an older browser discards the tokens and shows the components unstyled.

What umriss deliberately does not build, and why: [ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/).