Question 1

What is Systra Tools?

Accepted Answer

A curated collection of copy-ready React and Tailwind components and sections with animation. You see every component live, copy the source code and drop it straight in, with no installation or configuration.

Question 2

Who is the library for?

Accepted Answer

For designers, developers, agencies and teams who want to build high-quality interfaces fast. Beginners get along too, because every component works on its own without any setup.

Question 3

Is the library an alternative to Osmo Supply or BYQ Supply?

Accepted Answer

Yes. Like Osmo Supply and BYQ Supply, we gather ready-to-use animated building blocks in one place. Our focus is React and Tailwind with framer-motion, copy-ready code, a Style Extractor for design tokens and an MCP connection that lets your AI editor insert components directly.

Question 4

What technology is behind it?

Accepted Answer

React 19, Tailwind CSS v4 and framer-motion. The components use only these building blocks plus lucide-react for icons, so you can adopt them without any extra dependencies.

Question 5

Do I need React experience?

Accepted Answer

Basics are enough. Every component is a single file with one function in it that you import and use. If you only want to swap text and colors, you get by without deep React knowledge.

Question 6

Does this work with Next.js, Vite or Remix?

Accepted Answer

Yes. The components are plain React with no framework binding. In Next.js with the App Router put "use client" at the top of the file, because the animations run in the browser.

Question 7

Can I use the components in Astro?

Accepted Answer

Yes, without rewriting them. Astro renders React through the official integration: run "npx astro add react" once, install framer-motion and lucide-react, then place the copied component in your .astro page. What matters is the client directive where you include it, for example client:visible. Without it only HTML arrives and the animation never runs. The guide "Use React components in Astro" walks through it step by step.

Question 8

Are the components available for Vue or without a framework?

Accepted Answer

Not at the moment. Of 484 components, 456 build on framer-motion, and its behaviour cannot be translated mechanically to Vue or plain JavaScript. A second version would be its own library, not a conversion. In Astro you can however use React components next to Vue components on the same page.

Question 9

How do I use a component?

Accepted Answer

Open the component, click copy and paste the code into your project. The code is complete TSX and needs only react, framer-motion and lucide-react, which most projects already have.

Question 10

Can I copy a prompt instead of code?

Accepted Answer

Yes. Alongside the plain code you can copy a ready-made prompt for your AI editor or generator, for example Claude Code, Cursor, Windsurf, v0, Bolt, Lovable or Replit.

Question 11

Can I customize the components?

Accepted Answer

Fully. You edit the copied code freely, swap text, colors and spacing and stay true to your own design tokens.

Question 12

Do the animations respect reduced motion?

Accepted Answer

Yes. The components honor prefers-reduced-motion and show calm variants when needed.

Question 13

Do the components work in dark mode?

Accepted Answer

Most of them do. They either use your theme variables or deliberately carry fixed colors when the design only works in one version. The preview shows you right away which version you get.

Question 14

What about accessibility?

Accepted Answer

The components use semantic elements, visible focus rings and labelled controls. Still check in your own project: contrast depends on your colors, and alt text on your images.

Question 15

What is the difference between elements and sections?

Accepted Answer

Elements are individual building blocks like buttons, typography or scroll effects. Sections are ready-made page sections like heroes, feature areas, pricing tables or footers that you assemble straight into full pages.

Question 16

Which section categories are there?

Accepted Answer

Among others heroes, CTAs, features, bento, process, pricing, comparison, stats, trust, team, careers, blog, gallery, forms, FAQ, error pages and footers.

Question 17

Are the newest sections shown first?

Accepted Answer

Yes. New sections and elements automatically move to the top so you find fresh building blocks right away.

Question 18

Are the sections responsive?

Accepted Answer

Yes, every section is built from phone to desktop, not just scaled down. In the preview you switch between desktop, tablet and phone at the top and see exactly what your visitors see.

Question 19

Can I build a whole page from these?

Accepted Answer

Yes. There are also ready-made templates that combine several sections into a complete page. You can take one as a whole or swap individual sections in it.

Question 20

