Introduction
Frastra is a collection of copy-paste React components built with Next.js and Tailwind CSS. No package installations. No hidden abstractions. Just clean, customizable code.
This is not a component library. It's how you build your component library.
Philosophy
You know how most component libraries work: you install a package from npm, import the components, and use them in your app.
This approach works well until you need to customize a component to fit your design system or require one that isn't included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.
Frastra solves this by giving you the actual component code. No black boxes. No mysterious dependencies. Just transparent, modifiable React components.
Copy & Paste
Frastra components are designed to be copied and pasted directly into your project. No CLI tools, no package installations, no version conflicts.
Simple Process: Browse the component you need, copy the code, paste it into your project. That's it.
Zero Dependencies: Each component is self-contained with minimal external dependencies.
Instant Ownership: The moment you paste the code, it becomes yours to modify and extend.
What You See Is What You Get
Every component preview shows exactly what you'll get when you copy the code. No hidden state, no missing props, no surprise dependencies.
Identical Code: The preview and the copyable code are identical - same data, same props, same styling.
Complete Examples: Each component includes realistic data and usage examples.
No Surprises: What you see in the browser is exactly what you'll get in your project.
Full Control
Unlike traditional component libraries where you're constrained by the library's API, Frastra gives you complete control over every aspect of your components.
Source Code Access: You own the component code completely. Modify, extend, or rebuild as needed.
No Version Lock: Never worry about breaking changes or deprecated APIs from external libraries.
Custom Design Systems: Easily adapt components to match your brand and design requirements.
Why Frastra?
Built for modern React development with the latest technologies and best practices.
Modern Stack
- • Next.js 15 with App Router
- • React 19 with latest features
- • Tailwind CSS 4 ready
- • TypeScript optional
Developer Experience
- • No build tools required
- • Instant copy-paste workflow
- • Comprehensive examples
- • Mobile-first design
Production Ready
- • Accessibility built-in
- • Performance optimized
- • Dark mode support
- • Responsive by default
Ready to start? Head over to the components section and start building your UI with beautiful, customizable components.