Astro Theme Switcher

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.

Features

Theming

Built-in theme switcher with multiple color schemes. Switch between light, dark, and custom color themes with smooth transitions and persistent preferences across all pages.

View Transitions

Smooth page transitions powered by Astro's view transitions API. Enjoy seamless navigation with animated elements that persist across page changes and enhance user experience.

Components

Production-ready component library with Button, Card, Alert, Badge, Input, and more. All components are theme-aware and accessible by default for all users.

React

Component-based UI library for building interactive interfaces. Seamlessly integrated with Astro for dynamic components and enhanced user experiences.

Framer Motion

Production-ready motion library for React. Create smooth animations and delightful user experiences with spring physics and advanced transitions.

Tailwind CSS

Utility-first CSS framework for rapid UI development. Build beautiful, responsive designs with ease and no custom CSS needed for faster development.

Astro Icons

Beautiful icon component library for Astro. Access thousands of icons from popular icon sets with zero runtime overhead and easy integration.

Sass

CSS preprocessor with variables, mixins, and nesting. Use Sass alongside Tailwind for advanced styling needs and complex layouts with ease.

MDX

Write JSX in your Markdown documents. Perfect for blog posts, documentation, and content-rich pages with full component support and flexibility.

Ready to Get Started?

Start building beautiful, themeable websites with a production-ready design system. Perfect for developers and agencies.

Buy this template