Systra Tools

tools.systraPublished by systra.toolsOfficial publisherv1.0.0Updated Nov 2, 2026

Search and pull 500+ production-ready React + Tailwind sections and elements

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

Remote MCP server that lets a coding assistant search a library of React and Tailwind sections and pull copy-ready TSX source, brand styles, images and page…

What you can do
  • Browse and search the component library by category or keyword, then fetch the full React/TSX source of a section
  • List extracted brand styles and retrieve their design tokens, CSS variables and DESIGN.md, or get a component adapted to a style
  • List and search the AI-generated image library and get permanent URLs
  • List Instagram post templates and fetch one with its HTML file, export script and editing rules
  • List curated page recipes and fetch a recipe's section sequence with the source of every section, optionally in a brand style
When to use it
Useful when building landing pages or marketing sites in React and Tailwind and you want an assistant to drop in ready-made sections, match a real brand's colours and fonts, or assemble a full page from a curated recipe.
Requirements
A remote HTTP MCP endpoint; no local package. An Authorization bearer token is declared as required, though the README says a key is optional and without one only a free sample of components is available. A Premium key is created on the provider's site and supplied as SYSTRA_MCP_KEY in the environment.
Before you install
The bearer token is a credential: keep it out of version control, as the README itself warns. A Premium key is a paid subscription that unlocks the full library, images and recipes. Fetched component and recipe source is third-party code that should be reviewed before it is added to a project.

Installation

In SourceWeft

  1. Open Systra Tools in the dashboard and add it to a workspace.
  2. Connect Authorization token credentials. They are stored privately and never shown on public pages.
  3. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/tools.systra%2Fsystra-tools/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "systra-tools": {
      "type": "http",
      "url": "https://systra.tools/api/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_TOKEN>"
      }
    }
  }
}

README

[Systra Tools]

Systra Tools

620+ production-ready React + Tailwind sections and elements,
searchable by your coding agent over MCP.

[Add systra-tools to Cursor]

Systra Tools is a library of 620+ React and Tailwind sections and elements: heroes, pricing tables, bento grids, dashboards, footers and more. This repository connects it to your coding agent over MCP, so Claude, Cursor or VS Code can search the library and drop a section into your project as a single TSX file.

Every component imports only react, framer-motion and lucide-react and respects reduced motion. Six components can be pulled without a key. A Premium key from https://systra.tools/mcp opens the whole library, the image library and the page recipes.

Install

Cursor

Click the button above, or add the plugin from cursor.directory, or configure it by hand in ~/.cursor/mcp.json:

json
{  "mcpServers": {    "systra-tools": {      "url": "https://systra.tools/api/mcp",      "headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }    }  }}

Claude Code

/plugin marketplace add systra-tools/systra-tools-plugin/plugin install systra-tools@systra

VS 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

The key is optional. Without one the agent gets the free sample components. For the full library, create a Premium key at systra.tools/mcp and put it in the environment as SYSTRA_MCP_KEY. Do not commit the key.

What the agent gets

ToolWhat it does
list_categories25 categories with counts
list_components, search_componentsfind a section by intent
get_componentthe full source
list_recipes, get_recipean ordered page, 23 recipes
list_styles, get_style, get_component_styledthe same component in a real brand's colours and fonts
list_images, search_imagesimagery with permanent URLs
list_posts, get_postsocial 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.

License

The configuration in this repository is MIT licensed. The components you pull through the MCP server are licensed separately, see https://systra.tools/terms.

Source: README.md at commit 32b7db7

Tools

13

list_categories

Lists every category of Systra Tools with the number of components in it.

Takes no parameters.

list_components

Lists components of the library. Optionally filtered by category slug ('heros', 'forms', 'cta').

Parameterscategory

search_components

Searches components by a keyword in the name or the category and returns the matches.

Parametersqueryrequired

get_component

Returns the complete, copy-ready React/TSX source of a component by its name.

Parametersnamerequired

list_styles

Lists the brand styles extracted with the style extractor (colours and fonts of real websites) that can be applied to components.

Takes no parameters.

get_style

Returns every design token of an extracted brand style: colours, typography, CSS variables and the generated DESIGN.md.

Parametersslugrequired

get_component_styled

Returns a component together with the design tokens of a brand style and precise instructions for adapting it, so the component lands directly in your own brand look.

Parametersnamerequiredstylerequired

list_images

Lists the images of the Systra Tools media library (all AI-generated) with ready, permanently valid URLs to drop straight in. Optionally filtered by album and format, 100 per page.

Parameterspagealbumformat

search_images

Searches the media library (all images AI-generated) by keywords in the title, the tags, the file name or the album and returns ready URLs, 100 per page.

Parameterspagequeryrequired

list_posts

Lists the Instagram post templates of Systra Tools (1080 x 1350). Every template is a single HTML file that can be rebuilt and exported as an image or a video.

Parametersfamily

get_post

Returns a post template as a complete set of working instructions: the HTML file, the export script and the rules on what may be changed. With it the post can be rebuilt and rendered directly.

Parameterslangslugrequired

list_recipes

Lists curated page recipes: sensible sequences of sections for complete landing pages (SaaS, coaching, hotel and so on).

Takes no parameters.

get_recipe

Returns a page recipe: the sequence of sections with the purpose of each one and the complete source of every section. Optionally in the look of a brand style.

Parametersnamerequiredstyle

Version history

1
  1. v1.0.0LatestSep 16, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts