View fulldotdev/ui on GitHub

Installation

Add the Fulldev UI extension to a shadcn/ui React project.

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

  • Icon renders any Lucide icon or Simple Icons brand by its content name, such as rocket or figma; lucide: and simple: pick a set. With only an href, 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 from lucide-react or simple-icons directly.
  • Doc1 adds 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 ThemeProvider from @/components/ui/theme-toggle to use ThemeToggle.