Installation

Fulldev UI is distributed as a shadcn-compatible @fulldev registry for Astro projects. The setup below keeps your project aligned with the examples in this documentation.

Create new Astro project

If you don’t have a project yet, we recommend using this starter template.

Add to existing Astro project

Because Fulldev UI uses shadcn-compatible registry tooling, run the shadcn init command to set up your project:

npx shadcn@latest init

If the CLI prompts for defaults, choose Astro and keep CSS variables enabled.

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Add Fulldev UI registry

Add Fulldev UI as a namespaced registry to your components.json file:

{
  "registries": {
    "@fulldev": "https://ui.full.dev/r/{name}.json"
  }
}

Once the registry is present, install the base stylesheet and shared helpers:

npx shadcn@latest add @fulldev/init

This installs the Tailwind theme tokens, animation styles, and class helper. Import @/styles/global.css from your app layout. In an existing project, review the CLI’s stylesheet changes to preserve your own theme.

Install every block with npx shadcn@latest add @fulldev/blocks, or choose individual blocks and components below.

Use a container-aware app shell

Fulldev UI uses Tailwind CSS v4 container query variants such as @2xl: and @max-5xl:. These are intentional and should not be converted to viewport breakpoints like 2xl:.

To make those variants work, add @container to the root wrapper that contains your page content:

---
import "@/styles/global.css"
---

<body class="@container">
  <slot />
</body>

Add Components

You can now start adding components to your project.

npx shadcn@latest add @fulldev/button

or multiple resources at once:

npx shadcn@latest add @fulldev/button @fulldev/card @fulldev/section

Add all components

npx shadcn@latest add @fulldev/components

Usage

The commands above will add components to your project. You can then import them like this:

---
import { Button } from "@/components/ui/button"
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro + Fulldev UI</title>
  </head>
  <body class="@container">
    <div class="grid h-screen place-items-center content-center">
      <Button>Button</Button>
    </div>
  </body>
</html>

At that point, you can follow the component pages directly and install only the pieces you need.

Sidebar

Search