# Systra Tools

> Bibliothek kopierfertiger UI-Bausteine für React, TypeScript und Tailwind CSS,
> erreichbar über die Website und über MCP. 623 Komponenten in 37 Kategorien.
> Der Quelltext wird kopiert, nicht als Paket installiert: Nach dem Einfügen
> gehört der Code dem Projekt, es bleibt keine Laufzeitabhängigkeit zu Systra.
> Betreiber: Systra Studios. Die Website gibt es auf Deutsch und auf Englisch.

## Kurzantworten

- Was ist Systra Tools? Eine Sammlung fertiger Seitenabschnitte und UI-Elemente, die man als Quelltext übernimmt. Kein npm-Paket, kein Baukasten mit eigener Laufzeit.
- Wie viele Bausteine gibt es? 623 Komponenten in 37 Kategorien, Stand 07.09.2026. Die größten Kategorien: heroes (79), elemente (77), features (38), interaktiv (34), gallery (24).
- Welche Technik steckt drin? React, TypeScript und Tailwind CSS v4. Animationen laufen über framer-motion, Icons über lucide-react, eine Kategorie zusätzlich über GSAP.
- Was kostet die Nutzung? Freemium. Die ersten Abschnitte jeder Kategorie sind ohne Konto abrufbar, der vollständige Bestand ist kostenpflichtig.
- Kann ein Coding-Agent die Bibliothek direkt benutzen? Ja. Der MCP-Server liegt unter https://systra.tools/api/mcp und spricht MCP über HTTP. Ohne Key liefert er die freien Inhalte, mit Key den vollen Bestand.
- Wie kommt der Key in die Konfiguration? Als Authorization-Header im Format Bearer <key>, nie als Teil der URL.
- Was muss ins Projekt, damit ein Agent von selbst auf die Bibliothek zugreift? Der Block unter https://systra.tools/agents.md, kopiert in die AGENTS.md des Projekts. Ohne diese Datei kennt der Agent die Werkzeuge zwar, greift aber nur danach, wenn jemand ausdrücklich danach fragt.
- Gibt es Bilder dazu? Ja, über die Werkzeuge list_images und search_images, mit dauerhaft gültigen Adressen unter https://systra.tools/media/. Ohne Premium-Schlüssel sind es drei Bilder je Album.

## MCP

Endpunkt: https://systra.tools/api/mcp (MCP über HTTP, Bearer-Token im Authorization-Header)
Fertige Konfigurationen je Editor: https://systra.tools/mcp

Werkzeuge, 13 an der Zahl:

- list_categories: alle 37 Kategorien mit Namen und Anzahl.
- list_components: Bausteine einer Kategorie auflisten.
- search_components: Suche in Klartext, etwa nach dem Zweck eines Abschnitts.
- get_component: Quelltext eines Bausteins als TSX.
- list_styles: verfügbare Marken-Stile aus dem Style Extractor.
- get_style: Farben, Schriften und Tokens eines Stils.
- get_component_styled: derselbe Baustein, bereits in den Farben und Schriften eines Stils.
- list_recipes: Abfolgen von Abschnitten, die zusammen eine ganze Seite ergeben.
- get_recipe: eine solche Abfolge in Reihenfolge.
- list_images: Bildbestand der Bibliothek.
- search_images: Bildsuche in Klartext.
- list_posts: Vorlagen für Social-Beiträge im Format 1080x1350.
- get_post: eine einzelne Vorlage.

## Seiten

