shadcn/ui Components Demo

Showcasing the foundation for your custom component library

Buttons
Different button variants and sizes
Form Elements
Input fields and form controls
Interactive Elements
Buttons and interactive components

More interactive components will be added as needed.

Theme System
The color system adapts automatically to light and dark themes

Primary

Secondary

Accent

Muted

🎨 Modular Theme System
Color themes + Light/Dark modes - the scalable approach to theming

🌈 Available Color Themes

Default

Classic neutral theme with timeless appeal

Mossy Green

Nature-inspired with rich green tones

🌓 Light & Dark Variants

Each color theme automatically gets light and dark variants. Try switching between them using the theme toggle!

Light Mode

Bright, clean, and easy on the eyes

Dark Mode

Rich, immersive, and battery-friendly

🏗️ Architecture Benefits

  • • Modular: Color themes and modes are independent
  • • Scalable: Add new color themes without touching components
  • • Consistent: All themes follow the same semantic structure
  • • Maintainable: One color palette = automatic light/dark variants
Next Steps
Building your custom component library
  • • All shadcn/ui components are now available in @/components/ui/
  • • Theme switching is enabled with the ThemeToggle component
  • • Toast notifications are set up with Sonner
  • • CSS variables are configured for easy theme customization
  • • Modular themes with color + mode separation for maximum flexibility
  • • Easy expansion - add new color themes without touching components
  • • Ready to build custom components using these foundations