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.
Bloklar nedir?
Bloklar, Frutjam bileşenlerinin bir araya getirilmesiyle oluşturulan daha büyük, hazır sayfa bölümleridir. Bir bileşenin tek bir kullanıcı arayüzü öğesi (bir düğme, bir kart, bir rozet) olduğu durumda, bir blok, projenize kopyalayıp yapıştırmaya hazır, eksiksiz bir düzen bölümüdür (bir kahraman, bir fiyatlandırma tablosu, bir site başlığı).
Yalnızca CSS
Her blok Frutjam bileşenleri ve Tailwind CSS yardımcı programları ile oluşturulmuştur; sıfır JavaScript, ekstra bağımlılık yoktur.
Kopyala-yapıştır hazır
Her blok bağımsız bir HTML'dir. Bunu herhangi bir Django şablonuna, Laravel Blade'e, HTMX sayfasına veya React bileşenine yapıştırın.
Temaya duyarlı
Bloklar, aktif Frutjam temanızı otomatik olarak devralır; temaları değiştirin ve tüm bloklar hiçbir değişikliğe gerek kalmadan güncellenir.
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.