Vela UI Docs
venizia.ai

The Venizia design system

Components you own.
Tokens from Figma.

Install vela-ui

Vela UI is what every Venizia app wears: accessible React components on Radix UI or Base UI primitives, styled by a Tailwind v4 token set generated from Figma Variables. Install a component and its source lands in your repository, ready to read and change.

  • 42 components
  • 856 icons
  • 12 app shell block
  • Tailwind v4
  • Radix UI and Base UI
  • shadcn registry
  • Figma Variables tokens
  • Inter Display
App Layout Dashboard: an app shell built from vela-ui components. Open it to use it at any width.

Three steps to install

Vela UI is a shadcn registry, not a package. Nothing to keep in sync: the code is yours from the moment it lands.

Base

Vela UI ships two bases from this one registry, with the same items under the same names: https://velaui.dev.venizia.ai/r/radix/ for Radix UI and https://velaui.dev.venizia.ai/r/base/ for Base UI. The switch picks which base the snippets on this site show; the install commands are the same for both.

  1. 01

    Register the namespace

    In an app that has run npx shadcn init, point the @velaui namespace at this registry in components.json.

    {
  "registries": {
    "@velaui": "https://velaui.dev.venizia.ai/r/radix/{name}.json"
  }
}
    {
  "registries": {
    "@velaui": "https://velaui.dev.venizia.ai/r/base/{name}.json"
  }
}

  2. 02

    Add the style, then any component

    The style brings the tokens, fonts and base layer once. Components pull their own dependencies, icons and sibling components with them.

    npx shadcn add @velaui/vela-ui @velaui/button @velaui/data-table

  3. 03

    Make vela-ui your global stylesheet

    Replace the contents of the CSS file your app imports. It already imports Tailwind, so do not import it twice.

    @import "./styles/vela-ui/index.css";

What the registry holds

Components
42
Icons
856
Blocks
12

Every component and block, by install name