What is free to use?

Accepted Answer

You can browse the library, view components and freely copy the curated color palettes. The image albums and downloads are Premium.

Question 21

What does Premium unlock?

Accepted Answer

Premium gives you full access to all components and sections, all image albums, new building blocks with every update and the MCP connection for your editor.

Question 22

Which plans are there?

Accepted Answer

Monthly at 19 euros, yearly at 179 euros and a one-time 449 euros for permanent access. All prices include VAT; with a valid VAT ID you pay the net price.

Question 23

Do I need an account to buy?

Accepted Answer

No. The checkout opens right on the page, you enter your email address and pay. We create the account with that address afterwards and sign you in. If that does not work, you can get a sign-in link on the welcome page.

Question 24

Can I withdraw?

Accepted Answer

Premium is digital content. At checkout you expressly confirm that access is unlocked immediately, which ends the right of withdrawal. Without that confirmation the purchase does not start. The details are in the withdrawal policy.

Question 25

Is there a daily limit?

Accepted Answer

The Style Extractor allows three analyses a day, ten with Premium. You can browse as much as you like. Copying is capped at 30 components per day and account, so nobody pulls the whole library in one go.

Question 26

May I use the components in client projects?

Accepted Answer

Yes, in your own and in client projects, commercially and without attribution. What is not allowed is passing on the collection itself or offering it as a competing library.

Question 27

What happens when my access expires?

Accepted Answer

Everything you copied and built in stays yours and keeps working. Without active access you see the free part again and stop getting new components.

Question 28

What is MCP access?

Accepted Answer

Through the Model Context Protocol you connect your AI editor directly to the library. Your assistant searches the components and inserts the source code without manual copying.

Question 29

Which editors are supported?

Accepted Answer

All MCP-capable environments, including Claude Code, Cursor and VS Code. You add the server address once in the configuration.

Question 30

Is my project data transmitted?

Accepted Answer

No. The server offers read-only access to the components. No content from your project is sent to the library.

Question 31

What if my editor does not find the connection?

Accepted Answer

First check that your key is copied in full and that you restarted the editor after entering it. If it persists, drop us a line with the name of your editor and we will look at the setup.

Question 32

What does the Style Extractor do?

Accepted Answer

You enter a URL and get the page's colors, typography and spacing as design tokens, prepared as DESIGN.md or tokens.json for your project.

Question 33

How many extractions are possible?

Accepted Answer

Three analyses a day, ten with Premium. Repeated analyses of the same URL are served from the cache for 24 hours and do not count again.

Question 34

What is stored from the analyzed page?

Accepted Answer

The result: colors, fonts, design tokens, the site name and logo plus an image capture as a preview. We do not store HTML or CSS source. Your result is private and only reachable via the direct link until we approve it for the gallery after you propose it.

Question 35

Can I analyse any website?

Accepted Answer

Publicly reachable pages, yes. Pages behind a login, behind bot protection or with very strict security rules cannot be read, and then no result comes back.

Question 36

What do I find under resources?

Accepted Answer

Curated images and videos in albums plus ready-made color palettes. You view images in a lightbox and download them, and copy palettes with one click.

Question 37

Can I filter by video or photo?

Accepted Answer

Yes. Within an album you filter by photos and videos as soon as the album contains both media types.

Question 38

May I use the images commercially?

Accepted Answer

Yes, in websites and campaigns you or your clients run. What is not allowed is reselling the file itself, for example in a stock collection of your own.

Question 39

Do I need an account?

Accepted Answer

Not for browsing, and not for buying either: the account is created automatically after payment. For favorites and higher limits you sign in with a free account.

Question 40

How do favorites work?

Accepted Answer

Once signed in you mark components as favorites and find them again anytime in your account.

Question 41

I forgot my password, what now?

Accepted Answer

On the sign-in page you request a link that lets you set a new password. The link goes to the address you bought with or signed up with.

Question 42

How do I delete my account?

Accepted Answer

Send us a short message from your account address. We delete it along with your favorites and confirm the deletion.

Frequently asked questions

Popular questions