fulldev/ui

A shadcn-compatible component library built for Astro, designed for content-driven websites.

Features

Vanilla Astro Components — No framework dependencies, pure Astro components
shadcn Compatible — Uses the shadcn CLI and registry system for easy installation
Content-First — Built for content-driven websites with components like sections and tiles
100+ Components & Blocks — Ready-to-use UI components and pre-built page blocks
Tailwind CSS v4 — Styled with the latest Tailwind CSS
TypeScript — Full TypeScript support

Installation

Prerequisites

Node.js 18+
pnpm (recommended) or npm

Quick Start

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

npx create-astro@latest my-project --template with-tailwindcss --install --git
cd my-project

Configure TypeScript paths in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "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::

---
import "@/styles/global.css"
---

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

Add components:

npx shadcn@latest add @fulldev/button

Documentation

Visit ui.full.dev for complete documentation, component examples, and usage guides.

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Type check
pnpm check

Ui

Install / Use

README

fulldev/ui

Features

Installation

Prerequisites

Quick Start

Documentation

Development

Contributing

Community

License