UI 块和部分 - 构建速度更快
仅 CSS Tailwind CSS UI 块和部分。没有 JavaScript，可访问 WCAG AA，与框架无关。复制粘贴英雄、标题、定价部分和功能块。适用于 Django、HTMX、Laravel、React 和任何堆栈。
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.
标头
仅 CSS Tailwind CSS 标题块，带有导航栏、品牌和移动抽屉。粘性、透明和响应式布局变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
英雄
仅 CSS Tailwind CSS 英雄块 — 具有居中、分割和图像布局的现成着陆页部分。无需 JavaScript，可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。
定价
仅 CSS Tailwind CSS 定价块使用卡片和按钮组件构建。复制粘贴带有等级、功能列表和 CTA 的定价表。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
What are blocks?
Blocks are larger, ready-made page sections built by composing Frutjam components together. Where a component is a single UI element (a button, a card, a badge), a block is a complete layout section — a hero, a pricing table, a site header — ready to copy and paste into your project.
CSS-only
Every block is built with Frutjam components and Tailwind CSS utilities — zero JavaScript, no extra dependencies.
Copy-paste ready
Each block is self-contained HTML. Paste it into any Django template, Laravel Blade, HTMX page, or React component.
Theme-aware
Blocks inherit your active Frutjam theme automatically — switch themes and all blocks update with no changes needed.
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.