Getting Started

Installation Guide

Add 200+ premium, accessible UI components to your Astro project in under 2 minutes. Zero runtime dependencies. MIT licensed — free forever.

Step 1

Prerequisites

You need an existing Astro project (v5.0+). If you don't have one yet, create it:

# 1. Create a new Astro project
npm create astro@latest my-project

# 2. Navigate into the project
cd my-project

# 3. Install the component library
npm install astro-component-kit

# 4. Start the dev server
npm run dev

Node.js 22.12+ required. Check your version with node --version. If you need to upgrade, visit nodejs.org.

Step 2

Install the library

Choose your preferred package manager:

npm install astro-component-kit

yarn add astro-component-kit

pnpm add astro-component-kit

Step 3 Optional

Install peer dependencies (if needed)

Most components work with zero extra dependencies. But if you plan to use charts or 3D components, install these:

# Only if you need chart components
npm install apexcharts

# Only if you need D/3D components
npm install three

Step 4

Import and use components

You have two import styles — import everything or import by category (recommended for better tree-shaking):

Option A: Root import (simple)

---
// Import all components
import { GlassButton, GlassCard, GlassNavbar, AnimatedInput } from 'astro-component-kit';
---

<GlassButton>Click me</GlassButton>
<GlassCard title="Welcome">Content</GlassCard>

Option B: Category imports (recommended)

---
// Import by category (recommended for smaller bundles)
import { GlassButton, GlowButton } from 'astro-component-kit/buttons';
import { GlassCard, ProfileCard } from 'astro-component-kit/cards';
import { AnimatedInput, OTPInput } from 'astro-component-kit/forms';
import { GlassAlert, Badge } from 'astro-component-kit/feedback';
import { GlassNavbar } from 'astro-component-kit/navigation';
import { GlassModal } from 'astro-component-kit/overlays';
import { MasonryGrid } from 'astro-component-kit/layout';
import { GradientHeading } from 'astro-component-kit/typography';
---

Import global design tokens

This gives you access to the unified color palette, spacing scale, typography, and border radii that all components use.

---
// Import global design tokens (optional but recommended)
import 'astro-component-kit/global.css';
---

Step 5

Build your first page

Here's a complete example putting everything together — a simple page with a navbar and a hero card:

---
import { GlassNavbar } from 'astro-component-kit/navigation';
import { GlassButton } from 'astro-component-kit/buttons';
import { GlassCard } from 'astro-component-kit/cards';
import 'astro-component-kit/global.css';
---

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Astro App</title>
</head>
<body>
  <GlassNavbar brand="MyApp" brandHref="/">
    <div slot="links">
      <a href="/features">Features</a>
      <a href="/pricing">Pricing</a>
    </div>
    <div slot="actions">
      <GlassButton size="sm">Get Started</GlassButton>
    </div>
  </GlassNavbar>

  <main style="max-width: 600px; margin: 4rem auto; padding: 0 1.5rem;">
    <GlassCard title="Welcome" subtitle="Your first component" padding="lg">
      <p>You just built your first page with Astro Components Kit!</p>
      <GlassButton variant="primary" style="margin-top: 1rem;">
        Explore More
      </GlassButton>
    </GlassCard>
  </main>
</body>
</html>

Quick reference

Task	Command / Import
Install library	`npm install astro-component-kit`
Install charts support	`npm install apexcharts`
Install 3D support	`npm install three`
Import all components	`import { ... } from 'astro-component-kit'`
Import by category	`import { ... } from 'astro-component-kit/buttons'`
Import design tokens	`import 'astro-component-kit/global.css'`
Browse all components	Component Docs →
Browse sections	Sections Showcase →

Ready to build?

Browse the full component library and start copying components into your project.

Browse Components View Sections