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.

Data Slot 1.x upgrades

Interactive components require Data Slot 1.0.1 or newer within 1.x. Updating npm versions alone does not update component files previously copied by the registry. Reinstall the affected registry items and merge their source changes with your customizations.

Components use Data Slot’s own initialization and release their controllers before Astro’s ClientRouter swaps the page. Component state is reinitialized on navigation; this integration does not preserve interactive state across transition:persist.

Select, Tooltip, Hover Card and Navigation Menu now use Data Slot’s recommended lazy mounting. Closed content is retained outside the document. This changes DOM queries compared with 0.2.x: use mountStrategy="eager" if custom code needs to query closed content. Nested Data Slot components initialize in either mode.

CommandDialog already includes a Dialog root. Use its trigger slot instead of wrapping it in another Dialog. See the Command example.

Command inputs inside dialogs should use native autofocus to receive initial focus. Standalone command inputs leave page focus unchanged. Slider now follows Data Slot’s centered thumb default; use thumbAlignment="edge" to retain edge alignment. Tabs triggers and panels require an explicit value.

Buttons and Tabs triggers default to type="button", matching shadcn controls. Use type="submit" explicitly for form submission.

Sidebar

Search