👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
The AI-Native 
shadcn/ui Component Library
For React Developers
The ultimate shadcn/ui resource for React developers. Essential UI components, advanced patterns, and AI integrations. From buttons to AI chat interfaces - everything you need to build modern applications.
Explore our comprehensive collection of React components with TypeScript support
Discover AI-powered components and integrations for modern applications
Production-Ready shadcn/ui Patterns
Copy-paste ready patterns built with shadcn/ui components. Each pattern is a complete, production-ready implementation you can customize for your React applications.
Button Patterns
Variants, sizes, states, and icons for buttons
Card Patterns
Flexible container patterns for content organization
Card content with description and details
Dialog Patterns
Modal dialogs for forms, confirmations, and alerts
Dialog description explaining the action
Input Patterns
Text inputs with labels, validation, and states
Table Patterns
Data tables with sorting, filtering, and pagination
| Name | Status |
|---|---|
| Item 1 | Active |
| Item 2 | Pending |
| Item 3 | Complete |
Avatar Patterns
User profile avatars with images, initials, and fallbacks
WebGL Shader Effects
Stunning visual effects powered by WebGL shaders. Create immersive, GPU-accelerated animations and graphics for your React applications.
2D Noise Contours
Colorful topographic contour lines with noise patterns
Hexagon Grid Pattern
Dynamic hexagonal grid with animated pattern formations
Minimal Jigsaw
Clean geometric jigsaw puzzle patterns in motion
Truchet Kaleidoscope
Intricate kaleidoscopic patterns with rotating Truchet tiles
Smooth Noise Contours
Elegant contour lines flowing through noise fields
Monster Tunnel
Mesmerizing rotating tunnel with segmented geometry
Composable React UI Components
Our shadcn/ui components are designed to be fully composable so you can build, customize and extend them to your own needs with TypeScript support.
Terminal
Interactive terminal component with typing animations
Dock
macOS-style dock with smooth magnification effect
Credit Card
Interactive 3D credit card with flip animation
Image Zoom
Zoomable image with smooth modal transitions
Click to zoom
QR Code
Generate QR codes with customizable styling
Scan to visit shadcn.io
Color Picker
Advanced color selection with multiple formats
React Chart Components
Our chart components are built with Recharts and follow shadcn/ui design principles. Create stunning dashboards with interactive, responsive data visualizations for your React applications.
Bar Chart
Clean bar chart for data comparison
Line Chart
Smooth line chart for trends
Pie Chart
Donut chart for proportional data
Area Chart
Stacked area chart for volume over time
Radar Chart
Multi-axis chart for comparing multiple variables
Mixed Chart
Combined bar and line chart visualization
React Animation Components
Enhance your Next.js applications with captivating TypeScript animations and interactive effects. Add professional depth and engagement using our free shadcn/ui compatible visual components built with Tailwind CSS.
Magnetic
Magnetic hover effect that follows cursor movement
Animated Cursor
Custom animated cursor with interactive effects
Move your cursor here
Apple Hello Effect
Recreate Apple's iconic "hello" animation effect
Liquid Button
Button with fluid liquid animation on hover
Rolling Text
Text that rolls in with smooth animation
Shimmering Text
Text with animated shimmer effect
React Hooks for Modern Development
Custom React hooks that enhance your development workflow with TypeScript support. Each hook follows best practices for state management, performance, and memory leak prevention in Next.js applications.
useBoolean
Enhanced boolean state management with toggle methods
useCounter
Counter with increment, decrement, and reset functionality
useLocalStorage
Persist state in localStorage with serialization
useDebounceValue
Debounce values to prevent excessive updates
useHover
Track hover state with customizable delay
useCountdown
Countdown timer with play/pause controls
Get started with Shadcn.io
Install your first component in seconds with the shadcn CLI.
$npx shadcn add