Question 1

What is the Systra Studios Library?

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

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 6

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 7

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 8

Do the animations respect reduced motion?

Accepted Answer

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

Question 9

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 heros, feature areas, pricing tables or footers that you assemble straight into full pages.

Question 10

Which section categories are there?

Accepted Answer

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

Question 11

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 12

What is free to use?

Accepted Answer

You can browse the library, view components and freely copy the curated color palettes. One image album is open to explore as well.

Question 13

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 14

Is there a daily limit?

Accepted Answer

Free use has gentle daily limits for downloads and extractions. With Premium the limits are much higher.

Question 15

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 16

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 17

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 18

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 19

How many extractions are possible?

Accepted Answer

Free use allows a few extractions per day, Premium a lot more. Repeated analyses of the same URL are served briefly from the cache.

Question 20

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 21

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 22

Do I need an account?

Accepted Answer

Not for browsing. For favorites, higher limits and Premium content you sign in with a free account.

Question 23

How do favorites work?

Accepted Answer

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

Frequently asked questions

General

Sections

MCP access

Account & favorites

Components & code

Premium & pricing

Style Extractor

Resources