Components

All Components

Explore our complete collection of beautiful, modern UI components. Each component is designed with attention to detail and comes with full code examples.

AI Input Components

Modern input fields designed for AI chat interfaces and messaging applications.

• AI Input 01 - Basic chat input with auto-resize functionality
• AI Input 02 - Advanced chat input with file upload support

View all AI Input components →

Alert Components

Beautiful notification and alert components for user feedback.

• Alert 01 - Simple information alert with icon
• Alert 02 - Interactive team invitation with actions

View all Alert components →

Button Components

A stunning collection of animated buttons with unique effects.

• Shimmer Button - Elegant shimmer effect on hover
• Neon Glow Button - Pulsating neon glow effect
• Glitch Button - Cyberpunk glitch color effects
• Liquid Button - Smooth liquid wave fill animation
• Magnetic Button - Interactive cursor-following effect
• Gradient Border Button - Rotating gradient border with glass effect
• 3D Moving Border Button - Continuously rotating gradient border

View all Button components →

Card Components

Beautiful animated cards with unique effects and interactions.

• Glass Card - Frosted glass with backdrop blur effect
• Expandable Card - Collapsible card with smooth animations
• Spotlight Card - Dynamic spotlight with color-changing effect
• Card Stack - Interactive stacked cards with cycle animation
• Shimmer Card - Animated gradient border shimmer effect

View all Card components →

GitHub Activity

Interactive GitHub contribution graph with beautiful animations and real-time data.

• GitHub Activity - Animated contribution graph with tooltips and custom themes

View GitHub Activity component →

Quick Start

1. Browse the component you need
2. Copy the code from the documentation
3. Paste it into your project
4. Customize as needed

Dependencies

Most components require these base dependencies:

npm install lucide-react clsx tailwind-merge

Some components with advanced animations also require:

npm install motion
# or if using older version
npm install framer-motion

Component Structure

All components follow a consistent structure:

• Self-contained - Each component is a standalone file
• Type-safe - Built with TypeScript
• Customizable - Easy to modify with Tailwind classes
• Accessible - Following best practices
• Dark mode - Built-in dark mode support

Need Help?

Each component page includes:

• Live preview
• Full source code
• Props documentation
• Usage examples
• Customization tips