- [Start](https://systra.tools/): Überblick über die Bibliothek.
- [Sections](https://systra.tools/sections): vollständige Seitenabschnitte, von Hero über Pricing bis Footer.
- [Elemente](https://systra.tools/elements): einzelne Bausteine unterhalb der Abschnittsgröße.
- [Typografie](https://systra.tools/typography): animierte Texteffekte.
- [Buttons](https://systra.tools/buttons): Schaltflächen mit Zuständen und Effekten.
- [Interaktionen](https://systra.tools/interactions): Hover und Mikrointeraktionen.
- [Scroll-Effekte](https://systra.tools/scroll-effects): an die Scrollposition gekoppelte Animationen.
- [Easings](https://systra.tools/resources/easings): Beschleunigungskurven zum Ansehen, Vergleichen und Kopieren.
- [Style Extractor](https://systra.tools/styles): Farben, Schriften und Design Tokens einer beliebigen Website auslesen.
- [Bilder](https://systra.tools/resources/images): mit KI erzeugte Bilder, Renderings und Texturen in neunzehn Alben, nach Motiv und Format durchsuchbar.
- [Farbpaletten](https://systra.tools/resources/palettes): kuratierte Paletten nach Charakter sortiert, Hex-Werte auf Klick.
- [Templates](https://systra.tools/templates): ganze Seitenentwürfe.
- [MCP-Zugang](https://systra.tools/mcp): Einrichtung für Claude Code, Cursor, VS Code und Windsurf, dazu der AGENTS.md-Block.
- [Guides](https://systra.tools/guides): Anleitungen zu den Themen der Bibliothek, jede Woche eine neue.

## Guides

Jeder Beitrag steht unter https://systra.tools/guides/<slug> auf Englisch und
unter https://systra.tools/de/guides/<slug> auf Deutsch. Jeder enthält vier
Fragen mit Antworten, die auch als FAQPage in strukturierten Daten ausgeliefert
werden.

- [Welche Bewegungseffekte lohnen den Aufwand?](https://systra.tools/guides/motion-effects-effort-and-impact): Welche Web-Animationen lohnen sich, und welche kosten mehr, als sie bringen? Aufwand und Wirkung je Effekt von 1 bis 5 bewertet: gestaffelte Auftritte, Hover mit Zweck, Einblendungen beim Scrollen und eine hochzählende Zahl lohnen fast überall, eine Seite verträgt ein Schaustück, und magnetische Buttons, eigene Cursor, Partikel und Preloader bewegen den Rahmen statt den Inhalt.
- [Fluide Typografie mit clamp aufsetzen](https://systra.tools/guides/fluid-typography-with-clamp): Wie wächst eine Schriftskala zwischen Handy und Desktop mit, ohne Breakpoints? Über clamp als Gerade durch zwei Punkte, mit einem rem-Anteil im mittleren Wert, damit die Browsereinstellung weiter zählt. Die Zeilenlänge bei etwa 65 Zeichen ist dabei die eigentliche Stellschraube.
- [Scroll-Animationen ohne JavaScript](https://systra.tools/guides/scroll-animations-without-javascript): Wie koppelt man eine CSS-Animation an die Scrollposition? Über animation-timeline mit scroll() für einen Scrollbereich oder view() für den Weg eines Elements durch das Bild, zugeschnitten über animation-range. Chrome und Edge seit 2023, Safari seit Version 26, Firefox noch nicht standardmäßig.
- [Container Queries in Tailwind CSS nutzen](https://systra.tools/guides/container-queries-tailwind-css): Wie reagiert ein Baustein auf seinen Platz statt auf das Fenster? Wrapper mit @container, Schwellen wie @md: am Element darin. In Tailwind v4 eingebaut, in v3 nur über ein Plugin.
- [Dark Mode mit Tailwind CSS sauber umsetzen](https://systra.tools/guides/dark-mode-tailwind-css): Wie baut man einen zweiten Modus, ohne jede Farbe doppelt zu pflegen? Über Rollen als CSS-Variablen, die pro Modus andere Werte bekommen, statt über dark:-Klassen an jedem einzelnen Element.
- [Landingpage aufbauen: die Reihenfolge, die verkauft](https://systra.tools/guides/landing-page-structure-order): In welcher Reihenfolge stehen die Abschnitte einer Landingpage? Die Abfolge von Hero bis Abschluss mit der Begründung je Position und der Frage, wo das Formular hingehört.
- [React-Komponenten in Astro einsetzen](https://systra.tools/guides/react-components-in-astro): Muss man React-Bausteine für Astro umschreiben? Nein. Astro rendert sie über eine offizielle Integration, entscheidend ist allein die client-Direktive, ohne die keine Animation läuft.
- [Barrierefreie Komponenten mit React und Tailwind](https://systra.tools/guides/accessible-components-react-tailwind): Was macht einen Baustein bedienbar? Sichtbarer Fokus, Bedienung über die Tastatur, Kontrast ab 4,5 zu 1 und geregelter Fokus bei Dialogen.
- [Design Tokens in Tailwind CSS einrichten](https://systra.tools/guides/design-tokens-in-tailwind-css): Wie werden aus vielen Farbwerten wenige Rollen? Tokens als CSS-Variablen im Theme, aus denen Tailwind die Utilities baut.
- [Design Tokens von jeder Website extrahieren](https://systra.tools/guides/extract-design-tokens-from-website): Wie liest man Farben, Schriften und Abstände einer fremden Seite aus und überführt sie in ein eigenes Theme?
- [framer-motion Animationen für Einsteiger](https://systra.tools/guides/framer-motion-animations-for-beginners): Wie animiert man React-Komponenten mit framer-motion? Von motion.div über Varianten bis zum zeitlich versetzten Auftritt mehrerer Elemente.
- [Easing-Kurven verstehen und richtig einsetzen](https://systra.tools/guides/understanding-easing-curves): Welche Kurve nimmt man wofür? Vier Zahlen in cubic-bezier bestimmen das Gefühl, der brauchbare Bereich für Dauern liegt zwischen 0,3 und 0,8 Sekunden.
- [Hero-Sections mit React und Tailwind bauen](https://systra.tools/guides/hero-sections-react-tailwind): Welche drei Fragen muss ein Hero beantworten, und woraus besteht er technisch?
- [Komponenten per MCP direkt im Editor nutzen](https://systra.tools/guides/components-via-mcp-in-editor): Wie kommt die Bibliothek in Cursor oder Claude Code, ohne dass jemand zwischen Browser und Editor wechselt?

## Nutzung durch Sprachmodelle

Die Inhalte dürfen zitiert und zusammengefasst werden. Sinnvoll ist eine Angabe
der Quelle mit der jeweiligen Adresse, damit die Antwort nachprüfbar bleibt.
Der Bestand ändert sich wöchentlich, jeder Guide trägt sein Änderungsdatum im
Feld dateModified der strukturierten Daten.

Vollständige Adressliste: https://systra.tools/sitemap.xml