Browse all component examples
Toggle dark mode using the button in the sidebar to see how components adapt! (You can dismiss this message)
High contrast text on light backgrounds
Adjusted colors for dark backgrounds
Beautiful transparency with backdrop blur
Stronger blur for overlay effects
| Feature | Light Mode | Dark Mode |
|---|---|---|
| Background | White | Gray-900 |
| Text Color | Gray-900 | Gray-100 |
| Borders | Gray-200 | Gray-700 |
All alerts feature Alpine.js-powered dismiss functionality when the dismissible prop is set.
Info alert with adjusted colors for dark backgrounds - click X to dismiss
Success alert maintains readability in both modes - dismissible with smooth transitions
Warning alert with optimized contrast - try dismissing me!
Error alert stands out appropriately - interactive dismiss button included
Dark mode provides a comfortable viewing experience in low-light environments while reducing eye strain.
Implementation uses Tailwind's dark mode classes with proper color contrast ratios.
Always test color contrast, avoid pure black backgrounds, and ensure consistent theming.