# 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`](/ui/add) - Add components to the application
- [`list`](/ui/list) - List installed and available components
- [`style`](/ui/style) - Switch the shadcn-svelte style
- [`base`](/ui/base) - Change the base color
- [`theme`](/ui/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`](/create) and [`vela bless`](/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
```