# UmrissProvider
> Package `@umriss-ui/core`, version 0.40.0. Demo page: . 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).
Sets once, at the root, what an application shares: the density of its tables, where overlays open, how long toasts stay and where they stand, and the language. It is optional; every component works the same without it.
```ts
import { UmrissProvider } from "@umriss-ui/core";
```
Demo page: https://romanhaendler.github.io/umriss-ui/core/umrissprovider/
It holds these four settings and nothing else: no theme (see [Installation](https://romanhaendler.github.io/umriss-ui/core/installation/)) and no defaults for a component's own props. It writes nothing onto the document.
Keep the objects you pass outside the component or memoised: a new object on every render is a new setting on every render.
## Examples
### At the root
Wrap the application once; here `toast` keeps every toast on screen for eight seconds unless the toast names its own duration.
```tsx
import { Button, ToastProvider, UmrissProvider, useToast, type ToastConfig } from "@umriss-ui/core";
type ToastFn = ReturnType["toast"];
const deploy = (toast: ToastFn) => toast({ title: "Checkout 4.12.0 deployed", description: "Rolled out to all regions.", tone: "success" });
function DeployButton() {
const { toast } = useToast();
return (
);
}
/* Kept outside the component: a new object on every render would be a new
setting on every render. */
const TOAST: ToastConfig = { duration: 8000 };
export default function AtTheRoot() {
return (
);
}
```
### Open overlays inside a full-screen panel
A full-screen element hides everything outside it, overlays included; point `portalTarget` at the element so menus and tooltips open inside it.
```tsx
import { useRef } from "react";
import { Button, Card, CardBody, CardHeader, Menu, MenuItem, Text, UmrissProvider } from "@umriss-ui/core";
export default function PortalTarget() {
const panel = useRef(null);
return (
{/* A function, because the element exists only after the first render. */}
panel.current}>
}
/>
Checkout flow redesign · Chloe Durand · 5 points
);
}
```
### Set up an application
All four settings, as a root sets them: German wording and notation, compact tables, overlays in the application's element, short toasts.
```tsx
import { useRef, useState } from "react";
import { Button, DatePicker, FormField, Stack, ToastProvider, UmrissProvider, useToast } from "@umriss-ui/core";
import type { ToastConfig, UmrissProviderProps } from "@umriss-ui/core";
import { GERMAN_FORMATS, GERMAN_WORDING } from "@umriss-ui/core/wording/de";
const LANGUAGE: UmrissProviderProps["language"] = { wording: GERMAN_WORDING, formats: GERMAN_FORMATS };
const TOAST: ToastConfig = { duration: 3000 };
type ToastFn = ReturnType["toast"];
const rebook = (toast: ToastFn) => toast({ title: "Shipment SH-1042 rebooked" });
function DeliveryDate() {
const { toast } = useToast();
const rebookNow = () => rebook(toast);
const [date, setDate] = useState(new Date(2026, 2, 18));
return (
);
}
export default function EverythingAtOnce() {
const root = useRef(null);
return (
root.current} toast={TOAST} language={LANGUAGE}>
);
}
```
## When to use something else
- Only the wording or the formats of one section differ → Language
## Keyboard
The keys of [Button](https://romanhaendler.github.io/umriss-ui/core/button/#keyboard-button), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/#keyboard-menu) and [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/#keyboard-datepicker) apply here.
## Accessibility
Where a `ToastProvider` stands inside it, the toasts' two live regions stand where the overlays go: in the `portalTarget` before the first message, so that it is heard there, and inside the topmost modal dialog while one is open. [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/) describes them.
## API
### `UmrissProviderProps`
| Prop | Type | Default | Description |
|---|---|---|---|
| `density` | [`Density`](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#type-Density) `"comfortable" \| "compact"` | none - a component keeps its own density | The default for the `density` of every component that reads it with `useDensityFor` - in `@umriss-ui/table` `Table`, in `@umriss-ui/calculation` `Calculation` ("comfortable" means "regular"). Shown in: [Set up an application](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#everything-at-once) |
| `portalTarget` | [`PortalTarget`](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#type-PortalTarget) | `null` | Where overlays portal to, unless an open dialog takes them. A function is evaluated on every opening - a target that only enters the tree later cannot be given otherwise; `null` means "as before". The callers' own rules take precedence: the popover seam portals into the nearest `