Mã nguồn mở · Được MIT cấp phép · Miễn phí mãi mãi
Thư viện thành phần CSS Tailwind chỉ có thể truy cập bằng CSS để Phát triển nhanh
Frutjam là thư viện giao diện người dùng mã nguồn mở, có tốc độ cực nhanh được xây dựng dành cho các nhà phát triển quan tâm đến khả năng truy cập, tiêu chuẩn và khả năng tích hợp liền mạch với Tailwind CSS.
Tuân thủ W3C, thân thiện với SEO và dễ sử dụng.
Tùy biến cao
Được hỗ trợ bởi các lớp tiện ích CSS của Tailwind
Frutjam cung cấp cho bạn các lớp thành phần rõ ràng ngay từ đầu, đồng thời để lại mọi tiện ích Tailwind có sẵn để tùy chỉnh. Dễ dàng thay đổi khoảng cách, màu sắc, bố cục và tương tác bằng các lớp tiện ích trên các thành phần Frutjam.
Các thành phần có thể tùy chỉnh
Mỗi thành phần Frutjam được thiết kế để chấp nhận các tiện ích Tailwind, vì vậy bạn có thể điều chỉnh kiểu mà không cần viết CSS tùy chỉnh.
Kiểm soát tiện ích đầu tiên
Sử dụng các lớp Tailwind như text-lg, px-6 và bg-base-200 để điều chỉnh các thành phần trong vài phút.
Bắt đầu sau vài giây
Hai lần nhập và bạn đã sẵn sàng để xây dựng. Không có công cụ xây dựng, không có cấu hình, không có thời gian chạy.
Bước 1
Cài đặt qua npm
Thêm Frutjam vào dự án của bạn chỉ bằng một lệnh.
npm install frutjam |
Bước 2
Nhập CSS của bạn
Thêm cả Tailwind và Frutjam vào biểu định kiểu của bạn.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Bước 3
Sử dụng linh kiện sạch
Viết các lớp ngữ nghĩa thay vì chuỗi tiện ích dài.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
Xem nó hoạt động
Thành phần thực, mã thực - sao chép và vận chuyển.
Nút
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Huy hiệu & Nhãn
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Button Sizes
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Thẻ
Card Title
A clean, accessible card component ready to use in any project.
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Tại sao nên sử dụng thư viện giao diện người dùng Frutjam?
Frutjam là thư viện giao diện người dùng mã nguồn mở, miễn phí chỉ dành cho CSS, được xây dựng bằng Tailwind CSS v4, tập trung vào khả năng truy cập và phát triển nhanh hơn. Nó không yêu cầu cấu hình JavaScript phức tạp hoặc các gói JS khổng lồ — khiến nó trở thành một giải pháp thay thế DaisyUI nhẹ nhàng cho các nhóm cần các thành phần tuân thủ WCAG mà không cần chi phí JavaScript.
Chỉ cần thêm @import "frutjam" vào biểu định kiểu của bạn để bắt đầu. Frutjam loại bỏ nhu cầu về danh sách lớp CSS Tailwind dài dòng trong HTML của bạn; chỉ cần sử dụng các lớp ngữ nghĩa rõ ràng để xây dựng các thành phần một cách dễ dàng. Dễ dàng tùy chỉnh chủ đề bằng các biến CSS đơn giản và tất cả các thành phần đều cập nhật ngay lập tức.
Tiêu chuẩn W3C
HTML rõ ràng, hợp lệ cho các ứng dụng web hiện đại.
Khả năng tiếp cận đầu tiên
Mọi thành phần đều được xây dựng với ý tưởng về a11y.
Độ tương phản màu
Các thành phần vượt qua quy trình kiểm tra độ tương phản màu WCAG AA/AAA ngay từ đầu.
Thân thiện với SEO
Đánh dấu ngữ nghĩa để hiển thị công cụ tìm kiếm tốt hơn.
Thân thiện với nhà phát triển
API đơn giản, trực quan và tích hợp dễ dàng.
CSS & HTML đầu tiên
Không khóa JavaScript - kiểu dáng và cấu trúc được ưu tiên hàng đầu.
Hỗ trợ CSS Tailwind
Hoạt động hoàn hảo với quy trình làm việc Tailwind hiện tại của bạn.
Hỗ trợ RTL
Hoàn toàn tương thích với các ngôn ngữ từ phải sang trái.
đáp ứng
Trông tuyệt vời trên mọi thiết bị, mọi kích thước màn hình.
Tích cực duy trì
Các thành phần, cập nhật mới và hỗ trợ cộng đồng.
Chủ đề chuyên nghiệp
Chuyển đổi giữa chế độ sáng và tối hoặc tạo chế độ riêng của bạn.
Bố cục & thành phần dựng sẵn
Các khối xây dựng sẵn sàng sử dụng cho bất kỳ dự án nào.
Nguồn mở
MIT được cấp phép và hướng tới cộng đồng.
Hỗ trợ plugin
Mở rộng Frutjam bằng các plugin hữu ích như Trình soạn thảo văn bản Markdown.
Giảm kích thước DOM
Một số lượng lớn các phần tử lồng nhau hoặc không cần thiết có thể khiến quá trình hiển thị bị chậm lại. Đơn giản hóa cấu trúc thành phần của bạn và cải thiện hiệu suất cũng như khả năng bảo trì.
100/100 trên Google PageSpeed Insights
Đạt được điểm 100 hoàn hảo về Hiệu suất, Khả năng truy cập, Thực tiễn tốt nhất và SEO bằng thư viện Giao diện người dùng Frutjam. Trang web này được xây dựng hoàn toàn bằng Frutjam UI và đạt được tổng điểm 100/100 trên Google PageSpeed Insights.
Trang web chạy nhanh hơn, cung cấp trải nghiệm người dùng tốt hơn và có thứ hạng tìm kiếm cao hơn. Trong web do AI điều khiển ngày nay, các trang web nhanh hơn được ưu tiên—các công cụ AI thường xuyên quét các trang web trong thời gian thực và chúng thích các trang nhanh, hiệu quả mà không lãng phí tài nguyên tính toán. Xây dựng thông minh hơn với thư viện giao diện người dùng sẵn sàng cho tương lai.
CSS thuần túy, không cần JavaScript. Framework bất khả tri và hoàn toàn tương thích ở mọi nơi.
Thư viện giao diện người dùng Frutjam không yêu cầu các gói JavaScript lớn vì nó được viết bằng CSS thuần túy. Điều này làm cho dự án của bạn nhẹ và được tối ưu hóa để có thời gian tải nhanh hơn và hiệu suất mượt mà hơn. Nó hoạt động hoàn hảo với mọi khung web hoặc chương trình phụ trợ, cho dù bạn đang sử dụng React, Vue, Angular, Next.js, Django, HTMX, Laravel hay chỉ là HTML đơn giản.
Dành cho các khung hiện đại
Khung của bạn nhanh. Hãy giữ nó như vậy.
Next.js, Svelte và Vue được thiết kế để mang lại hiệu suất vượt trội và SEO — kết xuất máy chủ, JS tối thiểu, hydrat hóa tức thì. Nhưng thời điểm bạn thêm một thư viện thành phần nặng chứa đầy JavaScript cồng kềnh cho một thứ đơn giản như một phương thức, bạn sẽ đánh đổi mọi thứ mà các khung đó hứa hẹn.
Frutjam là CSS đầu tiên và đầu tiên theo thiết kế. Không có gói JavaScript. Không có chi phí thời gian chạy. Không có sự thay đổi bố cục. Mức trần hiệu suất của hệ thống sẽ trở thành hiệu suất thực tế của bạn — không chỉ là hiệu suất lý thuyết.
Thay đổi bố cục bằng không
Các thành phần CSS thuần túy hiển thị ngay lập tức trên trang — không cần JavaScript để vẽ giao diện người dùng. Sự thay đổi bố cục tích lũy (CLS) của bạn vẫn ở mức 0, duy trì điểm Tốc độ trang hoàn hảo đó.
Không có chi phí JS
Mỗi KB JavaScript mà khung của bạn lưu lại từ việc chia tách gói, Frutjam không bao giờ thêm lại. Nút, thẻ, phương thức, huy hiệu - tất cả đều bằng CSS. Thời gian tương tác của bạn luôn nhanh chóng.
SEO mang lại hiệu quả
HTML ngữ nghĩa, đánh dấu hợp lệ W3C và độ tương phản màu WCAG ngay lập tức. Công cụ tìm kiếm đọc cấu trúc rõ ràng. Ghép nối một khung hiện đại với Frutjam và các trang của bạn sẽ được xếp hạng và hoạt động.
Không còn HTML xấu xí, ít tên lớp hơn, dễ bảo trì và phát triển nhanh hơn.
Không còn lớp học lộn xộn nữa: Một lớp làm được tất cả. Thay vì viết đi viết lại các lớp lộn xộn cho mọi thành phần, mọi trang và mọi dự án, hãy sử dụng tên lớp thành phần Frutjam để dễ dàng bảo trì và mở rộng quy mô cũng như phát triển nhanh hơn mà không phải đau đầu với các lớp lộn xộn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Chủ đề & Tùy chỉnh
Frutjam sử dụng các biến CSS đơn giản để tạo chủ đề. Thay đổi một biến và mọi thành phần sẽ cập nhật ngay lập tức — không cần xây dựng lại, không thay đổi lớp.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
Những gì bạn có thể tùy chỉnh
Colors
Chính, phụ, trọng âm, lỗi, thành công, cảnh báo và tất cả các sắc thái cơ bản - tất cả đều thông qua một biến CSS duy nhất.
Bán kính đường viền
--radius-base chia tỷ lệ tất cả các thành phần cùng một lúc — thay đổi một biến, mọi thành phần đều cập nhật.
Typography
Họ phông chữ, tỷ lệ kích thước và chiều cao dòng - đặt hệ thống kiểu của bạn một lần và tất cả các thành phần sẽ kế thừa nó.
Khoảng cách & Kích thước
Các biến thể kích thước và phần đệm thành phần — sử dụng công cụ sửa đổi kích thước tích hợp hoặc ghi đè mã thông báo khoảng cách trên toàn cầu.
Thư viện thành phần
Một bộ sưu tập ngày càng tăng các thành phần dựng sẵn, có thể truy cập được cho mọi trường hợp sử dụng.
Nút & Biểu mẫu
Các biến thể nút, đầu vào, hộp kiểm, lựa chọn và bố cục biểu mẫu đầy đủ.
Phương thức & Hộp thoại
Các hộp thoại, ngăn kéo và lời nhắc xác nhận có thể truy cập được.
Điều hướng
Thanh điều hướng, thanh bên, đường dẫn và điều hướng tab.
Thẻ & Bố cục
Các biến thể thẻ, hệ thống lưới và khung bố cục trang.
Cảnh báo & nâng cốc chúc mừng
Cảnh báo trạng thái, biểu ngữ thông báo và tin nhắn phản hồi nội tuyến.
Huy hiệu & Thẻ
Huy hiệu trạng thái, thẻ danh mục và thành phần nhãn.
Danh sách & Bảng
Bảng dữ liệu, danh sách có thứ tự/không có thứ tự và danh sách định nghĩa.
Plugin
Trình chỉnh sửa Markdown, công cụ đánh dấu cú pháp và nhiều tiện ích mở rộng hữu ích hơn.
Plugin cộng đồng
Được yêu thích bởi các nhà phát triển phụ trợ. Trình chỉnh sửa Markdown gốc đầu tiên.
Hầu hết các biên tập viên đều phá vỡ quy trình làm việc web tiêu chuẩn. MarkdownEditor nắm lấy nó — nằm ngay trên <textarea> để phần phụ trợ của bạn không bao giờ biết bất kỳ điều gì đã thay đổi. Nó chỉ hoạt động với form Method="POST", quyền truy cập DOM tiêu chuẩn và mọi khung máy chủ sẵn có.
Thay thế một <textarea> đơn giản bằng một dòng JS và người dùng của bạn sẽ có được trải nghiệm tốt hơn gấp 10 lần trong khi bộ điều khiển Django, Laravel hoặc PHP của bạn vẫn giữ nguyên như cũ.
-
No data binding needed — works with
form method="POST"out of the box -
Standard access — read and write with
element.valuelike any input - Backend agnostic — PHP, Django, Node.js, Laravel, Rails — all just read a plain string
- ~116 KB — hybrid WYSIWYG + plain mode, RTL, image upload, live preview, zero CSS conflicts
Live demo — try it out:
Drop-in replacement — one class, one line of JS. Backend unchanged.
Native Form Integration
Enhances a standard <textarea>. Submit with a normal <form> and access content via request.POST['name']. No preventDefault(), no FormData construction.
Advanced Image Upload
Configure server uploads via API. Images go directly to your CDN — no Base64 bloat in your database, no SEO penalty, no memory-heavy payloads.
High Performance
Debounced preview updates, cached style calculations, and conflict-free keyboard handling. Handles thousands of lines without input lag — and all editor styles are fully scoped so it lives safely alongside any CSS framework.
How does Frutjam compare?
See how Frutjam stacks up against plain Tailwind CSS, Bootstrap, and DaisyUI as a free, accessible alternative.
| Feature | Frutjam | DaisyUI | Plain Tailwind | Bootstrap |
|---|---|---|---|---|
| CSS-only (no JavaScript required) | ✓ | ✓ | ✓ | một phần |
| Semantic component classes | ✓ | ✓ | ✗ | ✓ |
| WCAG AA contrast guaranteed on every component | ✓ | Manual | Manual | một phần |
| Works alongside Tailwind utilities | ✓ | ✓ | ✓ | ✗ |
| CSS variables theming | ✓ | ✓ | ✓ | Limited |
| 100/100 PageSpeed achievable | ✓ | ✓ | Varies | Varies |
| RTL support | ✓ | một phần | một phần | ✓ |
| Framework agnostic (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Theme via plain CSS variables, no config file | ✓ | một phần | Manual | ✗ |
| AI editor integration (MCP / context) | ✓ Free | Paid | ✗ | ✗ |
AI Editor Integration
Using Claude Code, Cursor, or Copilot?
Cherry MCP connects Frutjam directly to your AI editor. Get accurate component code, correct class names, and up-to-date docs — without copy-pasting from the browser.
Try Cherry MCPCâu hỏi thường gặp
Everything you need to know about Frutjam.
Is Frutjam free to use?
Yes — Frutjam is MIT licensed and completely free. Use it in personal projects, client work, and commercial products with no restrictions, no attribution required.
Is Frutjam suitable for commercial projects?
Yes. Frutjam is open source under the MIT license, which permits free use in both personal and commercial products without any royalties or restrictions.
Does Frutjam replace Tailwind CSS?
No — Frutjam builds on top of Tailwind. Think of it as a layer that adds semantic component classes (.btn, .card, .badge) while keeping all Tailwind utility classes available alongside it.
Do I need JavaScript to use Frutjam?
No JavaScript required. Frutjam is pure CSS — components like buttons, cards, badges, and forms work entirely without a JS runtime. For interactive patterns like modals or dropdowns, it pairs well with lightweight libraries like Alpine.js or HTMX.
Tôi có thể sử dụng Frutjam với React, Vue hoặc Angular không?
Có - Frutjam hoàn toàn không phụ thuộc vào khuôn khổ. Nó hoạt động với mọi hệ thống tạo khuôn mẫu hoặc khung JS bao gồm React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django và HTML đơn giản. Chỉ cần nhập CSS và sử dụng các lớp.
Trình đọc màn hình có thể truy cập Frutjam không?
Đúng. Frutjam tuân theo các nguyên tắc của WAI-ARIA với các vai trò phù hợp, hỗ trợ điều hướng bằng bàn phím và độ tương phản màu WCAG AA/AAA ngay lập tức — giúp tất cả người dùng có thể truy cập được mà không cần cấu hình thêm.
Tốc độ trang có cải thiện khi sử dụng Frutjam không?
Đúng. Phương pháp tiếp cận CSS đầu tiên của Frutjam tránh hoàn toàn JavaScript chặn hiển thị. Kết hợp với đánh dấu hợp lệ W3C, độ tương phản màu phù hợp và ngữ nghĩa HTML gốc, nó góp phần trực tiếp vào các Chỉ số quan trọng về trang web cốt lõi và điểm Tốc độ trang 100/100 tốt hơn.
Làm cách nào để tùy chỉnh màu sắc, phông chữ và bán kính?
Ghi đè các biến CSS trong biểu định kiểu của bạn — đặt --color-primary, --font-base, --radius-base, v.v. Mọi thành phần nhận thay đổi ngay lập tức mà không cần xây dựng lại hoặc bất kỳ thay đổi lớp nào trong HTML của bạn.
Từ blog
Những suy nghĩ về việc xây dựng Frutjam và cách tiếp cận CSS đầu tiên đối với giao diện người dùng.
Mã nguồn mở & miễn phí mãi mãi
Tham gia cộng đồng
Frutjam là nguồn mở và hướng tới cộng đồng. Mọi thành phần, bản sửa lỗi và ý tưởng từ cộng đồng đều giúp mọi người trở nên tốt hơn.
Tìm thấy một lỗi? Có một yêu cầu tính năng? Bạn muốn đóng góp một thành phần hoặc cải thiện tài liệu? Chúng tôi rất muốn có bạn.