# usva. > An authored React design system: beauty that stays usable. Dual-distributed as an npm > package (usva) and as a shadcn-compatible registry you can copy the source from. > 79 components, 3 themes. ## Install - Registry: npx shadcn add https://usva.build/r/button.json - Tokens: bun add usva-tokens - Package: usva is not on npm yet. Use the registry; bun add usva fails today. ## The one rule Intensity is a property of the layer, not of the item. Core primitives recede. Patterns structure. Motion guides. Sula asserts. Atmospheres are the room. At most one sula element per region, where a region is a bounded area competing for a single attention focus. Never put a sula element inside dense, task-bound UI. ## Colour 24 semantic role tokens, never a raw hex. `ink` and `muted` clear 4.5:1 on every surface role and carry information. `faint` is decorative and must never be the only thing carrying meaning. Full table: https://usva.build/design-language/color ## Themes - kajo: https://usva.build/themes/kajo - sisu: https://usva.build/themes/sisu - savi: https://usva.build/themes/savi ## core · primitives (36) · intensity: recedes - [announcement (Announcement)](https://usva.build/docs/components/announcement): a one-line notice above the fold, for a release or a warning you cannot bury. registry: `npx shadcn add https://usva.build/r/announcement.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [avatar (Avatar)](https://usva.build/docs/components/avatar): a person, as an image or their initials. groups into a cluster with a +N chip. registry: `npx shadcn add https://usva.build/r/avatar.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [avatar-group (AvatarGroup)](https://usva.build/docs/components/avatar-group): ships with Avatar. layer: core · primitives. intensity: recedes. - [badge (Badge)](https://usva.build/docs/components/badge): the status of the thing it sits on. it labels, it never clicks. registry: `npx shadcn add https://usva.build/r/badge.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [button (Button)](https://usva.build/docs/components/button): the one thing you want pressed, with a loading, success and error state built in. registry: `npx shadcn add https://usva.build/r/button.json`. layer: core · primitives. intensity: recedes. from personal-website, sisu-plus. - [callout (Callout)](https://usva.build/docs/components/callout): a note that stays put. a toast leaves on its own, this one waits to be read. registry: `npx shadcn add https://usva.build/r/callout.json`. layer: core · primitives. intensity: recedes. authored in usva. - [card (Card)](https://usva.build/docs/components/card): a surface that groups things. four skins, from elevated to a bare outline. registry: `npx shadcn add https://usva.build/r/card.json`. layer: core · primitives. intensity: recedes. from personal-website, sisu-plus. - [glow-card (GlowCard)](https://usva.build/docs/components/glow-card): ships with Card. layer: core · primitives. intensity: recedes. - [checkbox (Checkbox)](https://usva.build/docs/components/checkbox): an independent yes or no. use it when the options do not exclude each other. registry: `npx shadcn add https://usva.build/r/checkbox.json`. layer: core · primitives. intensity: recedes. authored in usva. - [chip (Chip)](https://usva.build/docs/components/chip): a tag. a keyword, a filter, a stack entry. removable when it is a filter. registry: `npx shadcn add https://usva.build/r/chip.json`. layer: core · primitives. intensity: recedes. from personal-website. - [code-snippet (CodeSnippet)](https://usva.build/docs/components/code-snippet): a highlighted code block with the copy button already there. registry: `npx shadcn add https://usva.build/r/code-snippet.json`. layer: core · primitives. intensity: recedes. authored in usva. - [color-field (ColorField)](https://usva.build/docs/components/color-field): picks a colour and shows you the value. the swatch is the control, not a decoration. registry: `npx shadcn add https://usva.build/r/color-field.json`. layer: core · primitives. intensity: recedes. authored in usva. - [dialog (Dialog)](https://usva.build/docs/components/dialog): interrupts, on purpose. focus trapped, scroll locked, escape closes. registry: `npx shadcn add https://usva.build/r/dialog.json`. layer: core · primitives. intensity: recedes. authored in usva. - [drawer (Drawer)](https://usva.build/docs/components/drawer): a dialog that slides in from an edge. use bottom on mobile, side for a detail panel. registry: `npx shadcn add https://usva.build/r/drawer.json`. layer: core · primitives. intensity: recedes. from personal-website, sisu-plus. - [dropdown-menu (DropdownMenu)](https://usva.build/docs/components/dropdown-menu): a list of actions, anchored to what triggered them. actions, not navigation. registry: `npx shadcn add https://usva.build/r/dropdown-menu.json`. layer: core · primitives. intensity: recedes. authored in usva. - [hint-popover (HintPopover)](https://usva.build/docs/components/hint-popover): the explanation a tooltip cannot hold, because this one has a button in it. registry: `npx shadcn add https://usva.build/r/hint-popover.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [input (Input)](https://usva.build/docs/components/input): one line of text. it owns its own focus ring and its error state. registry: `npx shadcn add https://usva.build/r/input.json`. layer: core · primitives. intensity: recedes. authored in usva. - [knob (Knob)](https://usva.build/docs/components/knob): a value you turn to rather than slide to. the thumb lies flat in the ring until you take hold of it. registry: `npx shadcn add https://usva.build/r/knob.json`. layer: core · primitives. intensity: recedes. authored in usva. - [label (Label)](https://usva.build/docs/components/label): names a control and clicks through to it. never decorate a heading with it. registry: `npx shadcn add https://usva.build/r/label.json`. layer: core · primitives. intensity: recedes. authored in usva. - [list (List)](https://usva.build/docs/components/list): an ordered or unordered list that a screen reader counts. dividers and markers optional. registry: `npx shadcn add https://usva.build/r/list.json`. layer: core · primitives. intensity: recedes. authored in usva. - [loading-overlay (LoadingOverlay)](https://usva.build/docs/components/loading-overlay): covers the region that is busy, and only that region. scroll lock is refcounted. registry: `npx shadcn add https://usva.build/r/loading-overlay.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [log-line (LogLine)](https://usva.build/docs/components/log-line): one machine event: a severity rail, a level, a source, and the detail if you want it. registry: `npx shadcn add https://usva.build/r/log-line.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [notification-badge (NotificationBadge)](https://usva.build/docs/components/notification-badge): an unread count pinned to whatever it overlays. it wraps, it does not replace. registry: `npx shadcn add https://usva.build/r/notification-badge.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [popover (Popover)](https://usva.build/docs/components/popover): rich content anchored to a trigger, and it can be interacted with. registry: `npx shadcn add https://usva.build/r/popover.json`. layer: core · primitives. intensity: recedes. authored in usva. - [progress (Progress)](https://usva.build/docs/components/progress): how far along a determinate task is. if you cannot say, use a spinner instead. registry: `npx shadcn add https://usva.build/r/progress.json`. layer: core · primitives. intensity: recedes. authored in usva. - [radio (Radio)](https://usva.build/docs/components/radio): exactly one of a few. more than about five and you want a select. registry: `npx shadcn add https://usva.build/r/radio.json`. layer: core · primitives. intensity: recedes. authored in usva. - [radio-group (RadioGroup)](https://usva.build/docs/components/radio-group): ships with Radio. layer: core · primitives. intensity: recedes. - [select (Select)](https://usva.build/docs/components/select): one value out of many, when the list is too long to lay out flat. registry: `npx shadcn add https://usva.build/r/select.json`. layer: core · primitives. intensity: recedes. authored in usva. - [skeleton (Skeleton)](https://usva.build/docs/components/skeleton): the shape of the content before it arrives. SkeletonMirror infers it from any children. registry: `npx shadcn add https://usva.build/r/skeleton.json`. layer: core · primitives. intensity: recedes. authored in usva. - [skeleton-group (SkeletonGroup)](https://usva.build/docs/components/skeleton-group): ships with Skeleton. layer: core · primitives. intensity: recedes. - [skeleton-mirror (SkeletonMirror)](https://usva.build/docs/components/skeleton-mirror): ships with Skeleton. layer: core · primitives. intensity: recedes. - [slider (Slider)](https://usva.build/docs/components/slider): a value on a continuum, where the trend matters more than the exact number. registry: `npx shadcn add https://usva.build/r/slider.json`. layer: core · primitives. intensity: recedes. authored in usva. - [spinner (Spinner)](https://usva.build/docs/components/spinner): an indeterminate wait, inline and small. the plain one, for buttons and dense UI. registry: `npx shadcn add https://usva.build/r/spinner.json`. layer: core · primitives. intensity: recedes. authored in usva. - [page-loader (PageLoader)](https://usva.build/docs/components/page-loader): ships with Spinner. layer: core · primitives. intensity: recedes. - [stat-chip (StatChip)](https://usva.build/docs/components/stat-chip): one number in a pill: a credit balance, a quota, a count you keep glancing at. registry: `npx shadcn add https://usva.build/r/stat-chip.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [switch (Switch)](https://usva.build/docs/components/switch): a setting that takes effect immediately. no save button follows it. registry: `npx shadcn add https://usva.build/r/switch.json`. layer: core · primitives. intensity: recedes. authored in usva. - [tabs (Tabs)](https://usva.build/docs/components/tabs): peer views in one region. not steps, and never a way to hide required fields. registry: `npx shadcn add https://usva.build/r/tabs.json`. layer: core · primitives. intensity: recedes. authored in usva. - [terminal (Terminal)](https://usva.build/docs/components/terminal): a shell command in a row, prompt and copy button included. registry: `npx shadcn add https://usva.build/r/terminal.json`. layer: core · primitives. intensity: recedes. authored in usva. - [textarea (Textarea)](https://usva.build/docs/components/textarea): text that runs past one line. it can grow with what you type, up to a ceiling you set. registry: `npx shadcn add https://usva.build/r/textarea.json`. layer: core · primitives. intensity: recedes. authored in usva. - [toast (Toast)](https://usva.build/docs/components/toast): the result of something you just did. fired imperatively, from anywhere. registry: `npx shadcn add https://usva.build/r/toast.json`. layer: core · primitives. intensity: recedes. from sisu-plus. - [toaster (Toaster)](https://usva.build/docs/components/toaster): ships with Toast. layer: core · primitives. intensity: recedes. - [toggle-chip (ToggleChip)](https://usva.build/docs/components/toggle-chip): a chip that stays pressed. a filter you turn on, not a tag you read. registry: `npx shadcn add https://usva.build/r/toggle-chip.json`. layer: core · primitives. intensity: recedes. authored in usva. - [tooltip (Tooltip)](https://usva.build/docs/components/tooltip): names an unlabelled control. it holds no action and it is never the only copy of the truth. registry: `npx shadcn add https://usva.build/r/tooltip.json`. layer: core · primitives. intensity: recedes. authored in usva. ## core · patterns (27) · intensity: structures - [bento-grid (BentoGrid)](https://usva.build/docs/components/bento-grid): cells of different weights in one grid, for a page that has to say several things at once. registry: `npx shadcn add https://usva.build/r/bento-grid.json`. layer: core · patterns. intensity: structures. from personal-website. - [bento-card (BentoCard)](https://usva.build/docs/components/bento-card): ships with BentoGrid. layer: core · patterns. intensity: structures. - [bento-info (BentoInfo)](https://usva.build/docs/components/bento-info): ships with BentoGrid. layer: core · patterns. intensity: structures. - [bento-metric (BentoMetric)](https://usva.build/docs/components/bento-metric): ships with BentoGrid. layer: core · patterns. intensity: structures. - [bento-text (BentoText)](https://usva.build/docs/components/bento-text): ships with BentoGrid. layer: core · patterns. intensity: structures. - [case-study-hero (CaseStudyHero)](https://usva.build/docs/components/case-study-hero): opens a piece of work: the title, the accent, the metadata, the link out. registry: `npx shadcn add https://usva.build/r/case-study-hero.json`. layer: core · patterns. intensity: structures. from personal-website. - [checklist-card (ChecklistCard)](https://usva.build/docs/components/checklist-card): a card whose body is a real list, so the reader gets the count and the order. registry: `npx shadcn add https://usva.build/r/checklist-card.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [cta-banner (CtaBanner)](https://usva.build/docs/components/cta-banner): the ask, at the end of a page. everything below the title is optional. registry: `npx shadcn add https://usva.build/r/cta-banner.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [dashboard-grid (DashboardGrid)](https://usva.build/docs/components/dashboard-grid): widgets the user drags and resizes into their own layout, keyboard included. registry: `npx shadcn add https://usva.build/r/dashboard-grid.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [disclosure-row (DisclosureRow)](https://usva.build/docs/components/disclosure-row): a row that opens. the chevron and the expanded state, without the progress bar. registry: `npx shadcn add https://usva.build/r/disclosure-row.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [empty-state (EmptyState)](https://usva.build/docs/components/empty-state): nothing here yet, and here is the one thing to do about it. registry: `npx shadcn add https://usva.build/r/empty-state.json`. layer: core · patterns. intensity: structures. authored in usva. - [entity-card (EntityCard)](https://usva.build/docs/components/entity-card): a thing with a name, a picture, some metadata and actions. stack, row or showcase. registry: `npx shadcn add https://usva.build/r/entity-card.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [feature-carousel (FeatureCarousel)](https://usva.build/docs/components/feature-carousel): features one at a time, advancing on their own, pausing when you look closer. registry: `npx shadcn add https://usva.build/r/feature-carousel.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [field-group (FieldGroup)](https://usva.build/docs/components/field-group): the label, control, description and error of one field, wired together correctly. registry: `npx shadcn add https://usva.build/r/field-group.json`. layer: core · patterns. intensity: structures. authored in usva. - [footer (Footer)](https://usva.build/docs/components/footer): the bottom of the site: columns when there is a lot, one row when there is not. registry: `npx shadcn add https://usva.build/r/footer.json`. layer: core · patterns. intensity: structures. from personal-website, sisu-plus. - [hero-split (HeroSplit)](https://usva.build/docs/components/hero-split): copy on one side, the proof on the other. both sized off the container, not the window. registry: `npx shadcn add https://usva.build/r/hero-split.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [mockup-showcase (MockupShowcase)](https://usva.build/docs/components/mockup-showcase): a browser or device frame around your media. the media is a slot, so bring your own. registry: `npx shadcn add https://usva.build/r/mockup-showcase.json`. layer: core · patterns. intensity: structures. from personal-website. - [page-header (PageHeader)](https://usva.build/docs/components/page-header): the top of a screen: title, description, actions, and the stats worth reading first. registry: `npx shadcn add https://usva.build/r/page-header.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [panel (Panel)](https://usva.build/docs/components/panel): a titled region with its own actions and its own loading state. the dashboard workhorse. registry: `npx shadcn add https://usva.build/r/panel.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [progress-row (ProgressRow)](https://usva.build/docs/components/progress-row): a label, a count and a bar, as one row in a list of many. registry: `npx shadcn add https://usva.build/r/progress-row.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [pullquote (Pullquote)](https://usva.build/docs/components/pullquote): one sentence, pulled out and made large, with an ornament slot beside it. registry: `npx shadcn add https://usva.build/r/pullquote.json`. layer: core · patterns. intensity: structures. from personal-website. - [roadmap-timeline (RoadmapTimeline)](https://usva.build/docs/components/roadmap-timeline): what shipped, what is in flight, what is planned, on one connected track. registry: `npx shadcn add https://usva.build/r/roadmap-timeline.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [section-heading (SectionHeading)](https://usva.build/docs/components/section-heading): a mono eyebrow over a display title. the loud way to start a section. registry: `npx shadcn add https://usva.build/r/section-heading.json`. layer: core · patterns. intensity: structures. from personal-website. - [section-label (SectionLabel)](https://usva.build/docs/components/section-label): a numbered index, a title and a lede. the quiet way to start a section. registry: `npx shadcn add https://usva.build/r/section-label.json`. layer: core · patterns. intensity: structures. from personal-website. - [segmented-control (SegmentedControl)](https://usva.build/docs/components/segmented-control): a few exclusive options, all visible at once. the plain one, for dense UI. registry: `npx shadcn add https://usva.build/r/segmented-control.json`. layer: core · patterns. intensity: structures. authored in usva. - [stat-bento (StatBento)](https://usva.build/docs/components/stat-bento): the numbers you lead with, at display scale, counting up as they arrive. registry: `npx shadcn add https://usva.build/r/stat-bento.json`. layer: core · patterns. intensity: structures. from personal-website. - [stat-card (StatCard)](https://usva.build/docs/components/stat-card): one metric, its trend and a note on why it moved. registry: `npx shadcn add https://usva.build/r/stat-card.json`. layer: core · patterns. intensity: structures. from personal-website. - [step-chips (StepChips)](https://usva.build/docs/components/step-chips): three or four steps in a row, with the arrows inside the list where they belong. registry: `npx shadcn add https://usva.build/r/step-chips.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [step-list (StepList)](https://usva.build/docs/components/step-list): an ordered procedure, one step per row, each with room for an icon. registry: `npx shadcn add https://usva.build/r/step-list.json`. layer: core · patterns. intensity: structures. from personal-website. - [stripe-card (StripeCard)](https://usva.build/docs/components/stripe-card): a card keyed by colour, so a long list of them sorts by eye. the stripe is data. registry: `npx shadcn add https://usva.build/r/stripe-card.json`. layer: core · patterns. intensity: structures. from sisu-plus. - [toolbar (Toolbar)](https://usva.build/docs/components/toolbar): the controls above a view: filters, counts, a legend, the actions on the right. registry: `npx shadcn add https://usva.build/r/toolbar.json`. layer: core · patterns. intensity: structures. from sisu-plus. ## core · motion (2) · intensity: guides - [reveal (Reveal)](https://usva.build/docs/components/reveal): scroll reveals that resolve out of mist as they come into view, with a stagger group for cascading children. registry: `npx shadcn add https://usva.build/r/reveal.json`. layer: core · motion. intensity: guides. from personal-website. - [reveal-group (RevealGroup)](https://usva.build/docs/components/reveal-group): ships with Reveal. layer: core · motion. intensity: guides. - [page-transition (PageTransition)](https://usva.build/docs/components/page-transition): a route-level fade and lift, keyed on any routeKey. registry: `npx shadcn add https://usva.build/r/page-transition.json`. layer: core · motion. intensity: guides. from personal-website. ## sula (6) · intensity: asserts - [sula-nav (SulaNav)](https://usva.build/docs/components/sula-nav): a navigation bar whose parts merge and pinch apart as you move between views. registry: `npx shadcn add https://usva.build/r/sula-nav.json`. layer: sula. intensity: asserts. authored in usva. ! one sula element per region. a region is a bounded area competing for a single attention focus, so two liquid fields in the same one fight and read as noise. ! different regions are fine. a frame at the viewport edge is ambient and at the boundary; a nav at the top is a focal control surface. they do not compete, and they ship together. ! keep it out of dense, task-bound UI. not a table, not a form, not a dashboard someone is working in. ! prefers-reduced-motion drops it to a static equivalent. the field is decoration over a UI that already works. - [sula-segmented (SulaSegmented)](https://usva.build/docs/components/sula-segmented): a segmented control that pinches a droplet off the old segment and merges it into the new one. registry: `npx shadcn add https://usva.build/r/sula-segmented.json`. layer: sula. intensity: asserts. authored in usva. ! one sula element per region. a region is a bounded area competing for a single attention focus, so two liquid fields in the same one fight and read as noise. ! different regions are fine. a frame at the viewport edge is ambient and at the boundary; a nav at the top is a focal control surface. they do not compete, and they ship together. ! keep it out of dense, task-bound UI. not a table, not a form, not a dashboard someone is working in. ! prefers-reduced-motion drops it to a static equivalent. the field is decoration over a UI that already works. ! this is the brand-surface segmented control. for dense UI, reach for the plain SegmentedControl. - [sula-fab (SulaFab)](https://usva.build/docs/components/sula-fab): a floating action button whose actions emerge as liquid beads and pinch back on close. registry: `npx shadcn add https://usva.build/r/sula-fab.json`. layer: sula. intensity: asserts. authored in usva. ! one sula element per region. a region is a bounded area competing for a single attention focus, so two liquid fields in the same one fight and read as noise. ! different regions are fine. a frame at the viewport edge is ambient and at the boundary; a nav at the top is a focal control surface. they do not compete, and they ship together. ! keep it out of dense, task-bound UI. not a table, not a form, not a dashboard someone is working in. ! prefers-reduced-motion drops it to a static equivalent. the field is decoration over a UI that already works. - [sula-loader (SulaLoader)](https://usva.build/docs/components/sula-loader): a metaball spinner for a wait you want felt. it loops only while it is mounted. registry: `npx shadcn add https://usva.build/r/sula-loader.json`. layer: sula. intensity: asserts. authored in usva. ! one sula element per region. a region is a bounded area competing for a single attention focus, so two liquid fields in the same one fight and read as noise. ! different regions are fine. a frame at the viewport edge is ambient and at the boundary; a nav at the top is a focal control surface. they do not compete, and they ship together. ! keep it out of dense, task-bound UI. not a table, not a form, not a dashboard someone is working in. ! prefers-reduced-motion drops it to a static equivalent. the field is decoration over a UI that already works. ! this is the brand loading beat. for buttons and dense UI, reach for the plain Spinner. - [sula-field (SulaField)](https://usva.build/docs/components/sula-field): an ambient field of blobs that drift and merge slowly behind content. registry: `npx shadcn add https://usva.build/r/sula-field.json`. layer: sula. intensity: asserts. authored in usva. ! one sula element per region. a region is a bounded area competing for a single attention focus, so two liquid fields in the same one fight and read as noise. ! different regions are fine. a frame at the viewport edge is ambient and at the boundary; a nav at the top is a focal control surface. they do not compete, and they ship together. ! keep it out of dense, task-bound UI. not a table, not a form, not a dashboard someone is working in. ! prefers-reduced-motion drops it to a static equivalent. the field is decoration over a UI that already works. ! it pauses offscreen and in a background tab. never run it under a second sula surface. - [sula-frame (SulaFrame)](https://usva.build/docs/components/sula-frame): a liquid border that hugs a card, or the whole viewport, and leans toward your cursor. registry: `npx shadcn add https://usva.build/r/sula-frame.json`. layer: sula. intensity: asserts. from personal-website. ! one sula element per region. a region is a bounded area competing for a single attention focus, so two liquid fields in the same one fight and read as noise. ! different regions are fine. a frame at the viewport edge is ambient and at the boundary; a nav at the top is a focal control surface. they do not compete, and they ship together. ! keep it out of dense, task-bound UI. not a table, not a form, not a dashboard someone is working in. ! prefers-reduced-motion drops it to a static equivalent. the field is decoration over a UI that already works. ! fixed mode frames the viewport, so there can only ever be one of those on a page. ## atmospheres (8) · intensity: room - [utu (Utu)](https://usva.build/docs/components/utu): fog. a slow drifting haze that sits behind everything and asks for nothing. registry: `npx shadcn add https://usva.build/r/utu.json`. layer: atmospheres. intensity: room. authored in usva. - [kajastus (Kajastus)](https://usva.build/docs/components/kajastus): the glow on a horizon. light banked low, as if something is rising just out of frame. registry: `npx shadcn add https://usva.build/r/kajastus.json`. layer: atmospheres. intensity: room. authored in usva. - [kynnos (Kynnös)](https://usva.build/docs/components/kynnos): tilled ground. a lit height field of long furrows, raked by a grazing lamp. registry: `npx shadcn add https://usva.build/r/kynnos.json`. layer: atmospheres. intensity: room. authored in usva. - [hehku (Hehku)](https://usva.build/docs/components/hehku): an ember. a knotted filament that blooms where it folds back over itself. registry: `npx shadcn add https://usva.build/r/hehku.json`. layer: atmospheres. intensity: room. authored in usva. - [loimu (Loimu)](https://usva.build/docs/components/loimu): a flare. streamers of light drawn up through the dark and gone. registry: `npx shadcn add https://usva.build/r/loimu.json`. layer: atmospheres. intensity: room. authored in usva. - [routa (Routa)](https://usva.build/docs/components/routa): ground frost. low cells heave from underneath and split at their frozen seams. registry: `npx shadcn add https://usva.build/r/routa.json`. layer: atmospheres. intensity: room. authored in usva. - [vare (Väre)](https://usva.build/docs/components/vare): a ripple. cosine ridges spreading across a surface you cannot quite see. registry: `npx shadcn add https://usva.build/r/vare.json`. layer: atmospheres. intensity: room. authored in usva. - [kuulto (Kuulto)](https://usva.build/docs/components/kuulto): a shimmer through something. light arriving after it has passed through a body. registry: `npx shadcn add https://usva.build/r/kuulto.json`. layer: atmospheres. intensity: room. authored in usva. ## Pages - [docs](https://usva.build/docs): every component, one page each. - [get started](https://usva.build/docs/get-started): install, theme, and the agent brief. - [installation](https://usva.build/docs/get-started/installation): add the package or copy from the registry. - [theming](https://usva.build/docs/get-started/theming): pick a theme and override the tokens. - [for agents](https://usva.build/docs/get-started/for-agents): how a coding agent is meant to consume usva. - [skill.md](https://usva.build/skill.md): this library as an installable agent skill, with the failure modes. - [design language](https://usva.build/design-language): the foundations, before the components. - [colour](https://usva.build/design-language/color): the semantic role tokens and their contrast. - [type](https://usva.build/design-language/type): the type scale and the font stacks. - [space](https://usva.build/design-language/space): the spacing and sizing steps. - [depth](https://usva.build/design-language/depth): elevation, shadow and the layering order. - [motion](https://usva.build/design-language/motion): the timing, easing and reveal rules. - [iconography](https://usva.build/design-language/iconography): the icon set and how to size it. - [intensity](https://usva.build/design-language/intensity): the one rule, laid out in full. - [voice](https://usva.build/design-language/voice): how the product writes. - [identity](https://usva.build/design-language/identity): the usva. wordmark, the railo mark, and which one appears where. - [accessibility](https://usva.build/design-language/accessibility): the contrast and motion guarantees. - [tokens](https://usva.build/design-language/tokens): the full token table. - [tokens json](https://usva.build/design-language/tokens.json): the resolved token values, fetchable as DTCG json. - [themes](https://usva.build/themes): kajo, sisu and savi, side by side. - [studio](https://usva.build/studio): tune an atmosphere and copy its params. ## For agents read this file before you build any UI. use usva components and obey the intensity rules: core recedes, patterns structure, motion guides, sula asserts, atmospheres are the room. at most one sula element per region. this file is an index. it tells you what exists, not how to hold it. the skill does that, and it carries the failure modes this library has already been bitten by, every one of which passes a build: ``` mkdir -p .claude/skills/usva curl -o .claude/skills/usva/SKILL.md https://usva.build/skill.md ``` no agent skills in your harness? save it as AGENTS.md, or paste it as a system prompt. failing that, the shortest useful prompt, copy it as is: ``` read https://usva.build/llms.txt before you build any UI. use usva components. obey the intensity rules: core recedes, patterns structure, sula asserts, one sula element per region, at most. ```