Direct answer
21st.dev is a marketplace and toolset for finding, installing, generating, and publishing interface components. Its workflow includes a website catalog, a unified command-line tool, an MCP endpoint for coding agents, and private team libraries. A separate 21st AI product generates visual directions. Developers receive editable component code, but each install still needs license, dependency, accessibility, security, and maintenance review.
In short
Use 21st.dev when you want searchable interface references and source code inside a React workflow. Treat it as an input to engineering, not proof that a component is production-ready.
- Browse components, themes, templates, and logos on the site or search them through the current CLI and MCP endpoint.
- The free path currently includes search and two component installs per day. Paid plans remove install limits, while AI generation uses separate credits.
- The former Magic MCP package now acts as a compatibility proxy. New setups should follow the unified 21st CLI and MCP instructions.
- Installed code and dependencies enter your repository. Review every file, package, license, visual state, and update path before merging.
- Marketplace authors keep rights in their work, while 21st owns its previews and curation. Do not assume one blanket license covers every asset.
- Run a small trial that tests search quality, code fit, keyboard use, responsive behavior, dependency cost, and safe agent permissions.
What is 21st.dev?
21st calls its current product a living library of interfaces. The catalog covers components, themes, and templates. Its agent page adds search, code installation, UI generation, publishing, and library management through a CLI or any compatible MCP client.
These surfaces solve different problems. The marketplace supports discovery. The CLI and MCP bring code into a repository. Libraries expose approved team components. 21st AI creates and compares visual directions. The broader Agents platform supplies hosted infrastructure for agent products. Confirm which surface a review describes before using its claims.
How should you use the component workflow?
A reliable workflow separates discovery from approval. Search for the interface role you need, inspect several candidates, retrieve one into a branch, adapt it to your system, and test it before merge.
- Define the job, supported states, responsive rules, and accessibility requirements before searching.
- Compare structure and behavior across several components instead of choosing the most dramatic preview.
- Inspect the component page, author information, source, dependencies, and any stated license or usage limits.
- Install into an isolated branch. Read the file and package changes before running the result.
- Replace local styling with your tokens and reuse existing primitives when they already solve the same job.
- Test keyboard order, focus visibility, labels, reduced motion, contrast, overflow, loading, error, empty, and narrow-screen states.
- Record the component source, local owner, dependency decisions, and update policy before merging.
Follow the current first-party CLI and MCP setup instead of an old Magic tutorial.
Did 21st Magic MCP change?
The integration changed. The official Magic MCP repository says the old package was replaced by the unified 21st MCP. It remains a compatibility proxy for older configurations. New setups use the 21st CLI or the HTTP endpoint at 21st.dev/api/mcp. Old Magic keys were reset, so a current key is required.
The July 2026 launch article says one CLI now covers authentication, discovery, retrieval, generation, publishing, and profile management. Its client initializer supports Claude, Cursor, Codex, VS Code, Windsurf, and generic MCP clients. Inspect the generated configuration and keep API keys out of source control.
See the first-party explanation of the unified CLI, MCP endpoint, and client setup.
What does 21st AI add?
21st AI is an optional generation surface. Its launch article describes sending one brief to several models and comparing anonymous visual takes. A user can refine a selected direction and hand a structured prompt to a coding agent. Sketch mode uses disposable HTML previews, while Code mode is listed as a paid AI feature.
A visual take is design exploration, not finished product code. Check the chosen direction against real content, user tasks, brand tokens, responsive behavior, accessibility, and implementation constraints. A team should preserve the design decision and rebuild it with owned conventions.
See how 21st describes its multi-model generation and agent handoff.
How much does 21st.dev cost?
As checked on 11 August 2026, search is free and signed-in users receive two component installs per day. The yearly prices shown are 6 US dollars monthly for Builder, 15 dollars monthly for Builder plus AI, and 7.50 dollars per seat monthly for Team. Quarterly totals differ.
Builder removes marketplace install limits but has no monthly AI credits. Builder plus AI includes 500 to 2,000 monthly credits, depending on the selected option. Extra 100-credit packs cost 5 dollars and roll over. Monthly plan credits expire at reset. Payments are non-refundable except where law requires otherwise.
Confirm the live billing period, credit amount, seat count, and feature table before paying.
Can you use and own the component code?
The answer depends on the specific material. Current terms say marketplace code and content belong to their respective authors and 21st. The same terms give access through the official platform and restrict scraping, automated collection, unapproved redistribution, model training, and reuse of marketplace previews or metadata.
Installing source does not transfer rights in 21st's demos, screenshots, videos, or curation. It also does not erase an author's license or a package dependency's license. Keep the original component URL, inspect every applicable license, and ask counsel when commercial rights are unclear.
Check the current marketplace rights, prohibited-use, billing, and service terms.
When do private component libraries help?
Private libraries help when an agent should reuse approved internal patterns instead of inventing each screen. 21st lets people publish public, unlisted, or private components in personal or team scopes. Installed code remains readable and version-controlled in the receiving project.
A library only stays useful if ownership is clear. Assign maintainers, require review before publication, protect team keys, remove stale entries, and document compatible framework and token versions. Private visibility controls access; it does not replace repository review or dependency scanning.
Review the official publishing, visibility, team-scope, and installation workflow.
What security and privacy checks matter?
An agent that can install code can change files and add packages. Limit its repository access, review diffs, lock dependencies, run scans, and test the resulting bundle. Store the 21st API key in an environment secret. The terms say keys should not appear in client code, public repositories, or any context that end users can read.
The privacy policy lists account, uploaded content, usage, device, and diagnostic data. Agent execution data can include prompts, responses, traces, history, and run metadata. Listed subprocessors cover hosting, storage, authentication, payments, sandboxes, AI models, analytics, and communications. The policy says customer prompts are not used to train 21st models without explicit consent.
21st published a February 2026 database-defacement incident review. It attributes the attack to permissive row-level security and an unused GraphQL endpoint. The report says public records and stored code pointers were altered, while API keys and user credentials were not leaked. It also describes restoration, GraphQL removal, policy fixes, and verification. Include this history in vendor review without treating an old incident as proof of current insecurity.
Read 21st's incident timeline, root cause, impact, fixes, and post-fix verification.
How does 21st.dev compare with alternatives?
Choose by workflow rather than screenshot style. A registry is strongest when you want many source-level references. A maintained UI kit is stronger when you want one governed API. A visual generator is useful for fast directions, while a design system is necessary for lasting consistency.
- Choose 21st.dev for catalog search, shadcn-style source retrieval, agent access, and public or private component publishing.
- Choose a maintained component library when stable APIs, coordinated releases, documentation, and support matter more than visual variety.
- Choose an animation-focused library when expressive marketing effects are the main requirement and your team can own performance and accessibility.
- Choose a generator when the team needs rapid visual exploration, then rebuild the selected direction within the real system.
- Use your own registry when approved patterns, controlled access, audit history, and internal maintenance are the central requirements.
A practical 21st.dev evaluation
Test one representative component before choosing a plan. Pick a form, dialog, or navigation pattern with real interaction states. Search through the site and your intended agent client, install it into a temporary branch, and record every file and dependency change.
- Measure whether search returns relevant structures instead of only attractive previews.
- Check source clarity, package weight, framework assumptions, browser behavior, and license evidence.
- Adapt colors, typography, spacing, radius, motion, and content without creating one-off tokens.
- Test keyboard, screen reader, contrast, zoom, reduced motion, touch, narrow screens, errors, and long content.
- Run lint, type checks, tests, dependency review, and a production build.
- Estimate maintenance ownership and compare saved time with plan cost and review effort.
Use Better Design's interface guidance to review an installed or generated component.
Frequently asked questions
Browsing and search are free, and the current site gives signed-in users two component installs per day. Unlimited installs and AI generation require the relevant paid plan or credits.
It does. The first-party setup page includes Codex among its supported clients. It provides a configuration path for the shared MCP endpoint and uses an environment variable for the API token.
No for a new setup. The official repository says Magic MCP is now a compatibility proxy. Follow the unified 21st CLI and MCP documentation and create a current API key.
Do not assume so from a preview. Review the source, dependencies, rights, accessibility, responsive behavior, security, performance, content states, and maintenance fit in your actual product.
Teams can publish private components. Current library documentation supports personal and team scopes. Team members need authorized keys, and the organization should still maintain its own review and removal process.