UI Blocks and Sections - Build Faster
CSS-only Tailwind CSS UI blocks and sections. No JavaScript, WCAG AA accessible, framework-agnostic. Copy-paste heroes, headers, pricing sections, and feature blocks. Works with Django, HTMX, Laravel, React, and any stack.
Blocks are production-ready page sections assembled from Frutjam components. Each block is self-contained HTML — drop it into any Django template, Laravel Blade file, HTMX page, or React component and it works immediately. Blocks inherit your active Frutjam theme automatically, so switching between light, dark, or a custom theme requires no changes to the block HTML. All blocks are CSS-only, WCAG AA accessible, and built for Tailwind CSS v4 — no JavaScript, no build pipeline beyond Tailwind itself.
Header
CSS-only Tailwind CSS header blocks with navbar, branding, and mobile drawer. Sticky, transparent, and responsive layout variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Hero
CSS-only Tailwind CSS hero blocks — ready-made landing page sections with centered, split, and image layouts. No JavaScript required, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any stack.
Pricing
CSS-only Tailwind CSS pricing blocks built with card and button components. Copy-paste pricing tables with tiers, feature lists, and CTAs. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Khối là gì?
Các khối là các phần trang lớn hơn, được tạo sẵn, được xây dựng bằng cách kết hợp các thành phần Frutjam lại với nhau. Trong đó một thành phần là một thành phần giao diện người dùng duy nhất (nút, thẻ, huy hiệu), khối là một phần bố cục hoàn chỉnh — phần chính, bảng giá, tiêu đề trang web — sẵn sàng sao chép và dán vào dự án của bạn.
Chỉ CSS
Mọi khối đều được xây dựng bằng các thành phần Frutjam và tiện ích CSS Tailwind — không có JavaScript, không có phụ thuộc bổ sung.
Sao chép-dán sẵn sàng
Mỗi khối là HTML độc lập. Dán nó vào bất kỳ mẫu Django, Laravel Blade, trang HTML hoặc thành phần React nào.
Nhận biết chủ đề
Các khối kế thừa chủ đề Frutjam đang hoạt động của bạn một cách tự động — chuyển đổi chủ đề và tất cả các khối cập nhật mà không cần thay đổi.
What is the difference between a block and a component?
A component is a single reusable UI element — a button, a card, a badge. A block is a complete page section that composes multiple components into a layout — a hero section, a pricing table, a site header with navbar and mobile drawer. Use components to build custom layouts; use blocks for fast page assembly.
Do blocks work with Django, HTMX, and Laravel?
Yes — blocks are plain HTML using Frutjam component classes. They work in any templating system: Django, HTMX, Laravel Blade, Rails ERB, Jinja2, or static HTML. No JavaScript framework, no build step beyond Tailwind CSS itself.
Are more blocks being added?
Yes — new blocks are added regularly. The Pro and Team plans include access to premium blocks including feature sections, testimonials, CTAs, and full page templates.