Lightning-fast development
Copy-paste any component directly into your Astro project. No build step, no configuration. Ship features in minutes instead of hours.
Stats
Overview
12.4K
Live
Pro
ASTRO KIT COMPONENTS
Premium open-source UI components for Astro. Zero dependencies. Copy, paste, ship.
$ npm install astro-component-kit Why Astro Components Kit
Build faster with premium Astro components
Stop reinventing the wheel. Astro Components Kit gives you production-ready UI components designed for performance, accessibility, and beautiful design — out of the box.
Zero dependencies
No heavy UI frameworks, no runtime overhead. Pure Astro components with minimal CSS and zero JavaScript unless you need interactivity.
Accessible by default
WCAG 2.1 AA compliant components built in. Keyboard navigation, ARIA attributes, and screen reader support — no extra work needed.
Beautiful design systems
Glass morphism, neumorphism, cyberpunk, shimmer effects — all cohesive design styles ready to match your brand identity.
Full customization
Every component exposes CSS custom properties and slots. Tweak colors, spacing, animations, and layout to make it yours.
Always up to date
Active community, regular releases, and new components added monthly. MIT licensed — free forever for personal and commercial use.
Component Library
120+ production-ready Astro components
From buttons and cards to modals and forms — every component is crafted with attention to detail, performance, and user experience.
Advantages
Why developers choose Astro Components Kit
01
Performance-first architecture
Every Astro component ships with zero client-side JavaScript by default. Your pages load instantly because components render to static HTML at build time. No hydration, no waterfalls, no layout shift.
02
Copy-paste workflow
No package manager overhead. Just copy the component source into your project, import it, and use it. Every component is self-contained with its own styles and markup.
03
SEO-friendly out of the box
Since components render server-side, search engines can crawl and index your content immediately. No waiting for JavaScript bundles to load. Semantic HTML structure built into every component.
04
Design system ready
CSS custom properties, consistent spacing scale, typography system, and color palette — everything is pre-configured. Customize once, apply everywhere.
05
Open source & MIT licensed
Free for personal and commercial use. Contribute components, report bugs, or fork the entire library. Built by developers, for developers.
Interactions
Crafted with delightful micro-interactions
Every hover state, transition, and animation is carefully tuned to feel responsive and alive. No janky animations — just smooth, hardware-accelerated CSS.
ASTRO ZERO JS 120+ COMPONENTS OPEN SOURCE MIT LICENSE ACCESSIBLE PERFORMANT ASTRO ZERO JS 120+ COMPONENTS OPEN SOURCE MIT LICENSE ACCESSIBLE PERFORMANT
Categories
Browse by category
Buttons
Interactive button components with premium styles and animations.
Forms
Form elements with clean animations and validation states.
Cards
Versatile card containers for content display.
Feedback
Badges, alerts, and notification components.
Navigation
Navbars, tabs, breadcrumbs and navigation patterns.
Layout
Grids, containers, and structural sections.
Overlays
Modals, drawers, and popovers.
Data Display
Stats, tables, and visualization elements.
Typography
Headings and text patterns.
Charts
Premium data visualization and analytics charts.
Sections
Complete page sections: heroes, features, pricing, CTAs, and more.
Get Started
Install in seconds
Add astro-component-kit to your project with a single command.
$ npm install astro-component-kit Then import any component and start building.
Ready to build something beautiful?
Open source and free forever. Just copy and paste into your Astro project.
Get Started