Browse all component examples
Classic card with base shadow and no border by default
Glassmorphism effect with backdrop blur
Subtle gradient background
Modern mesh gradient effect
Strong blur effect for overlays
Card with colored glow shadow
Gradient Border
Eye-catching gradient border effect
Glow Border
Subtle glow border with shadow
Float Shadow
Hover me for float effect!
Light weight text for elegant headers
Normal weight for body text
Medium weight for slight emphasis
Semibold for moderate emphasis
Bold for strong emphasis
Animated underline link - Watch the underline slide in on hover
Always underlined with offset animation on hover
Semibold link for important navigation
Badge Sizes
Minimal alert without icon
Click the X button to dismiss this alert with a smooth fade-out animation!
Interactive dismissible alert with Alpine.js powered transitions
Error alerts can also be dismissed by the user
Animated Progress Set (loads on page refresh)
Modern Design Principles
Clean interfaces, smooth animations, and thoughtful color palettes.
Component Library
Pre-built components with modern styling and dark mode support.
Live Examples
Interactive demos showcasing all modern features and effects.
API Documentation
Complete reference for all components, props, and styling options.
This container has a glassmorphism effect with backdrop blur and subtle transparency.