Frutjam là thư viện giao diện người dùng Tailwind CSS v4 miễn phí chỉ dành cho CSS. Không có JavaScript, WCAG AA/AAA có thể truy cập được, không phụ thuộc vào khung. Xây dựng giao diện hiện đại với các thành phần ngữ nghĩa hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Không cần thiết lập phức tạp — nó sử dụng cấu hình tương tự như CSS Tailwind, vì vậy bạn có thể làm theo những gì bạn đã biết. Và nếu bạn đã quen thuộc với Bootstrap, tên thành phần sẽ có cảm giác trực quan và dễ nhớ.
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 là thư viện UI Tailwind CSS v4 mã nguồn mở — một bản tóm tắt cấp cao được thiết kế để hỗ trợ phát triển web nhanh chóng. Hãy coi nó như một bộ công cụ chuyển đổi các lớp tiện ích thô thành các thành phần ngữ nghĩa, sẵn sàng sản xuất—cho phép bạn xây dựng các giao diện hiện đại với ít mã hơn đáng kể.
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- Accessibility-First Design: Mọi thành phần đều tuân theo các phương pháp thực hành tốt nhất cho vai trò ARIA và điều hướng bàn phím. Tất cả các cặp màu đều là các giá trị OKLCH được điều chỉnh thủ công đã được xác minh để vượt qua độ tương phản WCAG AA — không phải các dự đoán được tính toán tự động.
- 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 →