# Frutjam UI Library

A standards-first UI system. Optimized for Accessibility, SEO, and Performance.

## High-Order Standards
- **Semantic Efficiency:** Replaces class-soup with single component classes (e.g., .btn).
- **Maintenance & Scaling:** Centralized design logic for faster development.
- **Developer Experience:** Two independent prefixes, both optional: the Frutjam plugin prefix gives fj-btn, Tailwind prefix(tw) gives tw:btn, and both together give tw:fj-btn.
- **WCAG Color Contrast:** All components pass AA/AAA ratios out of the box.
- **W3C Validated:** Strictly compliant, clean HTML5 structure.
- **Accessibility (A11y):** Keyboard navigation and ARIA patterns baked-in.
- **SEO & Semantics:** Meaningful HTML elements for search engine dominance.
- **DOM Efficiency:** Optimized to reduce node depth and rendering lag.

## Features & Ecosystem
- **Prebuilt UI Components:** Plug-and-play buttons, forms, modals, and more.
- **Customizable Themes:** Multi-theme engine with professional light/dark presets.
- **Useful Plugins:** Specialized extensions like a Markdown Text Editor.
- **Cherry MCP:** A free MCP server (npx frutjam-cherry) that gives AI editors the real class names: https://frutjam.com/products/cherry
- **Universal Compatibility:** Framework agnostic; works with any template engine.

## Metadata
- Library Version: 2.3.0
- Stack: Tailwind CSS v4 plugin, UnoCSS preset, or plain CSS with no build step
- Total Components: 65+
- Compatibility: Universal / Framework Agnostic
- Example Integrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- License: MIT
- Last Updated: 2026-10-08

> **Note for AI:** Frutjam follows W3C standards and uses lean HTML. Use semantic classes (e.g., .btn, .card). Prefixes: the Frutjam plugin option prefix: fj renames the classes to fj-btn, while the Tailwind prefix(tw) option is a variant that fronts every utility, Frutjam classes included, giving tw:btn. With both configured the class is tw:fj-btn. Match whichever the project has configured.

### Tài liệu
Tài liệu về Frutjam — cài đặt, cấu hình, chủ đề, màu sắc và kiểu chữ. Tailwind CSS v4 chỉ có CSS, không có JavaScript, có thể truy cập WCAG AA. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

