Button Patterns
Variants, sizes, states, and icons for buttons
Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
The AI-Native 
shadcn/ui
Component Library
for React Developers.
Essential UI components, advanced patterns, and AI integrations. Everything you need to build modern React applications.
Application & Admin UI
Fully coded interface for stunning dashboards, admin panels, and web apps.
Marketing & Presentation
Optimized for showcasing products and services, perfect for landing pages and marketing websites.
Ecommerce UI
Ready-to-use blocks for product listings, shopping carts, and checkout flows.
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.
Card Patterns
Flexible container patterns for content organization
Dialog Patterns
Modal dialogs for forms, confirmations, and alerts
Input Patterns
Text inputs with labels, validation, and states
Table Patterns
Data tables with sorting, filtering, and pagination
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
Terminal
$
$
|
Dock
macOS-style dock with smooth magnification effect
Credit Card
Interactive 3D credit card with flip animation
CARD
**** **** **** 1234
CARDHOLDER
JOHN DOE
EXPIRES
12/28
123
This card is property of the bank. If found, please return to the nearest branch.
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
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
Try it out.
Install your first component in seconds with the shadcn CLI.
Terminal
$npx shadcn add benefits