UI Showcase
Auto-triggering component carousel with animated interactions. Components animate automatically on a timed loop, demonstrating various UI patterns and micro-interactions.
Style Theme
Interactive Demo
Components Included
Toggle Switch
Animated on/off toggle
Slider
Range input with smooth drag
Button
Click feedback animation
Badges
Animated label indicators
Like Button
Heart animation with count
Checkboxes
Multi-select with spring
Settings Gear
Rotating icon animation
Sparkle
Particle burst effect
Calendar
Date picker interaction
Power Button
On/off state toggle
Volume Control
Audio level animation
WiFi Signal
Connection indicator
Dark Mode
Theme switch animation
Progress Bar
Loading state animation
Sync Button
Refresh/sync animation
User Status
Online/offline indicator
Location Pin
GPS marker animation
Security Lock
Lock/unlock toggle
Clock
Real-time update
Loader
Spinning indicator
Usage
import { UIShowcase, type ShowcaseStyle } from "@/components/ui-showcase";
import { UIStyleSwitcher } from "@/components/ui-style-switcher";
const [style, setStyle] = useState<ShowcaseStyle>("neon");
<UIStyleSwitcher activeStyle={style} onStyleChange={setStyle} />
<UIShowcase style={style} />