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

# Welcome to 21st

> Crafted React components and templates that fight AI slop — find them in the community, or generate new ones with 21st AI.

<Frame>
  <video autoPlay muted playsInline className="w-full rounded-2xl" src="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/videos/welcome-hero.mp4?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=65b929343d1eec2ed736ce435bf062f7" data-path="videos/welcome-hero.mp4" />
</Frame>

21st exists to keep the web free of **AI slop** — the same bland, generic-looking UI every AI tool spits out. Instead of generating from scratch every time, start from real, hand-crafted work:

* **Find it** — browse the [Marketplace](/community) for thousands of hand-crafted, open-source React/Tailwind components, themes, and templates from real designers and developers. Install, remix, or build on what already exists.
* **Or create it** — when nothing fits, use [21st AI](/ai) to generate UI from a prompt. Get several drafts at once, pick one, and refine it in natural language — from the web, your terminal ([CLI](/cli)), or right inside your editor and AI agent ([MCP](/ai/mcp)).

## Who is 21st for?

* **Frontend engineers** — install production-ready UI without leaving your editor, or generate it when nothing fits.
* **Designers** — turn ideas, references, and screenshots into real React components.
* **Product teams & founders** — draft and compare UI approaches before writing production code.

## Jump in

<CardGroup cols={2}>
  <Card title="Browse the Marketplace" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/boxes.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=91fd321e47c5361b702995034f85827c" href="/community" width="24" height="24" data-path="icons/nav/boxes.svg">
    Install high-quality React components, themes, and templates.
  </Card>

  <Card title="Generate with 21st AI" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/magic-chat.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=ef0988102f9e88724e737954f7bb1cab" href="/ai" width="24" height="24" data-path="icons/nav/magic-chat.svg">
    Describe UI, get multiple drafts, refine, and copy the code.
  </Card>
</CardGroup>

## Marketplace

<CardGroup cols={2}>
  <Card title="Overview" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/boxes.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=91fd321e47c5361b702995034f85827c" href="/community" width="24" height="24" data-path="icons/nav/boxes.svg">
    Discover and use open-source React components.
  </Card>

  <Card title="Components" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/grid.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=0d9b34d772968170c2388d8f2ce115be" href="/community/components" width="24" height="24" data-path="icons/nav/grid.svg">
    Browse production-ready React/Tailwind components.
  </Card>

  <Card title="Themes" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/themes.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=db61dc137b0a8e8afe97e340fcc8f736" href="/community/themes" width="24" height="24" data-path="icons/nav/themes.svg">
    Copy color schemes and typography.
  </Card>

  <Card title="Templates" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/templates.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=6b475aea1a3e7bc372a51af063335837" href="/community/templates" width="24" height="24" data-path="icons/nav/templates.svg">
    Ready-to-use website and app templates.
  </Card>

  <Card title="Publish Your Own" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/publish.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=00cece9a08f85007ae4acc6b78d59baa" href="/publishing/quick-start" width="24" height="24" data-path="icons/nav/publish.svg">
    Share components with the community or your team.
  </Card>
</CardGroup>

## 21st AI

<CardGroup cols={2}>
  <Card title="Overview" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/magic-chat.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=ef0988102f9e88724e737954f7bb1cab" href="/ai" width="24" height="24" data-path="icons/nav/magic-chat.svg">
    What 21st AI does and how generation works.
  </Card>

  <Card title="Generation Modes" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/variant.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=2e2f9dec42120dc3e5d68ca49deb203d" href="/ai/generation" width="24" height="24" data-path="icons/nav/variant.svg">
    Sketch (fast HTML/Tailwind) and Code (React) modes.
  </Card>

  <Card title="CLI" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/terminal.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=13207e3f98dae6e6cb5a5d8c5c81b297" href="/cli" width="24" height="24" data-path="icons/nav/terminal.svg">
    Search, install, generate, and publish from your terminal.
  </Card>

  <Card title="MCP" icon="https://mintcdn.com/21st/uLCB5kikM-FHl_zp/icons/nav/cable.svg?fit=max&auto=format&n=uLCB5kikM-FHl_zp&q=85&s=f782045c79c2ffa04e192209e563f025" href="/ai/mcp" width="24" height="24" data-path="icons/nav/cable.svg">
    Connect 21st to Cursor, Claude, VS Code, and more.
  </Card>

  <Card title="Pricing & Credits" icon="https://mintcdn.com/21st/LXNpmmWhmUb6emA7/icons/nav/credit-card.svg?fit=max&auto=format&n=LXNpmmWhmUb6emA7&q=85&s=6662de858da9a3da67671cc9e132e364" href="/ai/pricing" width="24" height="24" data-path="icons/nav/credit-card.svg">
    Plans, credits, and what each generation costs.
  </Card>
</CardGroup>

## Need Help?

* Join our [Discord community](https://discord.gg/Qx4rFunHfm)
* Follow us on [X/Twitter](https://x.com/21st_dev)
* Check out our [GitHub](https://github.com/serafimcloud/21st)
* Email support: [support@21st.dev](mailto:support@21st.dev)