Skip to main content
The 21st Community is where developers share high-quality React and Tailwind CSS components. All components are open-source with MIT license — use them freely in any project.

​
What You’ll Find

Components — Production-ready React/Tailwind building blocks for interfaces. Screens — Real app UI screenshots from companies like Stripe, Linear, and Notion for inspiration and reference. Themes — Color palettes and typography extracted from beautiful websites that you can apply to your projects instantly.

​
Get Started

Browse Components

Find and copy components for your project

Explore Screens

Get inspired by real app designs

Discover Themes

Copy color schemes and typography

Keyboard Shortcuts

Navigate faster with hotkeys
Press ⌘K (Mac) or Ctrl+K (Windows) anywhere to open the command menu. Search components by name, browse categories, or jump to screens and themes.
Bookmark your favorites — Press B on any component or screen to save it. Access your bookmarks from the sidebar.

​
Using Components

Every component can be used in three ways:
  1. Copy Code — Press ⌘C to copy the full component code
  2. Copy AI Prompt — Press ⌘X to copy a prompt for Magic Chat or other AI tools
  3. Install via CLI — Use shadcn CLI for direct installation:
npx shadcn@latest add "https://21st.dev/r/author/component-name"

​
Top Authors

The community features components from the best open-source creators. Visit author profiles to see all their published work and follow your favorites.

Publish Your Own

Share your components with the community

Quality Guidelines

What makes a great component