Create
bJfEY5IYOnly visible to your team.
Build every branch.
Email me when a build fails.
Updated 2 hours ago
In your Astro project, set up 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-vega/base.jsonnpx shadcn@latest apply bJfEY5IY --only theme,font
Create a shadcn/ui project with the preset, add the @fulldev registry to components.json, then add Fulldev UI extras and blocks:
npx shadcn@latest init --preset bJfEY5IYnpx shadcn@latest add @fulldev/section @fulldev/hero-1
Set the style in components.json, apply the theme and fonts, then reinstall the Fulldev UI components you use in the new style. Commit first, because --overwrite replaces your component files. The @fulldev registry must contain {style}, or components install in Vega.
"style": "base-vega"npx shadcn@latest apply bJfEY5IY --only theme,fontnpx shadcn@latest add @fulldev/button @fulldev/card --overwrite
The shadcn CLI applies menu colors to React components only, so the Astro components of Fulldev UI install with the default menu color. The React extension uses the shadcn/ui menus, which get the preset's menu color.
How presets work
A preset is a short code for a set of choices: style, base color, theme, chart
color, fonts, radius, menu color, and menu accent. The shadcn CLI turns the code
into your
components.json style, CSS variables, and fonts, so the same code works on
ui.shadcn.com/create and here.
The style decides the shape of components. Fulldev UI installs each component in
the style from your components.json, through the @fulldev registry on
https://ui.full.dev/r/styles/{style}/{name}.json. The theme and fonts are CSS
variables in your stylesheet.
Your choice here applies to all of these docs, previews included, and shows up as “Your preset” in the switcher at the top of the docs sidebar. Reset goes back to the Fulldev preset, the docs default. A new project gets the theme of the registry’s init item instead.
Fulldev UI uses Lucide icons, so presets keep the Lucide icon library. The shadcn CLI applies menu colors to React components only, so the Astro components install with the default menu color. Read more in Presets.