Question 1

Was ist Systra Tools?

Accepted Answer

Eine kuratierte Sammlung kopierfertiger React- und Tailwind-Komponenten und Sections mit Animation. Du siehst jede Komponente live, kopierst den Quellcode und setzt ihn direkt ein, ohne Installation oder Konfiguration.

Question 2

Für wen ist die Library gedacht?

Accepted Answer

Für Designer, Entwicklerinnen, Agenturen und Teams, die schnell hochwertige Oberflächen bauen wollen. Auch Einsteiger kommen zurecht, weil jede Komponente eigenständig und ohne Setup nutzbar ist.

Question 3

Ist die Library eine Alternative zu Osmo Supply oder BYQ Supply?

Accepted Answer

Ja. Wie Osmo Supply und BYQ Supply bündeln wir sofort einsetzbare, animierte Bausteine an einem Ort. Unser Fokus liegt auf React und Tailwind mit framer-motion, kopierfertigem Code, einem Style Extractor für Design Tokens und einem MCP-Zugang, mit dem dein KI-Editor die Komponenten direkt einfügt.

Question 4

Welche Technik steckt dahinter?

Accepted Answer

React 19, Tailwind CSS v4 und framer-motion. Die Komponenten nutzen ausschließlich diese Bausteine plus lucide-react für Icons, damit du sie ohne fremde Abhängigkeiten übernehmen kannst.

Question 5

Brauche ich Erfahrung mit React?

Accepted Answer

Grundlagen reichen. Jede Komponente ist eine einzelne Datei mit einer Funktion darin, die du importierst und einsetzt. Wer Texte und Farben tauschen will, kommt ohne tiefes React-Wissen aus.

Question 6

Funktioniert das mit Next.js, Vite oder Remix?

Accepted Answer

Ja. Die Komponenten sind normales React ohne Framework-Bindung. In Next.js mit App Router gehört an den Anfang der Datei ein "use client", weil die Animationen im Browser laufen.

Question 7

Kann ich die Komponenten in Astro nutzen?

Accepted Answer

Ja, ohne sie umzuschreiben. Astro rendert React über die offizielle Integration mit: einmal "npx astro add react" ausführen, framer-motion und lucide-react installieren, und die kopierte Komponente in die .astro-Seite setzen. Wichtig ist die client-Direktive an der Einbindung, etwa client:visible. Ohne sie kommt nur HTML an und die Animation läuft nicht. Der Guide "React-Komponenten in Astro einsetzen" zeigt es Schritt für Schritt.

Question 8

Gibt es die Komponenten für Vue oder ohne Framework?

Accepted Answer

Aktuell nicht. Von 484 Komponenten bauen 456 auf framer-motion auf, und dessen Verhalten lässt sich nicht mechanisch nach Vue oder in reines JavaScript übersetzen. Eine zweite Fassung wäre eine eigene Library, keine Umwandlung. In Astro lassen sich React-Komponenten aber neben Vue-Komponenten in derselben Seite nutzen.

Question 9

Wie übernehme ich eine Komponente?

Accepted Answer

Du öffnest die Komponente, klickst auf Kopieren und fügst den Code in dein Projekt ein. Der Code ist vollständiges TSX und braucht nur react, framer-motion und lucide-react, die in den meisten Projekten ohnehin vorhanden sind.

Question 10

Kann ich statt Code einen Prompt kopieren?

Accepted Answer

Ja. Neben dem reinen Code kannst du einen fertigen Prompt für deinen KI-Editor oder Generator kopieren, etwa für Claude Code, Cursor, Windsurf, v0, Bolt, Lovable oder Replit.

Question 11

Kann ich die Komponenten anpassen?

Accepted Answer

Vollständig. Du bearbeitest den kopierten Code frei, tauschst Texte, Farben und Abstände aus und respektierst dabei deine eigenen Design-Tokens.

Question 12

Respektieren die Animationen reduzierte Bewegung?

Accepted Answer

Ja. Die Komponenten berücksichtigen prefers-reduced-motion und stellen bei Bedarf ruhige Varianten dar.

Question 13

Funktionieren die Komponenten im Dark Mode?

Accepted Answer

