Systra Tools
Search and pull 500+ production-ready React + Tailwind sections and elements
Install
Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).
claude mcp add --transport http systra-tools 'https://systra.tools/api/mcp' --header 'Authorization: <Bearer token. Create a key at https://systra.tools/mcp>'{
"mcpServers": {
"systra-tools": {
"type": "http",
"url": "https://systra.tools/api/mcp",
"headers": {
"Authorization": "<Bearer token. Create a key at https://systra.tools/mcp>"
}
}
}
}Documentation
From the project's README on GitHub, refreshed weekly. Links open on GitHub.
Systra Tools
620+ production-ready React + Tailwind sections and elements,
searchable by your coding agent over MCP.
Your AI can code. It just has no taste. This plugin gives it a source of finished UI instead of another purple gradient: 37 categories, 18 page recipes, and a style extractor that recolours any component to match a real brand. Everything is React, TypeScript and Tailwind with no runtime dependency, so once a component lands in your project it is your code.
Install
Cursor
Click the button above, or add the plugin from
cursor.directory, or configure it by hand in
~/.cursor/mcp.json:
{
"mcpServers": {
"systra-tools": {
"url": "https://systra.tools/api/mcp",
"headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }
}
}
}Claude Code
/plugin marketplace add roesmannamelie-alt/systra-tools-plugin
/plugin install systra-tools@systraVS Code, Windsurf and anything else that speaks MCP
Point an HTTP MCP server at https://systra.tools/api/mcp and send your key
as Authorization: Bearer <key>.
Your key
Create one at systra.tools/mcp and put it in the
environment as SYSTRA_MCP_KEY. A free account reaches a limited set of
components, full access needs Premium. Do not commit the key.
What the agent gets
| Tool | What it does |
|---|---|
list_categories | 37 categories with counts |
list_components, search_components | find a section by intent |
get_component | the full source |
list_recipes, get_recipe | an ordered page, 18 recipes |
list_styles, get_style, get_component_styled | the same component in a real brand's colours and fonts |
list_images, search_images | imagery with permanent URLs |
list_posts, get_post | social post templates |
Largest categories: elements (78), heroes (76), features (38), interaktiv (29), gallery (25), gsap (22), stats (22), trust (19), dashboard (18).
What is in this repository
A rule, two skills and the MCP configuration. That is all a plugin is. The component library itself lives behind the MCP server.
MIT for the configuration in this repository. The library is licensed separately, see systra.tools.
Frequently asked questions
What is Systra Tools?
Search and pull 500+ production-ready React + Tailwind sections and elements
How do I install Systra Tools?
It runs as a remote server. In Claude Code: claude mcp add --transport http systra-tools 'https://systra.tools/api/mcp' --header 'Authorization: <Bearer token. Create a key at https://systra.tools/mcp>'. For other clients, paste the JSON configuration from this page into their MCP settings.
Does Systra Tools need an API key?
Yes. It expects Authorization, which you set in its configuration.
Is Systra Tools open source?
Its code is public on GitHub, but the repository does not declare a standard license.
Who maintains Systra Tools?
It is published by roesmannamelie-alt. AI.tn lists it but does not maintain or endorse it.
From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.