---
type: doc
title: Installation
description: Install Fulldev UI for Astro.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

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.

If your project already has a `components.json`, do not run `init` again,
because it replaces the theme tokens in your stylesheet. Add the `@fulldev`
registry below to `components.json` instead, then run
`npx shadcn@latest add @fulldev/init`. It adds the class helper, dependencies,
and base styles, and leaves your theme tokens and colors alone.

Fulldev UI serves the Base UI styles only. If the `style` in your
`components.json` is a legacy style such as `new-york`, or starts with
`radix-`, set it to a Base UI style such as `base-vega` first. See
[Presets](/astro/docs/presets/#switch-an-existing-project).

## Add to existing Astro project

### Edit tsconfig.json file

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

```ts title="tsconfig.json" {4-8} showLineNumbers
{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

### Initialize Fulldev UI

Fulldev UI uses the shadcn CLI. Initialize your project from the Fulldev UI
base:

```bash
npx shadcn@latest init https://ui.full.dev/r/styles/base-vega/base.json
```

This writes `components.json` with the `@fulldev` registry, adds the theme
tokens to your stylesheet, and installs the class helper and dependencies. Your
stylesheet is the one `components.json` points to, `src/styles/global.css` by
default. Import it from your app layout.

Replace `base-vega` with another shadcn/ui style, such as `base-nova`, to start
in that style. To use a shadcn/ui preset, see [Presets](/astro/docs/presets/).

The `@fulldev` registry in `components.json` looks like this. The CLI fills in
`{style}` from the `style` in `components.json`, so components install in your
project's style:

```json title="components.json"
{
  "registries": {
    "@fulldev": "https://ui.full.dev/r/styles/{style}/{name}.json"
  }
}
```

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:

```astro title="src/layouts/Layout.astro" {2,6} showLineNumbers
---
import "@/styles/global.css"
---

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

## Add Components

You can now start adding components to your project.

```bash
npx shadcn@latest add @fulldev/button
```

or multiple resources at once:

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

Add the examples from a component page with `@fulldev/<name>-examples`, such
as `@fulldev/button-examples`. They install to
`src/components/examples/<name>/`.

### Add all components

```bash
npx shadcn@latest add @fulldev/components
```

### Usage

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

```astro title="src/pages/index.astro" {2,16} showLineNumbers
---
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.2 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. In projects using Astro's
`ClientRouter`, they release their controllers before it 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](/astro/components/command/#command-dialog).

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.