UI

Vela builds its interface with shadcn-svelte components, plus a few of its own that shadcn-svelte doesn’t provide, such as data-table, multiselect and geopoint. All components are installed to the src/lib/components/ui directory, as ordinary files you own and can edit.

Syntax

$ vela ui <command>

• add - Add components to the application
• list - List installed and available components
• style - Switch the shadcn-svelte style
• base - Change the base color
• theme - Change the accent color

The shadcn-svelte configuration lives in components.json at the project root. style, base and theme use the project’s own shadcn-svelte, which must be version 1.6 or newer.

Requirements

Every vela ui command needs a shadcn-svelte project: a components.json, and the shadcn-svelte or bits-ui package in package.json. Projects from vela create and vela bless have both. Anywhere else the command is refused before anything is changed, and prints how to set it up:

$ npx sv add tailwindcss
$ npx shadcn-svelte@latest init