Skip to content
Wayra UI

Install

The package

Section titled “The package”
Terminal window
pnpm add wayra-ui

The package has no runtime dependencies of its own. Everything it needs at runtime is a peer you already install.

Peer dependencies

Section titled “Peer dependencies”
Terminal window
pnpm add react react-dom react-hook-form
Peer Range
react / react-dom ^19.0.0 The library targets the React 19 runtime.
react-hook-form ^7.75 Required, not optional. The field components import it directly, so there is no separate entry point to opt into.

react-hook-form being a hard peer is the one thing worth pausing on. Form owns nothing but the provider and handleSubmit, and every field below it binds on name alone — no Controller to wrap, no adapter to install. Outside a Form, or with noRhf, the same components fall through to ordinary controls, so nothing forces a form context on a field that is not in a form.

If you validate against a schema, add a resolver. This is optional:

Terminal window
pnpm add zod @hookform/resolvers

Import the stylesheet

Section titled “Import the stylesheet”

Once, anywhere in your app. It carries the design tokens and every component’s styles:

import { Badge, Button, Input } from 'wayra-ui';
import 'wayra-ui/styles.css';


<Button variant="outline">Click me</Button>
<Badge>New</Badge>
<Input type="email" aria-label="Email" placeholder="you@example.com" />

Want the tokens without the components, so you can style your own UI against the same system? Import the theme instead:

@import "wayra-ui/theme.css";

styles.css already includes it. Importing both is redundant, not a mistake.

Next

Section titled “Next”
  • Introduction — the cascade layers, the framework-free contract, and what the browser floor is.
  • Theming — the tokens, the seven palettes, and the rule that shapes all of them.