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
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
Ethical Ad
Ethical advertising display for sustainable monetization
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