# 21st.dev — Component Marketplace for shadcn/ui-Based React Libraries

> The largest registry of shadcn/ui-compatible React components, blocks, and hooks that developers can search, preview, and install directly into projects.

## Install

Save in your project root:

# 21st.dev — Component Marketplace for shadcn/ui-Based React Libraries

## Quick Use
```bash
npx shadcn@latest add "https://21st.dev/r/component-name"
# Or browse at 21st.dev and copy install commands
```

## Introduction
21st.dev is an open-source marketplace that aggregates shadcn/ui-compatible React components from community authors. It provides a searchable registry where developers discover, preview, and install Tailwind-styled components directly into their projects using the shadcn CLI.

## What 21st.dev Does
- Aggregates thousands of shadcn/ui-compatible components from community contributors
- Provides live previews of each component with code inspection
- Generates shadcn CLI-compatible install commands for one-line setup
- Categorizes components by type: buttons, cards, forms, navigation, charts, and more
- Supports component versioning and dependency resolution

## Architecture Overview
The platform indexes component registries published by authors following the shadcn/ui component specification. Each component includes metadata, dependencies, and source code served through a compatible registry API. The frontend provides search, filtering, and interactive previews rendered in isolated sandboxes.

## Setup & Configuration
- No installation required for browsing; use the web interface to discover components
- Install components via npx shadcn@latest add with the 21st.dev registry URL
- Authors publish components by creating a registry following shadcn/ui conventions
- Configure your project's components.json to accept third-party registries
- Preview components in different themes (light/dark) before installing

## Key Features
- Largest open collection of shadcn/ui-compatible components and blocks
- One-command installation that respects your project's Tailwind config
- Interactive preview playground for testing component behavior
- Author profiles with component collections and usage statistics
- Hooks library alongside visual components for shared logic patterns

## Comparison with Similar Tools
- **shadcn/ui** — the official component set; 21st.dev extends it with community contributions
- **Aceternity UI** — provides animated components; 21st.dev aggregates from multiple such libraries
- **Magic UI** — single-author animated components; 21st.dev is a multi-author marketplace
- **npm** — general package registry; 21st.dev is curated specifically for copy-paste UI components
- **Storybook** — documents your own components; 21st.dev discovers external ones

## FAQ
**Q: Are components free to use?**
A: Yes. All components on 21st.dev are open source and free for commercial use.

**Q: How do I publish my own components?**
A: Create a shadcn/ui-compatible registry repository and submit it for indexing on the platform.

**Q: Do components work with other frameworks like Vue or Svelte?**
A: The marketplace focuses on React components; Vue and Svelte ecosystems have separate registries.

**Q: How are component quality and security ensured?**
A: Components are community-reviewed, and the platform scans for known vulnerabilities in dependencies.

## Sources
- https://github.com/serafimcloud/21st
- https://21st.dev

---
Source: https://tokrepo.com/en/workflows/asset-49fbc6ed
Author: AI Open Source