Getting started
Installation
Initialise Vela UI once, install the style, then add components one at a time as the app needs them.
Requires a React app with Tailwind CSS v4.
Pick a base
Pick a base first
Vela UI comes in two bases with the same components and the same look. Use the one that matches the primitives your app already uses; an app does not need both.
Steps 01–04
Initialise Vela UI in the app
Run it once per app, before adding any item.
pnpm dlx velaui initnpx velaui inityarn dlx velaui initbunx --bun velaui initInstall the style once
The style installs the tokens, the font faces and the base layer. Run it once per app.
pnpm dlx velaui add @velaui/vela-uinpx shadcn@latest add @velaui/vela-uiyarn dlx shadcn@latest add @velaui/vela-uibunx --bun shadcn@latest add @velaui/vela-uiAdd a component
The source is copied into your repository, together with the icons and npm packages it needs.
pnpm dlx velaui add @velaui/buttonnpx shadcn@latest add @velaui/buttonyarn dlx shadcn@latest add @velaui/buttonbunx --bun shadcn@latest add @velaui/buttonCreatescomponents/ui/button.tsx
Use it
From here the code is yours to read and change.
import { Button } from "@/components/ui/button"
<Button>Save changes</Button>How items are named
An item's name is its address everywhere: @velaui/<name> in the registry, /components/<name> or /blocks/<name> on this site, and the file or folder it installs to.
| Registry | @velaui/date-picker |
|---|---|
| This site | /components/date-picker |
| Your repository | components/ui/date-picker.tsx |