Installation

Prerequisites

Node.js 20+
pnpm (recommended) or npm

Quick Start

Create a new Astro project (skip if you have one):

We recommend using the fulldev starter. If you prefer to scaffold manually:

pnpm create astro@latest my-project -- --template with-tailwindcss
cd my-project

Configure TypeScript paths in tsconfig.json:

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

Initialize shadcn:

npx shadcn@latest init

Add fulldev/ui registry to components.json:

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

Copy the base stylesheet from src/styles/global.example.css to src/styles/global.css, then import it in your layout.
Use a container-aware app shell because fulldev/ui uses Tailwind v4 container-query variants like @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:

npx shadcn@latest add @fulldev/button

Or add multiple resources at once:

npx shadcn@latest add @fulldev/button @fulldev/item @fulldev/list

Add all components and blocks

npx shadcn@latest add @fulldev/components
npx shadcn@latest add @fulldev/blocks

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="/logo-fulldev.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>