> ## Documentation Index
> Fetch the complete documentation index at: https://help.21st.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Browse, search, and use React components from the community

## Finding Components

### Search

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.

<Steps>
  <Step title="Open preview">
    Click any component card
  </Step>

  <Step title="Navigate">
    Use `←` and `→` arrow keys to browse through components
  </Step>

  <Step title="Quick actions">
    * Press `B` to bookmark
    * Press `⌘X` to copy AI prompt
    * Press `Enter` to open full page
  </Step>

  <Step title="Close">
    Press `Escape` or click outside
  </Step>
</Steps>

### 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.

<Tip>
  If you have text selected, the shortcut copies your selection instead. Deselect text to copy the full component.
</Tip>

### Copy AI Prompt

Press `⌘X` to copy an AI-ready prompt. Paste it into:

* [21st AI](/ai) to generate variations
* Cursor, Claude, or ChatGPT for customization
* Any AI coding tool (directly, or via [MCP](/ai/mcp))

### Install via CLI

For shadcn-compatible components:

```bash theme={null}
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:

<Card title="All Shortcuts" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/keyboard.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=f446ebdbef3cf6d27ed8a0020a79df67" href="/community/keyboard-shortcuts" width="24" height="24" data-path="icons/nav/keyboard.svg">
  Complete keyboard reference
</Card>