Getting Started
Install dependencies and copy components.
npm install framer-motion lucide-react clsx tailwind-mergeimport { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Latest Components
StatCard
Animated number counter with trend indicators.
Revenue
$0
Users
0
DataTable
Sortable, filterable data table.
Name | Email | Role |
|---|---|---|
| Alex Johnson | alex@example.com | Admin |
| Sam Wilson | sam@example.com | User |
| Chris Lee | chris@example.com | Editor |
Timeline
Vertical event timeline.
Project Started
Initial planning
Design Complete
Finalized mockups
Development
In progress
Heatmap
GitHub-style contribution grid.
Sparkline
Compact inline chart.
Gauge
Circular progress indicator.
CPU
Memory
Input
Styled text input.
Select
Dropdown select.
Checkbox
Custom checkbox.
TagInput
Multi-tag entry.
DatePicker
Calendar date selector.
FileDropzone
Drag and drop file upload.
Drag & drop files here, or click to browse
Max file size: 10.0 MB
RangeSlider
Dual-handle range slider.
Range: 20 - 80
OTPInput
Verification code input.
Stepper
Multi-step progress indicator.
TabsAnimated
Tabs with sliding indicator.
Overview content
Features content
Pagination
Page navigation.
Skeleton
Loading placeholder.
Alert
Inline notification banners.
Heads up!
Success!
LoadingDots
Animated loading indicator.
StatusBadge
Online/offline indicator.
Card
Container with sections.
Notifications
You have 3 unread messages.
Card content area.
Accordion
Collapsible content panels.
Divider
Separator with optional label.
Collapsible
Single expandable section.
Sheet
Slide-in panel.
Popover
Click-triggered floating panel.
Tooltip
Hover tooltip.
Badge
Small status indicator.
Avatar
User profile image with fallback.
Switch
Toggle switch control.
BentoGridPRO
Apple-style feature grid.
Performance
Lightning fast
Modular
Copy-paste ready
Secure
Best practices
GlowCardPRO
Card with mouse-following glow effect.
Hover over me
Move your mouse to see the glow.
MagicCardPRO
Card with spotlight cursor effect.
Magic Card
Spotlight follows cursor.
MarqueePRO
Infinite scrolling animation.
NumberTickerPRO
Animated number counter.
Users
Uptime
TypewriterPRO
Typing animation effect.
Building |
AnimatedDockPRO
macOS-style magnification dock.