React Bits APIreactbits.dev ↗
Access React Bits UI components via API. Retrieve source code, TypeScript props, install commands, and metadata for every component in the registry.
What is the React Bits API?
The React Bits API exposes 7 endpoints covering every component in the reactbits.dev shadcn-style registry, including full source code files, extracted TypeScript prop definitions, and npx install commands. The get_component endpoint returns the complete file set for any component alongside its npm dependencies and parsed interface properties. list_all_components returns the full catalog grouped by title with available JS/TS and CSS/TW variant combinations.
No input parameters required.
curl -X GET 'https://api.parse.bot/scraper/d5e4f987-bba9-42d0-af9b-a6d73345e227/list_all_components' \ -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 reactbits-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.
from parse_apis.react_bits_component_api import ReactBits, ComponentSummary, Component, File, Prop, InstallInfo, Category, ComponentNotFound
client = ReactBits()
# List all categories
for category in client.categories.list():
print(category.name, category.slug)
# Search for components by query
for comp in client.componentsummaries.search(query="shuffle"):
print(comp.name, comp.description, comp.registry_name)
# Navigate from summary to full component detail
detail = comp.details()
print(detail.title, detail.dependencies)
# Get props for the component
for prop in detail.props():
print(prop.property, prop.type, prop.optional)
# Get source code files
for f in detail.source_code():
print(f.path, f.type)
# Get install command
info = detail.install_command()
print(info.npx, info.dependencies)
# Get a component directly by name
component = client.components.get(name="Shuffle-TS-CSS")
print(component.name, component.title, component.description)
# Construct a ComponentSummary and navigate to details
summary = client.componentsummary(name="AnimatedContent")
full = summary.details()
print(full.title, full.dependencies)
List all available UI components from the reactbits registry. Returns deduplicated components grouped by display name with their available variants (JS/TS, CSS/TW). Each entry carries just enough metadata for discovery; call get_component for full source and props.
No input parameters required.
{
"type": "object",
"fields": {
"total": "integer total number of unique components",
"components": "array of component summary objects with name, description, registry_name, and variants"
},
"sample": {
"data": {
"total": 133,
"components": [
{
"name": "Shuffle",
"variants": [
"Shuffle-JS-CSS",
"Shuffle-JS-TW",
"Shuffle-TS-CSS",
"Shuffle-TS-TW"
],
"description": "Animated text reveal where characters shuffle before settling.",
"registry_name": "Shuffle-TS-CSS"
}
]
},
"status": "success"
}
}About the React Bits API
What the API Covers
The React Bits API surfaces the full component catalog from reactbits.dev. list_all_components returns a deduplicated array of component objects — each with a name, description, registry_name, and a variants array indicating which flavor combinations (JavaScript or TypeScript, CSS or Tailwind) are available. The total field gives the count of unique components in the registry.
Fetching Individual Components
get_component accepts either a display name like 'Shuffle' or a fully qualified registry name with variant suffix like 'Shuffle-TS-CSS'. The response includes a files array of source code objects (each with path and content), a dependencies list of npm package strings, and an extracted_props array. Each prop object carries property, type (the TypeScript type string), optional (boolean), and description. If you only need one of these subsets, get_component_source_code returns just the files and get_component_props returns just the props array.
Search and Installation
search_components accepts a query string and matches it against component names, registry names, and descriptions, returning total and a results array in the same shape as the full listing. get_component_install_command returns the exact npx shadcn CLI command string and the dependencies array for any named component, making it straightforward to script automated scaffolding workflows.
Categories
get_all_categories returns the four top-level navigation categories from the site, each with a name and slug. These map to the organizational structure used on reactbits.dev and can be used to filter or annotate components in your own tooling.
The React Bits API is a managed, monitored endpoint for reactbits.dev — not a raw scraper you maintain. Every endpoint is automatically health-checked on a schedule, and when reactbits.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 reactbits.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 browser that queries
list_all_componentsand surfaces JS vs TS and CSS vs Tailwind variant availability. - Auto-generate documentation pages by pulling
extracted_propsfromget_component_propsinto a prop table renderer. - Script a project bootstrapper that calls
get_component_install_commandto generate the correctnpx shadcncommand for each selected component. - Run
search_componentsinside a CLI tool or IDE plugin to let developers find relevant components by keyword. - Audit npm dependency usage across the entire registry by iterating
get_componentfor each entry and aggregating thedependenciesfields. - Seed a design-system catalog by extracting source code via
get_component_source_codeand storing versioned snapshots. - Map
get_all_categoriesslugs to component metadata for a filtered component gallery UI.
| Tier | Price | Credits/month | Rate limit |
|---|---|---|---|
| Free | $0/mo | 100 | 5 req/min |
| Hobby | $30/mo | 1,000 | 20 req/min |
| Developer | $100/mo | 5,000 | 100 req/min |
One credit = one API call regardless of which marketplace API you call. Exceeding the rate limit returns a 429 response. Authenticate with the X-API-Key header.
Does React Bits have an official developer API?+
What does `get_component` return beyond source code?+
get_component returns a files array (each file has path and content), a dependencies array of npm package strings, and an extracted_props array. Each prop entry includes the property name, its TypeScript type, an optional boolean, and a description string parsed from the component's interface definition.Can I retrieve components filtered by category?+
get_all_categories lists the four navigation categories with name and slug, but the other endpoints do not accept a category filter parameter — they operate by component name or search query. You can fork this API on Parse and revise it to add category-filtered listing support.Does the API cover component preview or demo data?+
What is the difference between using a display name and a registry name in the `name` parameter?+
get_component accept either format. A display name like 'Shuffle' will resolve to the default variant. A full registry name like 'Shuffle-TS-CSS' pinpoints a specific TypeScript plus CSS variant. When a component has multiple variants, using the full registry name ensures you get the exact file set and props for that flavor.