---
name: "@usva"
slug: "usva"
description: "A React design language in three themes, where kajo is atmospheric and dark, sisu is dense and quick, and savi is the light ground. One token vocabulary underneath, including WebGL atmospheres that honour reduced-motion. Every component installs from npm or copies in from this registry."
category: "Animated components"
tags: ["3d", "animation", "blocks", "buttons", "cards", "dashboard", "forms", "loaders", "maps", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "retro", "theming"]
framework: "react"
license: null
author: "matt-pasek"
website: "https://usva.build"
github: "https://github.com/matt-pasek/usva"
registry: "https://usva.build/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 83
generated_at: "2026-09-05T09:50:59.044Z"
---

# @usva

A React design language in three themes, where kajo is atmospheric and dark, sisu is dense and quick, and savi is the light ground. One token vocabulary underneath, including WebGL atmospheres that honour reduced-motion. Every component installs from npm or copies in from this registry.

## Links

- Website: https://usva.build
- GitHub: https://github.com/matt-pasek/usva
- Registry JSON: https://usva.build/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/usva
- This file: https://sh4dcn.vercel.app/md/usva.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://usva.build/r/registry.json
pnpm dlx shadcn@latest add https://usva.build/r/registry.json
bunx shadcn@latest add https://usva.build/r/registry.json
# clone the source repo
git clone https://github.com/matt-pasek/usva.git
# fetch the raw registry index
curl -s https://usva.build/r/registry.json
```

## Components (83)

| name | type | description | install |
| --- | --- | --- | --- |
| announcement | registry:ui | — | `npx shadcn@latest add https://usva.build/r/announcement.json` |
| avatar | registry:ui | — | `npx shadcn@latest add https://usva.build/r/avatar.json` |
| badge | registry:ui | — | `npx shadcn@latest add https://usva.build/r/badge.json` |
| button | registry:ui | — | `npx shadcn@latest add https://usva.build/r/button.json` |
| callout | registry:ui | — | `npx shadcn@latest add https://usva.build/r/callout.json` |
| card | registry:ui | — | `npx shadcn@latest add https://usva.build/r/card.json` |
| checkbox | registry:ui | — | `npx shadcn@latest add https://usva.build/r/checkbox.json` |
| chip | registry:ui | — | `npx shadcn@latest add https://usva.build/r/chip.json` |
| code-snippet | registry:ui | — | `npx shadcn@latest add https://usva.build/r/code-snippet.json` |
| color-field | registry:ui | — | `npx shadcn@latest add https://usva.build/r/color-field.json` |
| dialog | registry:ui | — | `npx shadcn@latest add https://usva.build/r/dialog.json` |
| drawer | registry:ui | — | `npx shadcn@latest add https://usva.build/r/drawer.json` |
| dropdown-menu | registry:ui | — | `npx shadcn@latest add https://usva.build/r/dropdown-menu.json` |
| hint-popover | registry:ui | — | `npx shadcn@latest add https://usva.build/r/hint-popover.json` |
| input | registry:ui | — | `npx shadcn@latest add https://usva.build/r/input.json` |
| knob | registry:ui | — | `npx shadcn@latest add https://usva.build/r/knob.json` |
| label | registry:ui | — | `npx shadcn@latest add https://usva.build/r/label.json` |
| list | registry:ui | — | `npx shadcn@latest add https://usva.build/r/list.json` |
| loading-overlay | registry:ui | — | `npx shadcn@latest add https://usva.build/r/loading-overlay.json` |
| log-line | registry:ui | — | `npx shadcn@latest add https://usva.build/r/log-line.json` |
| notification-badge | registry:ui | — | `npx shadcn@latest add https://usva.build/r/notification-badge.json` |
| overlay-core | registry:ui | — | `npx shadcn@latest add https://usva.build/r/overlay-core.json` |
| popover | registry:ui | — | `npx shadcn@latest add https://usva.build/r/popover.json` |
| progress | registry:ui | — | `npx shadcn@latest add https://usva.build/r/progress.json` |
| radio | registry:ui | — | `npx shadcn@latest add https://usva.build/r/radio.json` |
| select | registry:ui | — | `npx shadcn@latest add https://usva.build/r/select.json` |
| skeleton | registry:ui | — | `npx shadcn@latest add https://usva.build/r/skeleton.json` |
| slider | registry:ui | — | `npx shadcn@latest add https://usva.build/r/slider.json` |
| spinner | registry:ui | — | `npx shadcn@latest add https://usva.build/r/spinner.json` |
| stat-chip | registry:ui | — | `npx shadcn@latest add https://usva.build/r/stat-chip.json` |
| switch | registry:ui | — | `npx shadcn@latest add https://usva.build/r/switch.json` |
| tabs | registry:ui | — | `npx shadcn@latest add https://usva.build/r/tabs.json` |
| terminal | registry:ui | — | `npx shadcn@latest add https://usva.build/r/terminal.json` |
| textarea | registry:ui | — | `npx shadcn@latest add https://usva.build/r/textarea.json` |
| toast | registry:ui | — | `npx shadcn@latest add https://usva.build/r/toast.json` |
| toggle-chip | registry:ui | — | `npx shadcn@latest add https://usva.build/r/toggle-chip.json` |
| tooltip | registry:ui | — | `npx shadcn@latest add https://usva.build/r/tooltip.json` |
| bento-grid | registry:ui | — | `npx shadcn@latest add https://usva.build/r/bento-grid.json` |
| case-study-hero | registry:ui | — | `npx shadcn@latest add https://usva.build/r/case-study-hero.json` |
| checklist-card | registry:ui | — | `npx shadcn@latest add https://usva.build/r/checklist-card.json` |
| cta-banner | registry:ui | — | `npx shadcn@latest add https://usva.build/r/cta-banner.json` |
| dashboard-grid | registry:ui | — | `npx shadcn@latest add https://usva.build/r/dashboard-grid.json` |
| disclosure-row | registry:ui | — | `npx shadcn@latest add https://usva.build/r/disclosure-row.json` |
| empty-state | registry:ui | — | `npx shadcn@latest add https://usva.build/r/empty-state.json` |
| entity-card | registry:ui | — | `npx shadcn@latest add https://usva.build/r/entity-card.json` |
| feature-carousel | registry:ui | — | `npx shadcn@latest add https://usva.build/r/feature-carousel.json` |
| field-group | registry:ui | — | `npx shadcn@latest add https://usva.build/r/field-group.json` |
| footer | registry:ui | — | `npx shadcn@latest add https://usva.build/r/footer.json` |
| hero-split | registry:ui | — | `npx shadcn@latest add https://usva.build/r/hero-split.json` |
| mockup-showcase | registry:ui | — | `npx shadcn@latest add https://usva.build/r/mockup-showcase.json` |
| page-header | registry:ui | — | `npx shadcn@latest add https://usva.build/r/page-header.json` |
| panel | registry:ui | — | `npx shadcn@latest add https://usva.build/r/panel.json` |
| progress-row | registry:ui | — | `npx shadcn@latest add https://usva.build/r/progress-row.json` |
| pullquote | registry:ui | — | `npx shadcn@latest add https://usva.build/r/pullquote.json` |
| roadmap-timeline | registry:ui | — | `npx shadcn@latest add https://usva.build/r/roadmap-timeline.json` |
| section-heading | registry:ui | — | `npx shadcn@latest add https://usva.build/r/section-heading.json` |
| section-label | registry:ui | — | `npx shadcn@latest add https://usva.build/r/section-label.json` |
| segmented-control | registry:ui | — | `npx shadcn@latest add https://usva.build/r/segmented-control.json` |
| stat-bento | registry:ui | — | `npx shadcn@latest add https://usva.build/r/stat-bento.json` |
| stat-card | registry:ui | — | `npx shadcn@latest add https://usva.build/r/stat-card.json` |
| step-chips | registry:ui | — | `npx shadcn@latest add https://usva.build/r/step-chips.json` |
| step-list | registry:ui | — | `npx shadcn@latest add https://usva.build/r/step-list.json` |
| stripe-card | registry:ui | — | `npx shadcn@latest add https://usva.build/r/stripe-card.json` |
| toolbar | registry:ui | — | `npx shadcn@latest add https://usva.build/r/toolbar.json` |
| sula-core | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-core.json` |
| sula-fab | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-fab.json` |
| sula-field | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-field.json` |
| sula-frame | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-frame.json` |
| sula-loader | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-loader.json` |
| sula-motion | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-motion.json` |
| sula-nav | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-nav.json` |
| sula-segmented | registry:ui | — | `npx shadcn@latest add https://usva.build/r/sula-segmented.json` |
| page-transition | registry:ui | — | `npx shadcn@latest add https://usva.build/r/page-transition.json` |
| reveal | registry:ui | — | `npx shadcn@latest add https://usva.build/r/reveal.json` |
| atmospheres-core | registry:ui | — | `npx shadcn@latest add https://usva.build/r/atmospheres-core.json` |
| hehku | registry:ui | — | `npx shadcn@latest add https://usva.build/r/hehku.json` |
| kajastus | registry:ui | — | `npx shadcn@latest add https://usva.build/r/kajastus.json` |
| kuulto | registry:ui | — | `npx shadcn@latest add https://usva.build/r/kuulto.json` |
| kynnos | registry:ui | — | `npx shadcn@latest add https://usva.build/r/kynnos.json` |
| loimu | registry:ui | — | `npx shadcn@latest add https://usva.build/r/loimu.json` |
| routa | registry:ui | — | `npx shadcn@latest add https://usva.build/r/routa.json` |
| utu | registry:ui | — | `npx shadcn@latest add https://usva.build/r/utu.json` |
| vare | registry:ui | — | `npx shadcn@latest add https://usva.build/r/vare.json` |

## For AI agents

```text
You are adding components from @usva to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/usva.md) for the component list.
2. Fetch the machine-readable index: https://usva.build/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: usva).
```