Usva

Overview

Usva is a source-available, opinionated React design system by Matt Pasek, described as "a design system first, a component library second." It ships 79 components, 3 themes and 8 WebGL atmospheres on one token vocabulary: kajo is violet, dark and expressive, sisu is the dense usability theme, and savi is the light ground.

Every component is dual-distributed. It can be installed from npm as @usva-ui/react so updates propagate, or copied in through the shadcn-compatible registry, which delivers the same file the package ships. The system already runs two contrasting apps: a personal website and the sisu-plus browser extension.

Features

• 79 components: 36 core primitives, 27 patterns, 2 motion components, 6 "sula" accent elements and 8 atmospheres.
• Three themes: kajo, sisu and savi share one vocabulary, so switching themes does not fork components.
• WebGL atmospheres: Eight backgrounds (utu, kajastus, kynnös, hehku, loimu, routa, väre, kuulto) that respect reduced-motion.
• Patterns: Bento grid, case study hero, dashboard grid, roadmap timeline, stat cards, toolbar, footer and more.
• Two install paths: bun add @usva-ui/react for a managed package, or the shadcn CLI to own the source, mixable per component.
• Docs and tooling: Design language, voice, accessibility and token docs, a theme studio, Storybook and agent instructions.

Tech stack

• React
• npm package @usva-ui/react
• shadcn-compatible registry
• WebGL

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @usva/component-name