# UI

Vela construye su interfaz con componentes de shadcn-svelte, más algunos propios que shadcn-svelte no ofrece, como `data-table`, `multiselect` y `geopoint`. Todos los componentes se instalan en el directorio `src/lib/components/ui`, como archivos corrientes que te pertenecen y puedes editar.

### Sintaxis

```
$ vela ui <command>
```

- [`add`](/es/ui/add) - Añadir componentes a la aplicación
- [`list`](/es/ui/list) - Listar los componentes instalados y disponibles
- [`style`](/es/ui/style) - Cambiar el estilo de shadcn-svelte
- [`base`](/es/ui/base) - Cambiar el color base
- [`theme`](/es/ui/theme) - Cambiar el color de acento

La configuración de shadcn-svelte vive en `components.json`, en la raíz del proyecto. `style`, `base` y `theme` usan el shadcn-svelte del propio proyecto, que debe ser la versión 1.6 o posterior.

### Requisitos

Todos los comandos `vela ui` necesitan un proyecto con shadcn-svelte: un `components.json`, y el paquete `shadcn-svelte` o `bits-ui` en `package.json`. Los proyectos de [`vela create`](/es/create) y [`vela bless`](/es/bless) tienen ambos. En cualquier otro el comando se rechaza antes de cambiar nada, e imprime cómo configurarlo:

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