A shadcn-compatible set of components built for Astro, designed for content-driven websites.
- 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
- Node.js 22.12.0+
- pnpm 10+
- 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.cssinto your project, 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/buttonVisit ui.full.dev for complete documentation, component examples, and usage guides.
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm build:preview
# Type check
pnpm checkWe welcome contributions! Please see CONTRIBUTING.md for guidelines.
- Discord — Join our Discord server to share your work and get support
- Issues — Report bugs and request features on GitHub Issues
MIT License — Copyright (c) 2024–present Fulldev