Documentation · Vela UI
Introduction
Start here: what Vela UI is, what it ships, and how it reaches your app.
Vela UI is the design system Venizia’s apps wear. It is a set of React components built on accessible primitives and styled by a Tailwind v4 token set that is generated from Figma Variables, never written by hand.
It comes in two bases with the same components and the same look. An app installs the one that matches the primitives it already uses.
It is not a package. Vela UI is a registry under the @velaui namespace: installing a component
copies its source into your repository, together with the components, icons and npm packages it
needs. From then on the code is yours to read and change.
At a glance
Code you own
Copied into your repository, not hidden in node_modules
Figma and code in step
Tokens generated from 612 Figma variables
Two bases, one look
Base A or Base UI underneath
Themes built in
Light, dark and four corner-radius moods
Where to start
01InstallAdd the @velaui registry and install a first component.02Make it yoursPick the colour mode and the corner-radius mood for your app.03Build a screenMount a ready block, then swap the sample data for your own.Getting help
The team that builds the VeniAI apps maintains Vela UI.
Tell us which component or page you are working on and you will hear back from the people who made it.
