Installation

Fulldev UI is distributed as a shadcn-compatible @fulldev registry for Astro projects. Components and blocks install as source files in your project.

Start with an AI agent

Give your AI agent this prompt:

Initialize Fulldev UI by following https://ui.full.dev/docs/installation.md. Choose the current-project or new-project path. If it is unclear which path to use, ask me before changing files.

Every documentation page has a Markdown version. Add .md to the URL to read the source.

Manual setup

Follow these steps in order. Skip the steps that your project already satisfies.

1. Create an Astro project

Skip this step if you are already in an Astro project.

pnpm create astro@latest my-project --template minimal --install --no-git --yes
cd my-project

2. Add Tailwind CSS

Skip this step if your project already uses Tailwind CSS v4.

pnpm astro add tailwind -y

3. Add shadcn config

Create components.json so the shadcn CLI can resolve the @fulldev registry namespace:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-vega",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/global.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@fulldev": "https://ui.full.dev/r/{name}.json"
  }
}

Update tsconfig.json so installed source files resolve @/* imports:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. Initialize Fulldev

Run init after the project has Tailwind CSS and the config files above:

npx shadcn@latest add @fulldev/init -y --overwrite

What this command does:

Installs the shared CSS tokens, class helper, and dependencies.
Uses components.json to resolve the @fulldev registry.
Uses tsconfig.json to keep installed source imports portable.

--overwrite lets init replace Astro’s generated src/styles/global.css with the Fulldev token layer. For an existing project, review that file before running the command if it already has custom styles. The -y flag is for agent and script-friendly installs; omit it for an interactive confirmation prompt.

5. Add components

Install your first source-owned UI file:

npx shadcn@latest add @fulldev/button -y

Or install the components used in the example below:

npx shadcn@latest add @fulldev/layout @fulldev/button @fulldev/section -y

To install the full component and block bundle:

npx shadcn@latest add @fulldev/blocks @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"
import {
  Layout,
  LayoutBody,
  LayoutHead,
  LayoutMain,
} from "@/components/ui/layout"
import { Section, SectionContainer } from "@/components/ui/section"
---

<Layout>
  <LayoutHead title="Astro + Fulldev UI" />
  <LayoutBody>
    <LayoutMain>
      <Section>
        <SectionContainer class="min-h-screen place-items-center text-center">
          <div class="grid max-w-xl gap-4">
            <h1 class="text-4xl font-semibold tracking-tight">
              Astro + Fulldev UI
            </h1>
            <p class="text-muted-foreground">
              A minimal Astro page using installed Fulldev UI source files.
            </p>
            <div>
              <Button href="/docs/">Get started</Button>
            </div>
          </div>
        </SectionContainer>
      </Section>
    </LayoutMain>
  </LayoutBody>
</Layout>

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

Use with shadcn/ui

Fulldev UI keeps Shadcn-style installation and composition where it fits Astro. You can use Fulldev UI for content-driven Astro pages and complete page sections, and still use shadcn/ui when a more interactive part of the project needs React.

Sidebar

Search