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.
什麼是塊？
區塊是透過將 Frutjam 元件組合在一起來建構的較大的現成頁面部分。元件是單一 UI 元素（按鈕、卡片、徽章），區塊是完整的佈局部分（英雄、定價表、網站標題），可以複製並貼上到您的專案中。
僅 CSS
每個區塊都是使用 Frutjam 元件和 Tailwind CSS 實用程式建立的 - 零 JavaScript，沒有額外的依賴項。
複製貼上準備就緒
每個區塊都是獨立的 HTML。將其貼到任何 Django 模板、Laravel Blade、HTMX 頁面或 React 元件中。
主題感知
區塊會自動繼承您的活動 Frutjam 主題 - 切換主題並且所有區塊都會更新，無需進行任何更改。
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.