Skip to main content

​
Finding Components

Press ⌘K (Mac) or Ctrl+K (Windows) to open search. Type a component name like “button”, “hero”, or “pricing” to find what you need.

​
Browse by Category

Components are organized into two main groups: Marketing Blocks — Landing page sections like heroes, features, testimonials, pricing, footers, and calls to action. UI Components — Interface elements like buttons, inputs, cards, modals, tables, forms, and more. Open the sidebar or command menu to browse all categories.

​
Browse by Author

Click any author name to see all their published components. Follow your favorite creators to discover new work.

​
Viewing Components

​
Component Cards

Each card shows:
  • Live preview thumbnail
  • Component name and author
  • Category tags
Click a card to open the preview dialog for a quick look, or click through to the full component page.

​
Preview Dialog

The preview dialog lets you quickly browse components without leaving the listing.
1

Open preview

Click any component card
2

Navigate

Use ← and → arrow keys to browse through components
3

Quick actions

  • Press B to bookmark
  • Press ⌘X to copy AI prompt
  • Press Enter to open full page
4

Close

Press Escape or click outside

​
Component Page

The full component page shows:
  • Live preview — Interactive component in an iframe
  • Code view — Full source code with syntax highlighting
  • Author info — Who created it and their other components
  • Related components — Similar components you might like

​
Getting the Code

​
Copy Component Code

Press ⌘C (Mac) or Ctrl+C (Windows) on any component page to copy the full source code.
If you have text selected, the shortcut copies your selection instead. Deselect text to copy the full component.

​
Copy AI Prompt

Press ⌘X to copy an AI-ready prompt. Paste it into:
  • Canvas for visual editing
  • Cursor, Claude, or ChatGPT for customization
  • Any AI coding tool

​
Install via CLI

For shadcn-compatible components: 
npx shadcn@latest add "https://21st.dev/r/author/component-name"
This installs the component directly into your project with all dependencies.

​
Managing Favorites

​
Bookmark Components

Press B on any component to bookmark it. Access all bookmarks from Bookmarks in the sidebar.

​
Share Components

Press ⌘⇧C to copy the component link. Share it with your team or save it for later.

​
Keyboard Shortcuts

For a complete list of shortcuts when working with components, see:

All Shortcuts

Complete keyboard reference