Frutjam adalah pustaka UI Tailwind CSS v4 UI gratis khusus CSS. Tanpa JavaScript, WCAG AA/AAA dapat diakses, tanpa kerangka kerja. Bangun antarmuka modern dengan komponen semantik yang bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Tidak ada penyiapan yang rumit — ini menggunakan konfigurasi yang sama seperti Tailwind CSS, sehingga Anda dapat tetap menggunakan apa yang sudah Anda ketahui. Dan jika Anda familiar dengan Bootstrap, nama komponennya akan terasa intuitif dan mudah diingat.
You can use Tailwind CSS variant prefixes like dark:, sm:, lg:, xl:, rtl:, and ltr: with any of our utility classes.
Modern UI Engineering with a Speed-First Framework
Frutjam adalah pustaka Tailwind CSS v4 UI sumber terbuka — abstraksi tingkat tinggi yang dirancang untuk memfasilitasi pengembangan web yang cepat. Anggap saja sebagai toolkit yang mengubah kelas utilitas mentah menjadi komponen semantik yang siap produksi—memungkinkan Anda membangun antarmuka modern dengan kode yang jauh lebih sedikit.
What problems does it solve?
Most developers face utility fatigue
spending hours writing long chains of classes for basic elements like buttons and inputs. Frutjam eliminates that friction by providing a plug-and-play
ecosystem.
- Redundant Boilerplate: Instead of reinventing the wheel for every project, you get prebuilt components that handle focus states, hover transitions, and responsive behaviors out of the box
- Performance Bloat: Unlike heavy JavaScript frameworks, Frutjam prioritizes a "Pure CSS" approach, ensuring your application remains lightweight and fast
- Compliance Hurdles: Building accessible and SEO-friendly interfaces is complex. The library uses semantic markup and clean HTML to ensure your site is inherently W3C-compliant
Frutjam is for you if you:
- Are tired of writing thousands of utility class names repeatedly
- Need to ship accessible, SEO-friendly landing pages and SaaS apps in record time
- Want a consistent design system that is fully compatible across any environment?
- Prefer a lightweight, framework-agnostic solution with zero mandatory JavaScript dependencies
Core Features for Rapid Development
The toolkit follows a copy, paste, and build
philosophy, offering everything needed for professional-grade frontend engineering
- Extensive Component Library: Includes essential elements like Navbars, Modals, Accordions, and refined Data Tables
- Pre-assembled Blocks: Save hours with layout blocks for Pricing sections, Headers, and Hero areas
Berry
Theming System: Switch between built-in themes like Snowberry (light) and Darkberry (dark), or create your own using OKLCH CSS variables- Aksesibilitas-Desain Pertama : Setiap komponen mengikuti praktik terbaik untuk peran ARIA dan navigasi keyboard. Semua pasangan warna adalah nilai OKLCH yang disetel secara manual dan diverifikasi agar lulus kontras WCAG AA — bukan tebakan yang dihitung secara otomatis.
- Framework Agnostic: Works seamlessly whether you are using React, Next.js, Vue, Django, HTMX, Laravel, or simple static HTML
Technical Efficiency
By using semantic class names, you can reduce your HTML size significantly compared to standard utility-first workflows. This results in cleaner, more maintainable codebases that are easier for teams to manage in the long term. The library is built strictly on top of Tailwind CSS, ensuring you keep all the customization power of the utility engine while gaining the speed of a component-based system.
Ready to start? Get started with installation →