A modern collection of ready-to-use Astro components. Copy, paste, and customize with zero dependencies.
⚠️ MVP Notice: This library is currently in active development as a Minimum Viable Product. Features and APIs may change as we iterate toward a stable release.
Building modern web applications shouldn't mean wrestling with heavy dependencies, complex configurations, or being locked into rigid design systems. lunar-ui solves the pain points that developers face daily:
🚀 Rapid Prototyping: Skip the tedious setup phase and jump straight into building. Need a hero section? Add it in seconds, not hours.
🎨 Complete Design Control: Unlike traditional component libraries that force you into their design decisions, lunar-ui gives you the raw source code. Want to change that button color or adjust spacing? Just edit the code directly.
📦 Zero Dependency Hell: Tired of installing dozens of packages just to get a simple component working? lunar-ui components are self-contained and dependency-free, eliminating version conflicts and reducing bundle size.
⚡ Performance First: No runtime overhead, no JavaScript bloat. Since you get the actual component code, you can optimize it specifically for your use case.
🔧 Framework Alignment: Built specifically for Astro's component model and philosophy. No more trying to adapt React or Vue components that don't quite fit.
Whether you're a solo developer building a landing page, a startup needing rapid iteration, or an agency handling multiple client projects, lunar-ui empowers you to move fast without sacrificing quality or control.
Install the CLI globally for easier access:
npm install -g @primarix/lunar-uiThen use the shorter command:
lui add [component-name]Use npx without global installation:
npx @primarix/lunar-ui add [component-name]Components designed to make impactful first impressions and showcase your main content.
A clean, minimalist hero section perfect for landing pages.
lui add SimpleHero
# or
npx @primarix/lunar-ui add SimpleHeroAn engaging hero section with smooth animations and transitions.
lui add AnimatedHero
# or
npx @primarix/lunar-ui add AnimatedHeroA two-column hero layout ideal for content and media combinations.
lui add DualColumnHero
# or
npx @primarix/lunar-ui add DualColumnHeroVersatile components for organizing and presenting your content effectively.
A structured section component for about pages and company information.
lui add AboutSection
# or
npx @primarix/lunar-ui add AboutSectionA visual separator component to create clear divisions between content sections.
lui add SectionDivider
# or
npx @primarix/lunar-ui add SectionDividerEssential components for structuring your application's layout and navigation.
A mobile-friendly header component with navigation and responsive design.
lui add ResponsiveHeader
# or
npx @primarix/lunar-ui add ResponsiveHeaderConsistent heading components with proper typography hierarchy.
lui add Heading
# or
npx @primarix/lunar-ui add HeadingComponents for showcasing information, statistics, and visual content.
Card components perfect for displaying key metrics and statistics.
lui add StatsCards
# or
npx @primarix/lunar-ui add StatsCardsEnhanced stats cards with glowing effects and modern styling.
lui add GlowStatsCards
# or
npx @primarix/lunar-ui add GlowStatsCardsProfessional pricing table components for subscription services.
lui add PricingCards
# or
npx @primarix/lunar-ui add PricingCardsOrganized layouts for showcasing projects, services, and content collections.
A responsive grid layout for displaying project portfolios.
lui add ProjectsGrid
# or
npx @primarix/lunar-ui add ProjectsGridGrid component specifically designed for service offerings and features.
lui add ServicesGrid
# or
npx @primarix/lunar-ui add ServicesGridComponents to enhance your site's search engine optimization and metadata.
Essential meta tags and SEO optimization for your Astro pages.
lui add SEOHead
# or
npx @primarix/lunar-ui add SEOHead- Choose a Component: Browse the available components above
- Run the Command: Use either
lui add [component-name]or the npx version - Generated Folder: Components are automatically created in a
.generated/folder in your project - Customize: The component source code will be added to your project, ready for customization
- Style: Modify the component to match your design requirements
Each lunar-ui component is designed with these principles:
- Minimal: Clean, focused functionality without bloat
- Customizable: Full source code access for unlimited modifications
- Modern: Built with current web standards and best practices
- Accessible: Following accessibility guidelines where applicable
- Responsive: Mobile-first design approach
As this is an MVP in active development, we welcome feedback and contributions. Please check our GitHub repository for contribution guidelines and issue reporting.
- 🔄 Additional component variants
- 📱 Mobile-specific components
- 📚 Interactive documentation site
- 🔧 Advanced CLI features
⚠️ Important Notice
lunar-ui is an independent project and is not affiliated with the official Astro team.
