A production-ready, token-based themeable design system for Astro. Build beautiful websites with runtime theme switching, semantic design tokens, and a comprehensive component library. Perfect for developers and agencies who need a flexible, extensible theming solution.
✨ Features
🎨 Token-Based Theme System - Semantic design tokens with runtime theme switching
🌓 Light/Dark Mode - Separate mode toggle for each color theme
🎭 Premium Themes - Aurora and Obsidian themes with custom typography
🧩 Component Library - Production-ready, theme-aware UI components
🚀 Astro - Lightning-fast static site generation
⚛️ React - Interactive components (ThemeSwitcher, ModeToggle)
🎨 Tailwind CSS v4 - Fully integrated with semantic tokens
📝 MDX - Write JSX in your Markdown documents
🎯 Astro Icons - Beautiful icon component library with Tabler icon set
📖 Tailwind Typography - Beautiful typography styles for markdown content
🛠️ Tech Stack
Integrations
@astrojs/react ^4.4.2 - React integration for Astro
@astrojs/mdx ^4.3.13 - MDX support for writing JSX in Markdown
@astrojs/sitemap ^3.3.2 - Automatic sitemap generation
astro-icon ^1.1.5 - Icon component library
Styling
tailwindcss ^4.1.18 - Utility-first CSS framework
@tailwindcss/vite ^4.1.18 - Tailwind CSS Vite plugin
@tailwindcss/typography ^0.5.19 - Typography plugin for beautiful markdown styling
sass ^1.97.2 - CSS preprocessor
UI & Animation
framer-motion ^12.24.7 - Production-ready motion library for React
react ^19.2.3 - UI library
react-dom ^19.2.3 - React DOM renderer
Icons
@iconify-json/tabler ^1.2.26 - Tabler icon set for astro-icon
🧩 Component Library
The project includes a comprehensive component library located in src/components/ui/:
Button - Multiple variants (primary, secondary, outline, ghost, etc.)
Card - Flexible card component with elevation variants
Badge - Status and label badges
Alert - Alert messages with variants
Input - Form input component
Modal - Modal dialog component
Toast - Toast notification system
DataTable - Sortable, searchable data table
PricingTable - Pricing plan display
Accordion - Collapsible content sections
Tabs - Tabbed content interface
Hero - Hero section component
Navbar - Navigation bar component
Footer - Footer component
All components are theme-aware and use semantic design tokens. See /components page for live examples.
