Systra Tools

A growing collection of production-ready React + Tailwind sections and elements, searchable by your coding agent over MCP.

Systra Tools is a growing library of 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.

The first six components in each category are free without an account or key. Premium unlocks the complete source library and additional media. In Claude, Premium can use your Systra account sign-in; in coding editors you can use a personal MCP key from https://systra.tools/mcp?utm_source=github_repository&utm_medium=referral&utm_campaign=mcp_directory.

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"
    }
  }
}

For optional Premium access, add "headers": { "Authorization": "Bearer YOUR_MCP_KEY" } to this server entry. No key is required to start free.

Claude Code

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

Lovable, Bolt, v0 and Replit

• Lovable: Connectors, then the Custom MCP card at the bottom. Paste https://systra.tools/api/mcp and click Add server.
• Bolt: Connectors (MCP), then Custom MCP server. Transport HTTP, authentication None, or API key for Premium.
• v0: Add MCP under MCP Connections or in the prompt field. No Auth, or Bearer Token with your Premium key.
• Replit: click the Add to Replit button above, or Integrations, MCP, Add MCP server with the same address.

VS Code, Windsurf and anything else that speaks MCP

Point an HTTP MCP server at https://systra.tools/api/mcp. That alone works for the free components; with a Premium key, send it as Authorization: Bearer <key>.

Your first result with Systra Tools

Once connected, paste this directly into Claude Code or another MCP-enabled coding agent with access to your React project:

Build a modern SaaS landing page in my React project using free Systra Tools sections. Find a hero, features, pricing and CTA with the Systra Tools MCP tools. Fetch the real TSX source, integrate it with Tailwind, and make the page responsive. If a section needs Premium, show a free alternative.

For a smaller first step:

Find a free Systra Tools hero section, explain the design and add its TSX source to my React project.

In Claude web chat without local file access, Claude can find and display components, but cannot directly edit the files on your computer.

Improve the design, not just the code

The MCP server gives your coding agent real UI components. The separate, free Systra Taste skills help it decide which composition works, review generic layouts, and preview distinct redesigns before replacing an existing interface.

npx skills@latest add systra-tools/systra-taste

Use systra-taste to build, systra-taste-review to critique, and systra-taste-repair to redesign. They work without a key; this M

... View full README on GitHub