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.

Add the Fulldev UI base styles

Copy src/styles/global.css into your project, then import it from your app layout.

The starter stylesheet includes the theme variables used by Fulldev UI and is the expected baseline for the component examples.

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, all install commands in this docs site should work as written.

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