UI

Presets

Use shadcn/ui presets to set the style, theme, and fonts of Fulldev UI.

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.
  • Menu color: default or inverted, solid or translucent menus.

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. The shadcn CLI applies menu colors to React components only, so the Astro menus, selects, and comboboxes of Fulldev UI install with the default menu color. The docs previews show every menu color.

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.