Source
21st site
Read the primary source.
Reference illustration, not a screenshot of this source.
21st
Interface component library · UI
A library of over 10,000 React and Tailwind interface components (buttons, cards, menus, sections) made by design engineers, searchable from Claude through its own connector.
Use it for
Showing a believable product screen inside a motion-graphics film, or a React page that needs polished parts instead of improvised ones.
Choose something else for
Not for Studio pages or eR pages that follow the house design system, and not useful without React and Tailwind.
Give it
A description of the component you need
Get back
React and Tailwind component code
How it is operated
Website, command line and a Claude Code plugin that adds the 21st connector.
Used in
Availability
Provider capabilities and historical Studio notes are distinguished below. Current account access, credits and runtime readiness were not tested.
How charging works
Free to browse and copy; connector generations about 5 free a month, Pro about 20 USD a month.
Where processing happens
Hosted catalogue; the code you copy runs wherever you put it.
Language support
Interface text is whatever you write.
Use ready-made interface components
★★★☆☆ 3/5 for this task
Large, well-made catalogue that stops Claude inventing fake-looking buttons, but tied to React and Tailwind, while Studio and eR pages use their own design system.
Decision: Browse the free site for a film's product screens; add the connector only if React pages become regular work.
Limits and things to check
- React and Tailwind only.
- Generating new components beyond the free allowance is paid.
- Community components vary in quality: pick, don't trust.
Solves a real problem in AI-made product films: improvised interface parts look cheap. Remocn plays a similar role for Remotion animations.
Evidence
Official site and repository reviewed; not used in Studio work
Catalogue review: 2026-09-27. The evidence note identifies what was verified. This date does not imply a fresh tool test or verification of every linked source.
Source
21st MCP for coding agents
Read the primary source.
Reference illustration, not a screenshot of this source.
Source
21st MCP source code
Read the primary source.
Reference illustration, not a screenshot of this source.
