Getting started and including UI into your application
ui-* packages move to @prepared911/ui. Follow Migrating to @prepared911/ui (including the full @prepared911/ui-calendar parity table). Form-specific notes and the same calendar table live in migrating-from-ui-forms.
Install @prepared911/ui and load its styles once at the app root.
pnpm add @prepared911/ui
Import the aggregate stylesheet once at the app root. It inlines tokens and reset and ships every component and block rule in dependency order.
@prepared911/ui/appearance-transition.css separately.
Tokens are CSS custom properties. Light values are declared on :where(:root). Dark values are declared under [data-theme='dark'].
Appearance is the data-theme attribute on the document element. There is no theme provider and no brand class on the document.
createAppearancePreference applies light, dark, or the operating system setting. The first application, when the preference is created, does not animate. Later changes animate. Persisting the choice is the app's job. Call dispose() when the owner of the preference goes away.
themeRegionProps from @prepared911/ui. A theme region does not restyle popups portaled outside that subtree.
Import each component from its subpath.
Button is always a <button>. Navigation is Link from @prepared911/ui/link.