Monthly revenue
+12.4%$84.2k
vs last month
Monthly revenue $48.2k+24%
Deploy succeeded Just now
View data
| Item | Value |
|---|---|
| Charts | 82% |
| Sections | 64% |
| Forms | 47% |
Midnight Build
Astro Kit · Lo-fi
1:28 3:45
ASTRO KIT COMPONENTS
v0.7.1Free open-source UI components for Astro. Zero dependencies. Copy, paste, ship.
$ npm install astro-component-kit Explore the Collection
Browse by category
Pick a category, copy the code, ship.
Buttons 22 components Forms 24 components Cards 22 components Feedback 22 components Navigation 23 components Layout 22 components Overlays 23 components Data Display 23 components Typography 24 components Charts & Stats 47 components E-commerce 27 components App & Dashboard 37 components Page Sections 132 sections
New · Complete templates
Not just components. Whole sites, ready to ship.
Templates assemble library components into complete, multi-page sites. Preview every page live, then import the whole thing with one line — or take only the pieces you need.
12 templates · E-commerce Store, E-commerce 2 Editorial
- pages
- 4
- components
- 32
- Light & dark
Coming next: SaaS landing · Dashboard · Blog
Why Astro Components Kit
Build faster with free Astro components
Stop reinventing the wheel. Production-ready UI building blocks designed for peak performance, WCAG AA accessibility, and aesthetic perfection — out of the box.
- Ship in minutes
Lightning-fast development
Copy-paste any component straight into your Astro project. No build config, no node_modules bloat — ship client and landing pages in minutes, not weeks.
- Ship speed
- 10×
- Setup
- 0 min
- Ready
- Astro 5
- Zero bloat
Zero runtime dependencies
Pure Astro + scoped vanilla CSS. Even the charts render to SVG at build time.
- Runtime JS
- 0 kB
- Lighthouse
- 100
- WCAG 2.2 AA
Accessible by default
Keyboard navigation, visible focus rings, ARIA where it matters and 4.5:1 contrast.
- Contrast
- ≥4.5:1
- Targets
- 44px
- Curated styles
Next-gen aesthetics
Glass, neon, neumorphic and dark-gold themes with fluid micro-interactions.
- Styles
- 6+
- Motion
- 60fps
- CSS tokens
Total customization
Typed props, slots and CSS custom properties — re-theme everything from one file.
- Tokenized
- 100%
- TypeScript
- Strict
- MIT · Free forever
A library that keeps growing
Production components, SVG charts and full page sections across 11 categories, maintained in the open and updated every week.
- Components
- 316
- Sections
- 132
- License
- MIT
Component Library
320+ production-ready Astro components
From buttons and cards to modals and forms — every component is crafted with attention to detail, performance, and user experience.
New Production Sections
Full-page layouts, ready to copy & paste
Beyond individual UI components — explore responsive landing templates: metrics dashboards, pricing, heroes, feature tabs, testimonials and integrations.
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.
Interaction lab
Don’t just look — play with them
Every tile is a live component. Move, hover, click and type: the micro-interactions ship with the code you copy.
Hardware Accelerated
Tilt me
3D perspective that follows your cursor with a soft glare.
ASTRO KIT 0.6.1
Too weak
ASTRO ZERO JS 320+ COMPONENTS TEMPLATES OPEN SOURCE MIT LICENSE ACCESSIBLE PERFORMANT
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