---
type: doc
title: Presets
description: Use shadcn/ui presets to set the style, theme, and fonts of Fulldev UI.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

Fulldev UI works with [shadcn/ui presets](https://ui.shadcn.com/docs/cli#preset).
A preset is a short code, such as `b0`, for a set of design choices. Build one on
the [Create](/create/) page, or on [ui.shadcn.com/create](https://ui.shadcn.com/create).

## What a preset sets

- **Style**: the shape of components, such as radius, density, and type. Fulldev
  UI supports all shadcn/ui styles: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and
  Rhea.
- **Theme**: the base color, theme color, chart colors, radius, and menu accent,
  as CSS variables in your stylesheet.
- **Fonts**: the body and heading fonts.

Fulldev UI serves the Base UI styles (`base-vega`, `base-nova`, and so on) and
uses Lucide icons, so keep a `base-` style and the Lucide icon library. Menu
colors are not supported yet.

## Start a project with a preset

In your Astro project, initialize Fulldev UI in the preset's style, then apply
the preset's theme and fonts:

```bash
npx shadcn@latest init https://ui.full.dev/r/styles/base-<style>/base.json
npx shadcn@latest apply <preset> --only theme,font
```

Replace `<style>` with the preset's style, such as `vega` or `nova`. The
[Create](/create/) page fills in both commands for you. `init` writes
`components.json` with the `@fulldev` registry, so you can add components right
away, for example `npx shadcn@latest add @fulldev/button`.

## Switch an existing project

To change only the theme and fonts, apply those parts of the preset. Your style
and components stay as they are:

```bash
npx shadcn@latest apply <preset> --only theme,font
```

To also change the style, set `style` in `components.json` to the preset's
style, such as `base-nova`, apply the theme and fonts, then reinstall the
Fulldev UI components you use so they take the new style:

```bash
npx shadcn@latest apply <preset> --only theme,font
npx shadcn@latest add @fulldev/button @fulldev/card --overwrite
```

Commit your changes first, because `--overwrite` replaces your component files.
This also works for a project with a legacy style such as `new-york`.
Check first that the `@fulldev` registry in `components.json` is
`https://ui.full.dev/r/styles/{style}/{name}.json`. An older URL without
`{style}` always installs the Vega components.

Avoid a full `apply <preset>` in a Fulldev UI project. It adds
`@base-ui/react` and `lucide-react`, which Fulldev UI does not use, and it
turns a legacy style such as `new-york` into a `radix-` style, which Fulldev UI
does not serve.

`apply` keeps radius mappings that are already in your stylesheet. A project
set up before Fulldev UI 0.18 has the older scale, `--radius-sm` to
`--radius-xl` as `calc(var(--radius) - 4px)` and so on. To match the current
shadcn/ui scale, replace them with `calc(var(--radius) * 0.6)` for `sm`, `0.8`
for `md`, `1.4` for `xl`, and add `2xl` to `4xl` at `1.8`, `2.2`, and `2.6`.

## Inspect a preset

```bash
npx shadcn@latest preset decode <preset>
npx shadcn@latest preset resolve
```

`decode` shows the choices in a code, and `resolve` shows the preset of the
current project.