Presets

Fulldev UI works with shadcn/ui presets. A preset is a short code, such as b0, for a set of design choices. Build one on the Create page, or on 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:

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 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:

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:

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

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.