Shadcn.io is not affiliated with official shadcn/ui
React UI Components
59+ production-ready UI components for React. Interactive elements, data displays, forms, navigation. Copy-paste into your Next.js project.
Standard UI components get you started. These get you finished. Every interaction polished, every edge case handled, every animation smooth. 59+ components across 18 categories, built on shadcn/ui and ready for production.
Pick a Category
Interactive
Mouse-tracking cards, animated modals, carousels, tooltips. Components that respond to user input in satisfying ways.
3D Card
Tilt on mouse move
Animated Modal
Smooth open/close
Animated Tooltip
Follow cursor
Apple Cards Carousel
Stacked card slider
Tabs
Animated tab switching
Spinner
Loading indicators
Code
Syntax highlighting, live editors, multi-file tabs. Everything for displaying and editing code.
Code Block
Syntax highlighting
Code Editor
macOS window style
Code Tabs
Multi-language examples
Sandbox
Live code playground
Data
Tables, kanban boards, gantt charts, lists. Components for displaying and organizing data.
Navigation
Navbars, docks, menus. Ways to move around your app.
Navbar
Sticky header nav
Dock
Icon navigation bar
macOS Dock
Magnifying icons
Limelight Nav
Spotlight indicator
Menu Dock
Expandable menu
Forms
Color pickers, comboboxes, file uploads, choice selectors. Input components beyond the basics.
Combobox
Searchable dropdown
Color Picker
Color selection
Dropzone
Drag-and-drop upload
Choicebox
Option cards
Layout
Announcements, banners, marquees, cursors. Page-level layout components.
Time
Calendars, date pickers, world clocks. Date and time display components.
Device Mocks
Phone and browser frames for showcasing your app.
Visualization
Video players, terminals, QR codes, status indicators. Ways to display content and state.
Video Player
Custom controls
Terminal
CLI with typing
QR Code
Theme-aware codes
Comparison
Before/after slider
Status
System health
Kbd
Keyboard shortcuts
Media
Avatars, pills, tags. Small display components for user content and metadata.
Image
Cropping and zooming for image handling.
Special Effects
Magnetic elements, animated beams, motion effects. Add visual polish.
Magnetic
Cursor attraction
Animated Beam
Connection lines
Motion Effect
Entrance animations
Pixel Image
Grid reveal
Finance
Credit cards and stock tickers for financial interfaces.
Buttons
Beyond the basic button. Animations, states, and special interactions.
Copy Button
Clipboard with feedback
Magnetic Button
Cursor pull
Ripple Button
Material ripple
Flip Button
3D flip effect
Liquid Button
Morphing shape
Theme Toggle
Dark mode switch
Text & Feedback
Counters, ratings, and text display components.
Using Components
Install with the CLI:
npx shadcn@latest add https://shadcn.io/r/code-block.jsonOr copy from the component page directly into your project. Each component is self-contained with all dependencies listed.
FAQ
Was this page helpful?
Sign in to leave feedback.