You need a React project set up with shadcn/ui for Base UI, such as a Vite or
Next.js project. If it does not have a components.json yet, follow the
official installation and run
init with a Base UI style:
npx shadcn@latest init
Fulldev UI serves the Base UI styles only, such as base-vega and
base-nova. If style in components.json is a legacy style such as
new-york, or starts with radix-, the extension does not apply.
Add the registry
Add the @fulldev registry to components.json. The CLI fills in {style}
from your style, so extras and blocks install in that style:
{
"registries": {
"@fulldev": "https://ui.full.dev/r/react/styles/{style}/{name}.json"
}
}
Add extras and blocks
npx shadcn@latest add @fulldev/section @fulldev/hero-1
Add every extra or block with @fulldev/components and @fulldev/blocks.
Standard components that a block uses, such as button or badge, install
from the official shadcn/ui registry.
import { Hero1 } from "@/components/blocks/hero-1"
import { Section } from "@/components/ui/section"
Notes
Iconrenders any Lucide icon or Simple Icons brand by its content name, such asrocketorfigma;lucide:andsimple:pick a set. With only anhref, it shows the brand of a social or contact link. It includes both sets, about 2 MB gzipped in a client bundle; in a server component it stays on the server. Import an icon fixed in code fromlucide-reactorsimple-iconsdirectly.Doc1adds a copy button to<pre>elements passed as direct children. Map compiled MDX to the exported code block:<Content components={{ pre: Doc1CodeBlock }} />.- Wrap the app in
ThemeProviderfrom@/components/ui/theme-toggleto useThemeToggle.