Die meisten ja. Sie nutzen entweder deine Theme-Variablen oder bringen bewusst feste Farben mit, wenn der Entwurf nur in einer Fassung funktioniert. In der Vorschau siehst du sofort, welche Fassung du bekommst.

Question 14

Wie steht es um Barrierefreiheit?

Accepted Answer

Die Komponenten nutzen semantische Elemente, sichtbare Fokusrahmen und beschriftete Bedienelemente. Prüfe trotzdem im eigenen Projekt: Kontrast hängt an deinen Farben, und Alternativtexte an deinen Bildern.

Question 15

Was ist der Unterschied zwischen Elementen und Sections?

Accepted Answer

Elemente sind einzelne Bausteine wie Buttons, Typografie oder Scroll-Effekte. Sections sind fertige Seitenabschnitte wie Hero Sections, Feature-Bereiche, Preistabellen oder Footer, die du direkt zu ganzen Seiten zusammensetzt.

Question 16

Welche Section-Kategorien gibt es?

Accepted Answer

Unter anderem Hero Sections, CTAs, Features, Bento, Process, Pricing, Vergleich, Stats, Trust, Team und Karriere, Blog, Galerie, Formulare, FAQ, Fehlerseiten und Footer.

Question 17

Stehen die neuesten Sections oben?

Accepted Answer

Ja. Neue Sections und Elemente erscheinen automatisch weiter oben, damit du frische Bausteine sofort findest.

Question 18

Sind die Sections responsiv?

Accepted Answer

Ja, jede Section ist von Handy bis Desktop gebaut, nicht nur verkleinert. In der Vorschau schaltest du oben zwischen Desktop, Tablet und Handy um und siehst dasselbe, was deine Besucher sehen.

Question 19

Kann ich daraus eine ganze Seite bauen?

Accepted Answer

Ja. Dafür gibt es zusätzlich fertige Templates, die mehrere Sections zu einer kompletten Seite verbinden. Du kannst sie als Ganzes übernehmen oder einzelne Abschnitte daraus tauschen.

Question 20

Was ist kostenlos nutzbar?

Accepted Answer

Du kannst die Library durchstöbern, Komponenten ansehen und die kuratierten Farbpaletten frei kopieren. Die Bild-Alben und Downloads sind Premium.

Question 21

Was schaltet Premium frei?

Accepted Answer

Premium gibt dir vollen Zugriff auf alle Komponenten und Sections, alle Bild-Alben, neue Bausteine bei jeder Erweiterung und den MCP-Zugang für deinen Editor.

Question 22

Welche Pakete gibt es?

Accepted Answer

Monatlich für 19 Euro, jährlich für 179 Euro und einmalig 449 Euro für den dauerhaften Zugang. Alle Preise verstehen sich inklusive Umsatzsteuer; mit gültiger USt-IdNr. zahlst du netto.

Question 23

Brauche ich ein Konto, um zu kaufen?

Accepted Answer

Nein. Der Checkout öffnet sich direkt auf der Seite, du gibst deine E-Mail-Adresse an und bezahlst. Das Konto legen wir danach automatisch mit dieser Adresse an und melden dich an. Falls das einmal nicht klappt, holst du dir auf der Willkommensseite einen Anmelde-Link.

Question 24

Kann ich widerrufen?

Accepted Answer

Premium ist ein digitaler Inhalt. Beim Kauf bestätigst du ausdrücklich, dass der Zugang sofort freigeschaltet wird, und verlierst damit das Widerrufsrecht. Ohne diese Bestätigung startet der Kauf nicht. Details stehen in der Widerrufsbelehrung.

Question 25

Gibt es ein Tageslimit?

Accepted Answer

Für den Style Extractor gibt es drei Analysen pro Tag, mit Premium zehn. Ansehen kannst du so viel du möchtest. Kopieren ist auf 30 Komponenten pro Tag und Konto begrenzt, damit niemand an einem Tag den ganzen Bestand abzieht.

Question 26

Darf ich die Komponenten in Kundenprojekten einsetzen?

Accepted Answer

Ja, in eigenen und in Kundenprojekten, kommerziell und ohne Nennung. Nicht erlaubt ist, die Sammlung selbst weiterzugeben oder als konkurrierende Bibliothek anzubieten.

Question 27

Was passiert, wenn mein Zugang ausläuft?

Accepted Answer