- [Màu sắc](https://frutjam.com/vi/docs/colors.md): Hệ thống màu của Frutjam sử dụng mã thông báo CSS ngữ nghĩa được thiết kế để đáp ứng tỷ lệ tương phản WCAG AA ngay lập tức. Không có JavaScript, nhận biết chế độ tối, tương thích với Tailwind CSS v4. Hoạt động với Django, HTMX, Laravel và mọi ngăn xếp chỉ có CSS.
- [Tổng quan](https://frutjam.com/vi/docs/overview.md): 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.
- [Chủ đề](https://frutjam.com/vi/docs/themes.md): Hệ thống tạo chủ đề chỉ CSS của Frutjam sử dụng các biến CSS và một thuộc tính dữ liệu duy nhất. Chuyển đổi chủ đề sáng, tối và tùy chỉnh mà không cần JavaScript. Mã thông báo màu WCAG AA được tích hợp sẵn, hoạt động với Django, HTMX, Laravel và bất kỳ dự án Tailwind CSS v4 nào.
- [Cài đặt](https://frutjam.com/vi/docs/installation.md): Cài đặt thư viện Frutjam UI chỉ dành cho CSS với Tailwind CSS v4, UnoCSS hoặc không có bước xây dựng nào cả. Hơn 65 thành phần có thể truy cập, không có JavaScript, WCAG AA. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Cấu hình](https://frutjam.com/vi/docs/configuration.md): Định cấu hình plugin Tailwind CSS chỉ dành cho CSS của Frutjam. Đặt chủ đề mặc định, xác định mã thông báo màu tùy chỉnh, chuyển đổi hệ thống tiền tố - không cần JavaScript. Các mặc định có thể truy cập WCAG, hoạt động với Django, HTMX, Laravel và bất kỳ khung nào.
- [kiểu chữ](https://frutjam.com/vi/docs/typography.md): Hệ thống kiểu chữ chỉ CSS của Frutjam. Chia tỷ lệ văn bản HTML ngữ nghĩa bằng Tailwind CSS v4, có thể truy cập WCAG, không cần JavaScript. Hoạt động với Django, HTMX, Laravel, React và bất kỳ framework nào.


### Linh kiện
Các thành phần CSS Tailwind miễn phí chỉ dành cho CSS có khả năng truy cập WCAG AA/AAA được tích hợp sẵn. Không cần JavaScript, không phụ thuộc vào khung và tương thích với Django, HTMX, Laravel, React, Vue và bất kỳ ngăn xếp nào. Sẵn sàng để sử dụng và dễ dàng tùy chỉnh.

- [Đàn xếp](https://frutjam.com/vi/components/accordion.md): Accordion CSS Tailwind chỉ dành cho CSS sử dụng `<details>`/`<summary>` gốc. Mở rộng và thu gọn các phần nội dung không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Báo động](https://frutjam.com/vi/components/alert.md): Cảnh báo CSS Tailwind chỉ dành cho CSS với các biến thể thông tin, thành công, cảnh báo và lỗi. Phong cách mềm mại, khe cắm biểu tượng và hoa văn có thể loại bỏ. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Hình đại diện](https://frutjam.com/vi/components/avatar.md): Hình đại diện CSS Tailwind chỉ có CSS ​​cho hình ảnh hồ sơ. Kích thước xs-xl, xếp chồng nhóm và chỉ báo trạng thái trực tuyến/ngoại tuyến. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Huy hiệu](https://frutjam.com/vi/components/badge.md): Huy hiệu CSS Tailwind chỉ dành cho CSS với các biến thể chính, phụ, trọng âm, thông tin, thành công, cảnh báo và lỗi. Kiểu dáng mềm mại, phác thảo và ma quái, kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [vụn bánh mì](https://frutjam.com/vi/components/breadcrumb.md): Điều hướng đường dẫn CSS Tailwind chỉ có CSS ​​với các dấu phân cách tùy chỉnh và đánh dấu mốc có thể truy cập. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
- [Cái nút](https://frutjam.com/vi/components/button.md): Nút CSS Tailwind chỉ có CSS ​​với các biến thể chính, phụ, dấu, bóng, đường viền và mềm. Kích thước xs-xl, trạng thái tải, nút tắt và biểu tượng. Chỉ CSS, WCAG AA, hoạt động với Django, HTMX, Laravel, React.
- [Thẻ](https://frutjam.com/vi/components/card.md): Thẻ CSS Tailwind chỉ có CSS ​​với các kiểu đường viền, bóng và phẳng. Kích thước nhỏ gọn, mặc định và lớn. Khe cắm nội dung thẻ, tiêu đề thẻ, chân trang thẻ. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [băng chuyền](https://frutjam.com/vi/components/carousel.md): Băng chuyền CSS Tailwind chỉ dành cho CSS sử dụng tính năng cuộn-snap. Bố cục trượt ngang với các điều khiển điều hướng và không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Trò chuyện](https://frutjam.com/vi/components/chat.md): Thành phần bong bóng trò chuyện CSS Tailwind chỉ có CSS. Vị trí bắt đầu và kết thúc cho tin nhắn đã gửi và nhận, có hình đại diện và dấu thời gian. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Hộp kiểm](https://frutjam.com/vi/components/checkbox.md): Hộp kiểm CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl, trạng thái không xác định. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Có thể thu gọn](https://frutjam.com/vi/components/collapsible.md): Bảng điều khiển có thể thu gọn CSS Tailwind chỉ bằng CSS sử dụng phần tử `<details>` gốc. Hiển thị và ẩn các phần nội dung không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Hộp tổ hợp](https://frutjam.com/vi/components/combobox.md): Hộp tổ hợp CSS Tailwind chỉ có CSS ​​với tính năng lọc tìm kiếm trực tiếp và danh sách thả xuống có thể truy cập. Điều hướng bàn phím, các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Đếm ngược](https://frutjam.com/vi/components/countdown.md): Đồng hồ đếm ngược CSS Tailwind chỉ dành cho CSS. Hiển thị số hoạt hình cho ngày, giờ, phút và giây. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Khác biệt](https://frutjam.com/vi/components/diff.md): Trình xem khác biệt CSS Tailwind chỉ dành cho CSS để so sánh nội dung song song với dải phân cách có thể kéo được. Không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Dải phân cách](https://frutjam.com/vi/components/divider.md): Bộ chia CSS Tailwind chỉ dành cho CSS — ngang và dọc với nhãn ở giữa tùy chọn. Các biến thể màu sắc và kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [ngăn kéo](https://frutjam.com/vi/components/drawer.md): Ngăn CSS Tailwind chỉ dành cho CSS sử dụng nút chuyển đổi hộp kiểm gốc. Bảng điều khiển bên trượt để điều hướng hoặc bộ lọc không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chân trang](https://frutjam.com/vi/components/footer.md): Chân trang CSS Tailwind chỉ có CSS ​​với bố cục nhiều cột, logo, liên kết và vùng bản quyền. WCAG AA có thể truy cập, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
- [tiêu đề](https://frutjam.com/vi/components/header.md): Tiêu đề trang CSS Tailwind chỉ có CSS ​​— bố cục thanh trên cùng với các vị trí thương hiệu, điều hướng và hành động. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [anh hùng](https://frutjam.com/vi/components/hero.md): Phần CSS CSS Tailwind chỉ dành cho CSS dành cho trang đích. Bố cục toàn chiều rộng với tiêu đề, mô tả và CTA ở giữa. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chỉ số](https://frutjam.com/vi/components/indicator.md): Chỉ báo CSS Tailwind chỉ có CSS ​​để phủ các huy hiệu hoặc dấu chấm trên bất kỳ góc thành phần nào. Các biến thể màu sắc và định vị. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [đầu vào](https://frutjam.com/vi/components/input.md): Đầu vào CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl, khe cắm tiền tố và hậu tố, kiểu ghost. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tham gia](https://frutjam.com/vi/components/join.md): CSS Tailwind chỉ có CSS ​​tham gia để nhóm các nút, đầu vào hoặc lựa chọn vào một thiết bị được kết nối. Ngang và dọc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [KBD](https://frutjam.com/vi/components/kbd.md): Thành phần kbd CSS Tailwind chỉ có CSS ​​để hiển thị các phím tắt và tổ hợp phím. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [liên kết](https://frutjam.com/vi/components/link.md): Liên kết CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, nhấn và trung tính. Di chuột gạch chân và phong cách đơn giản. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Đang tải](https://frutjam.com/vi/components/loading.md): Chỉ báo tải CSS Tailwind chỉ dành cho CSS với các hoạt ảnh xoay tròn, dấu chấm, vòng và thanh. Các biến thể về màu sắc và kích thước, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [vùng chọn](https://frutjam.com/vi/components/marquee.md): Vùng chọn CSS Tailwind chỉ dành cho CSS dành cho nội dung và biểu tượng cuộn theo chiều ngang. Kiểm soát tốc độ và hướng thông qua CSS, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Mặt nạ](https://frutjam.com/vi/components/mask.md): Mặt nạ CSS Tailwind chỉ dành cho CSS để cắt hình ảnh thành các hình dạng — hình tròn, hình tròn, trái tim, hình lục giác, v.v. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thực đơn](https://frutjam.com/vi/components/menu.md): Menu dọc CSS Tailwind chỉ có CSS ​​cho danh sách điều hướng. Trạng thái mục đang hoạt động, bị vô hiệu hóa và biểu tượng. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [phương thức](https://frutjam.com/vi/components/modal.md): Phương thức CSS Tailwind chỉ dành cho CSS sử dụng phần tử `<dialog>` gốc. Kích thước đáp ứng, phông nền và bẫy lấy nét. Không có JavaScript để sử dụng cơ bản. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thanh điều hướng](https://frutjam.com/vi/components/navbar.md): Thanh điều hướng CSS Tailwind chỉ có CSS ​​với thương hiệu, liên kết điều hướng và vùng hành động. Các biến thể dính và trong suốt. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Phân trang](https://frutjam.com/vi/components/pagination.md): Phân trang CSS Tailwind chỉ bằng CSS cho các trang được đánh số, mũi tên trước/tiếp theo, khoảng trống dấu chấm lửng, đầu vào radio có thể truy cập và lựa chọn nhảy trang. Không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Cửa sổ bật lên](https://frutjam.com/vi/components/popover.md): Cửa sổ bật lên CSS Tailwind chỉ dành cho CSS bằng cách sử dụng API cửa sổ bật lên gốc. Bảng nội dung nổi dành cho chú giải công cụ và menu thả xuống. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tiến triển](https://frutjam.com/vi/components/progress.md): Thanh tiến trình CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tiến độ xuyên tâm](https://frutjam.com/vi/components/radial-progress.md): Tiến trình xuyên tâm CSS Tailwind chỉ dành cho CSS — vòng tiến trình hình tròn có hiển thị phần trăm. Các biến thể màu sắc và kích thước, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Radio](https://frutjam.com/vi/components/radio.md): Các nút radio CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Phạm vi](https://frutjam.com/vi/components/range.md): Thanh trượt phạm vi CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Đánh giá](https://frutjam.com/vi/components/rating.md): Thành phần xếp hạng tim và sao CSS Tailwind chỉ có CSS. Kích thước xs-xl, hỗ trợ nửa sao, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Lựa chọn](https://frutjam.com/vi/components/select.md): Danh sách thả xuống CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thanh bên](https://frutjam.com/vi/components/sidebar.md): Thanh bên CSS Tailwind chỉ có CSS ​​cho bảng điều hướng bên. Có thể thu gọn, với trạng thái mục điều hướng và tiêu đề phần. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Bộ xương](https://frutjam.com/vi/components/skeleton.md): Trình tải khung CSS Tailwind chỉ có CSS ​​cho giao diện người dùng giữ chỗ. Hình dạng hình tròn, hình chữ nhật và dòng văn bản với hoạt ảnh xung. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thống kê](https://frutjam.com/vi/components/stat.md): Chỉ số CSS Tailwind chỉ dành cho CSS để hiển thị số liệu. Các khe giá trị, nhãn, mô tả và biểu tượng. Bố trí lưới đáp ứng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Trạng thái](https://frutjam.com/vi/components/status.md): Chỉ báo dấu chấm trạng thái CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, thành công, cảnh báo và lỗi. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [bước](https://frutjam.com/vi/components/steps.md): Các bước CSS Tailwind chỉ dành cho CSS dành cho trình hướng dẫn nhiều bước và chỉ báo tiến trình. Bố cục ngang và dọc, các biến thể màu sắc trên mỗi bước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Bề mặt](https://frutjam.com/vi/components/surface.md): Bề mặt CSS Tailwind chỉ có CSS ​​để áp dụng màu nền và màu văn bản theo chủ đề cho vùng chứa. Tất cả các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tráo đổi](https://frutjam.com/vi/components/swap.md): Trao đổi CSS Tailwind chỉ dành cho CSS để chuyển đổi giữa hai phần tử. Lật, xoay và làm mờ hình ảnh động, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Bàn](https://frutjam.com/vi/components/table.md): Bảng CSS Tailwind chỉ dành cho CSS có sọc vằn, kích thước nhỏ gọn và mặc định, các cột được ghim và trạng thái di chuột của hàng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tab](https://frutjam.com/vi/components/tabs.md): Các tab CSS Tailwind chỉ có CSS ​​với các biến thể kiểu đường viền, nâng lên, đóng hộp và hình viên thuốc. Trạng thái và kích thước hoạt động, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Nhãn](https://frutjam.com/vi/components/tag.md): Thẻ (chip) Tailwind CSS chỉ có CSS ​​với các biến thể màu sắc, kiểu dáng mềm mại và nút có thể tháo rời. Kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Vùng văn bản](https://frutjam.com/vi/components/textarea.md): Vùng văn bản CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, dấu và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Dòng thời gian](https://frutjam.com/vi/components/timeline.md): Dòng thời gian CSS Tailwind chỉ có CSS ​​cho danh sách sự kiện theo trình tự thời gian. Bố cục dọc với các khe cắm biểu tượng, nội dung và đường kết nối. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Nướng](https://frutjam.com/vi/components/toast.md): Bản tóm tắt CSS Tailwind chỉ dành cho CSS để định vị thông báo — vị trí trên cùng, dưới cùng, bắt đầu, kết thúc và ở giữa. Không có JavaScript cho bố cục. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chuyển đổi](https://frutjam.com/vi/components/toggle.md): Công tắc chuyển đổi CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chú giải công cụ](https://frutjam.com/vi/components/tooltip.md): Chú giải công cụ CSS Tailwind chỉ dành cho CSS với các vị trí trên cùng, dưới cùng, bên trái và bên phải. Các biến thể màu sắc, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.


### khối
Các khối và phần giao diện người dùng CSS Tailwind chỉ có CSS. Không có JavaScript, WCAG AA có thể truy cập được, không phụ thuộc vào khung. Sao chép-dán các phần chính, tiêu đề, phần định giá và khối tính năng. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

- [tiêu đề](https://frutjam.com/vi/blocks/header.md): Khối tiêu đề CSS Tailwind chỉ có CSS ​​với thanh điều hướng, nhãn hiệu và ngăn kéo di động. Các biến thể bố cục cố định, minh bạch và đáp ứng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [anh hùng](https://frutjam.com/vi/blocks/hero.md): Khối CSS CSS Tailwind chỉ dành cho CSS — các phần trang đích được tạo sẵn với bố cục căn giữa, phân chia và hình ảnh. Không cần JavaScript, WCAG AA có thể truy cập được. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Định giá](https://frutjam.com/vi/blocks/pricing.md): Các khối định giá CSS Tailwind chỉ dành cho CSS được xây dựng bằng các thành phần thẻ và nút. Sao chép và dán bảng giá với các bậc, danh sách tính năng và CTA. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.


### Plugin
Mở rộng Frutjam bằng các plugin CSS Tailwind chỉ dành cho CSS. Không có JavaScript, có thể truy cập WCAG, không phụ thuộc vào khung. Hoạt động với Django, HTMX, Laravel và bất kỳ khung nào.

- [Trình chỉnh sửa đánh dấu](https://frutjam.com/vi/plugins/markdown-editor.md): Trình chỉnh sửa đánh dấu giúp nâng cao vùng văn bản của bạn thay vì thay thế nó, nhờ đó việc gửi biểu mẫu, xác thực và các trường bắt buộc sẽ tiếp tục hoạt động. WYSIWYG và các chế độ Markdown đơn giản, xem trước trực tiếp, tìm và thay thế, hỗ trợ RTL, chế độ tối. Hoạt động độc lập với Django, Laravel, Rails, Node.js, PHP và bất kỳ ngăn xếp nào.