Free UI components with full source in HTML/CSS/JS and React: heroes, pricing, dashboards, forms.
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
Get metadata, the design specification, source references and the available implementations of one component by id.
Component id from search_components.
Concrete version or latest.
Pick your client. Values in capitals, like YOUR_TOKEN, are yours to fill in.
Run in a terminal
claude mcp add --transport http components https://dev.cards/mcp
Get metadata, the design specification, source references and the available implementations of one component by id.
| Argument | Type | Description |
|---|---|---|
| id* | string | Component id from search_components. |
| version | string | Concrete version or latest. |
{
"type": "object",
"required": [
"id"
],
"properties": {
"id": {
"type": "string",
"maxLength": 100,
"description": "Component id from search_components."
},
"version": {
"type": "string",
"maxLength": 40,
"description": "Concrete version or latest."
}
},
"additionalProperties": false
}Get the complete, pre-generated source files of one component for one tested target, with their SHA-256 hashes, setup instructions and pinned dependencies. Vanilla is javascript; React is typescript. Styling is always css.
| Argument | Type | Description |
|---|---|---|
| id* | string | Component id from search_components. |
| styling* | string | |
| version | string | Concrete version or latest. |
| language* | string | |
| framework* | string |
{
"type": "object",
"required": [
"id",
"framework",
"styling",
"language"
],
"properties": {
"id": {
"type": "string",
"maxLength": 100,
"description": "Component id from search_components."
},
"styling": {
"enum": [
"css"
],
"type": "string"
},
"version": {
"type": "string",
"maxLength": 40,
"description": "Concrete version or latest."
},
"language": {
"enum": [
"javascript",
"typescript"
],
"type": "string"
},
"framework": {
"enum": [
"vanilla",
"react"
],
"type": "string"
}
},
"additionalProperties": false
}Search the published Dev.cards UI components (hero sections, pricing tables, dashboards, forms, navigation and more) by text and implementation target. Returns compact metadata: id, version, name, category, description and targets. Leave q empty to list every component.
| Argument | Type | Description |
|---|---|---|
| q | string | Text in component id, name, description, category or design brief, e.g. "pricing" or "dashboard". |
| framework | string | Required implementation target. |
{
"type": "object",
"properties": {
"q": {
"type": "string",
"maxLength": 200,
"description": "Text in component id, name, description, category or design brief, e.g. \"pricing\" or \"dashboard\"."
},
"framework": {
"enum": [
"vanilla",
"react"
],
"type": "string",
"description": "Required implementation target."
}
},
"additionalProperties": false
}We read every tool's name, description and inputs the way the model will, looking for instructions hidden from you. A clean result means no warning signs, not a guarantee. Scanned Nov 12, 2026.