21st API21st.dev ↗
Browse and filter UI components from the 21st.dev community marketplace. Returns component name, author, URL, CLI install command, and description.
What is the 21st API?
The 21st.dev API provides a single endpoint, list_components, that returns up to 200 UI components from the 21st.dev community marketplace in one call, with 5 response fields per component including the CLI install command and direct component URL. Filter results by tag slugs like input, search-bar, or search to narrow down the component type you need, and check total_count to see how many matching components exist in the catalog.
curl -X GET 'https://api.parse.bot/scraper/ba9096ec-d34e-467f-9eae-770f58b08ac4/list_components?limit=10&tag_slugs=input%2Csearch-bar%2Csearch-input%2Cprompt%2Cprompt-input%2Cai-chat-input%2Cchat-input' \ -H 'X-API-Key: $PARSE_API_KEY'
Typed, relational, agent-ready
A generated client with real types, enums, and the links between objects — the structure a flat JSON response can't carry. Autocompletes in your editor and reads cleanly to coding agents.
- Fully typed · autocompletes
- Objects link to objects
- Typed errors & pagination
Typed Python client. Set up the SDK in your uv project, then pull this API’s typed client:
uv add parse-sdk uv run parse init uv run parse add --marketplace 21st-dev-api
uv run parse add --marketplace pulls a pinned snapshot of this canonical API — it won’t change underneath you. To customize it, subscribe and swap to your own copy.
"""Walkthrough: discover UI components on 21st.dev by tag slug."""
from parse_apis.api_21st_dev_api import TwentyFirstDev, InputFormatInvalid
client = TwentyFirstDev()
# Browse recommended input components (default tags), capped at 5 results.
for component in client.components.list(limit=5):
print(component.name, "-", component.author)
print(" ", component.description[:90])
print(" Install:", component.install_command)
# Narrow to search-bar components specifically.
try:
result = client.components.list(tag_slugs="search-bar", limit=1).first()
except InputFormatInvalid as e:
print("Invalid tag_slugs filter:", e.message)
result = None
if result is not None:
print("\nFeatured search bar:", result.name)
print(" URL:", result.url)
print("\nexercised: components.list")
List UI components from the 21st.dev community marketplace filtered by tag slugs. Returns component metadata including name, author, direct URL, CLI install command, and description. Results are sorted by the site's recommendation algorithm. Useful for discovering input components, search bars, chat inputs, prompt containers, and other UI elements. The default tag_slugs cover input bars, search boxes, and prompt containers.
| Param | Type | Description |
|---|---|---|
| limit | integer | Maximum number of components to return. Clamped to 1-200. |
| tag_slugs | string | Comma-separated list of tag slugs to filter components by. Common tag slugs include: input, search-bar, search-input, search, prompt, prompt-input, ai-prompt, ai-chat-input, chat-input, number-input, pin-input, date-input, file-input, tag-input, clearable-input. |
{
"type": "object",
"fields": {
"has_more": "boolean indicating if more results exist beyond the limit",
"tag_slugs": "array of tag slug strings that were used for filtering",
"components": "array of component objects with component_name, author, component_url, install_command, and description",
"total_count": "integer total number of matching components available"
},
"sample": {
"has_more": false,
"tag_slugs": [
"input",
"search-bar",
"search-input",
"prompt",
"prompt-input",
"ai-chat-input",
"chat-input"
],
"components": [
{
"author": "preetsuthar17",
"description": "An international phone input component with country selection, smart validation, country-specific placeholders, and visual feedback for global phone numbers.",
"component_url": "https://21st.dev/@preetsuthar17/components/phone-input",
"component_name": "Phone Input",
"install_command": "npx @21st-dev/cli add preetsuthar17/phone-input"
},
{
"author": "easemize",
"description": "A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture.",
"component_url": "https://21st.dev/@easemize/components/ai-chat-input",
"component_name": "Ai chat input",
"install_command": "npx @21st-dev/cli add easemize/ai-chat-input"
}
],
"total_count": 287
}
}About the 21st API
What the API Returns
The list_components endpoint returns an array of component objects from the 21st.dev community marketplace. Each object includes component_name, author, component_url, install_command, and description. The install_command field is ready to paste directly into a terminal. Results are ordered by 21st.dev's own recommendation algorithm, so index position reflects the site's ranking, not alphabetical or recency order.
Filtering by Tag Slugs
The tag_slugs parameter accepts a comma-separated list of slugs. Known working values include input, search-bar, and search. The response echoes back the tag_slugs array that was applied, so you can confirm which filters were active. The has_more boolean tells you whether additional results exist beyond the requested limit, and total_count gives the full number of matching components regardless of limit.
Pagination and Limits
The limit parameter is clamped between 1 and 200. There is no offset or cursor parameter — the endpoint returns the top N results for the given filter. If has_more is true and you need all results, increasing limit toward 200 is the only way to capture more components in a single call.
The 21st API is a managed, monitored endpoint for 21st.dev — not a raw scraper you maintain. Every endpoint is automatically health-checked on a schedule, and when 21st.dev changes and a check fails, the API is automatically queued for repair and re-verified. It is built to keep working as the site underneath it changes.
This isn't an official 21st.dev API — it's an independent, maintained REST wrapper over public data. Where the source has no official API (or only a limited one), Parse gives you a stable contract over a source that never promised one, and keeps it current. Need a new endpoint or field? You can revise it yourself in plain English and the agent rebuilds it against the live site in minutes — contributing the change back to the shared API is free.
Will this API break when the source site changes?+
Is this an official API from the source site?+
Can I fix or extend this API myself if I need a new endpoint or field?+
What happens if I call an endpoint that has an issue?+
- Build a component discovery tool that filters 21st.dev results by tag slug and surfaces the
install_commandfor one-click copying - Generate a curated component catalog page by pulling
component_name,author, andcomponent_urlfor a given tag - Automate dependency audits by listing all input or search components available and comparing against ones already in use
- Populate a design system reference doc with
descriptionandcomponent_urlfields pulled for a specific tag - Track how many components match a tag slug over time using
total_countto monitor marketplace growth - Find authored components from a specific contributor by filtering results by
authorafter fetching from a relevant tag slug
| Tier | Price | Credits/month | Rate limit |
|---|---|---|---|
| Free | $0/mo | 200 | 5 req/min |
| Hobby | $30/mo | 1,000 | 20 req/min |
| Developer | $100/mo | 5,000 | 100 req/min |
| Team | $300/mo | 20,000 | 300 req/min |
| Company | $1,000/mo | 100,000 | 500 req/min |
Each endpoint has a fixed posted price per successful call — most fall between 1 and 10 credits — shown on this API's page before you run it. Exceeding the rate limit returns a 429 response. Authenticate with the X-API-Key header.
Does 21st.dev have an official developer API?+
What does the `install_command` field contain?+
Can I paginate through all components or retrieve components by a specific author?+
list_components endpoint supports tag-based filtering and a limit up to 200, but does not expose an offset, cursor, or author filter parameter. You can fork this API on Parse and revise it to add an author filter or pagination support.Does the API return component source code or preview images?+
component_name, author, component_url, install_command, and description. Source code and preview images are not included. You can fork this API on Parse and revise it to add a detail endpoint that fetches those fields from the component's URL.How current is the component data?+
published_at or updated_at field in the response to confirm freshness of individual entries.