Getting started
Wavi
The design system behind ParkingOS, WAVEMAP and every WAVEINNO product: tokens, components and an application shell for React, published as @waveinno/ui.
Built for products
Tables with saved views, stat cards, an application shell with ⌘K. The parts every WAVEINNO product needs, already made.
Themeable to the token
Every colour, radius and font is a CSS variable. One brand colour becomes a full light and dark palette.
Light, dark, three densities
Every component, in every mode. The theme is applied before first paint, so nothing flashes.
English and Bangla
Words come through props, dates and numbers through locale, and the Taka sign renders in every font slot.
Accessible underneath
Radix primitives for focus and keyboards; states carry an icon or text, never colour alone.
Next.js or Vite
Compiled ESM with types. The only Next.js part is an optional adapter, so any React 19 app can use it.
Quick start#
$ npm install @waveinno/uiThen, once per project: import the stylesheet, point Tailwind at the package, load the fonts and add the providers. The guides walk through it for Next.js and Vite, in about five minutes.
How to use these docs#
Components has 78 pages. Each shows the component live, and its Code tab holds a complete file: copy it into your project and it runs as shown. Every component file in the package also opens with a comment saying what it is for and the rule it keeps; your editor shows it on hover.
To make it yours, open the theme builder: pick a brand colour, a radius and fonts, see every component change, and copy the CSS. Or call createTheme() from code.