Alles, was du kopiert und eingebaut hast, bleibt deins und läuft weiter. Ohne aktiven Zugang siehst du wieder den kostenlosen Teil und bekommst keine neuen Komponenten mehr.

Question 28

Was ist der MCP-Zugang?

Accepted Answer

Über das Model Context Protocol verbindest du deinen KI-Editor direkt mit der Library. Dein Assistent durchsucht die Komponenten und fügt den Quellcode ohne manuelles Kopieren ein.

Question 29

Welche Editoren werden unterstützt?

Accepted Answer

Alle MCP-fähigen Umgebungen, darunter Claude Code, Cursor und VS Code. Du hinterlegst die Server-Adresse einmal in der Konfiguration.

Question 30

Werden meine Projektdaten übertragen?

Accepted Answer

Nein. Der Server bietet nur lesenden Zugriff auf die Komponenten. Es werden keine Inhalte aus deinem Projekt an die Library gesendet.

Question 31

Was mache ich, wenn der Editor die Verbindung nicht findet?

Accepted Answer

Prüfe zuerst, ob dein Schlüssel vollständig kopiert ist und der Editor nach dem Eintragen neu gestartet wurde. Bleibt es dabei, schreib uns kurz mit dem Namen deines Editors, dann sehen wir uns die Einrichtung an.

Question 32

Was macht der Style Extractor?

Accepted Answer

Du gibst eine URL ein und erhältst Farben, Typografie und Spacing der Seite als Design Tokens, aufbereitet als DESIGN.md oder tokens.json für dein Projekt.

Question 33

Wie viele Extraktionen sind möglich?

Accepted Answer

Drei Analysen pro Tag, mit Premium zehn. Wiederholte Analysen derselben URL werden für 24 Stunden aus dem Cache bedient und zählen nicht erneut.

Question 34

Was wird von der analysierten Seite gespeichert?

Accepted Answer

Das Ergebnis: Farben, Schriften, Design-Tokens, Name und Logo der Seite sowie eine Bildaufnahme als Vorschau. HTML- oder CSS-Quelltext speichern wir nicht. Dein Ergebnis ist privat und nur über den direkten Link erreichbar, bis wir es auf deinen Vorschlag hin für die Galerie freigeben.

Question 35

Kann ich jede Website analysieren?

Accepted Answer

Öffentlich erreichbare Seiten ja. Seiten hinter einer Anmeldung, hinter einem Bot-Schutz oder mit sehr strengen Sicherheitsregeln lassen sich nicht auslesen, dann kommt kein Ergebnis zurück.

Question 36

Was finde ich unter Ressourcen?

Accepted Answer

Kuratierte Bilder und Videos in Alben sowie fertige Farbpaletten. Bilder siehst du in einer Lightbox an und lädst sie herunter, Paletten kopierst du mit einem Klick.

Question 37

Kann ich nach Video oder Foto filtern?

Accepted Answer

Ja. Innerhalb eines Albums filterst du nach Fotos und Videos, sobald das Album beide Medientypen enthält.

Question 38

Darf ich die Bilder kommerziell verwenden?

Accepted Answer

Ja, in Websites und Kampagnen, die du oder deine Kundinnen betreiben. Nicht erlaubt ist der Weiterverkauf der Datei als solche, etwa in einer eigenen Bildersammlung.

Question 39

Brauche ich ein Konto?

Accepted Answer

Zum Stöbern nicht, und zum Kaufen auch nicht: das Konto entsteht nach der Zahlung automatisch. Für Favoriten und höhere Limits meldest du dich mit einem kostenlosen Konto an.

Question 40

Wie funktionieren Favoriten?

Accepted Answer

Angemeldet markierst du Komponenten als Favorit und findest sie jederzeit in deinem Konto wieder.

Question 41

Ich habe mein Passwort vergessen, was jetzt?

Accepted Answer

Auf der Anmeldeseite forderst du einen Link an, mit dem du ein neues Passwort setzt. Der Link geht an die Adresse, mit der du gekauft oder dich angemeldet hast.

Question 42

Wie lösche ich mein Konto?

Accepted Answer

Schreib uns eine kurze Nachricht von der Adresse deines Kontos. Wir löschen es samt Favoriten und bestätigen die Löschung.

Häufige Fragen

Häufig gefragt