Getting started

Installation

One command sets it all up. Or pick your framework for the step-by-step guide; both end in the same place: the components, the tokens and the fonts, in light and dark.

The quick way: one command

Run it in your app's folder, or in an empty one to create a new app. It asks whether you build with Next.js or React + Vite, the currency and the package manager, shows every change it will make, and only then makes them. Your own files are never overwritten.

$ npx @waveinno/ui init

Check a setup any time with npx @waveinno/ui doctor. In scripts and CI: npx @waveinno/ui init --yes --framework next --currency BDT.

Next.js App Router, next/font, server pages that render client components.Vite React + TypeScript, Tailwind's Vite plugin, React Router if you like.

The package#

$ npm install @waveinno/ui

@waveinno/ui: every component, hook and helper, as compiled ES modules with type definitions. Each module keeps its own "use client", so server code can import the server-safe parts (formatters, the theme script).
@waveinno/ui/styles.css: the design tokens for light and dark, three densities, motion, and the type classes.
@waveinno/ui/next: the Next.js router adapter. The only file that imports Next.js.
@waveinno/ui/brand/waveinno-logo.svg: the official logo file.

Peer dependencies#

Package	Version	Why
react, react-dom	19 or newer	Yours, so the app has one React.
tailwindcss	4 or newer	Generates the classes from the tokens. v3 is not supported.
next	16 or newer, optional	Only for @waveinno/ui/next. Vite apps leave it out.

Updating#

$ npm install @waveinno/ui@latest

Versions follow semver: a patch fixes, a minor adds components or props, a major renames or removes something. The changelog in the package lists every change.