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.
Co to są bloki?
Bloki to większe, gotowe sekcje strony, zbudowane poprzez połączenie komponentów Frutjam. Tam, gdzie komponent jest pojedynczym elementem interfejsu użytkownika (przyciskiem, kartą, plakietką), blok jest kompletną sekcją układu — bohaterem, tabelą cen, nagłówkiem witryny — gotową do skopiowania i wklejenia do projektu.
Tylko CSS
Każdy blok jest zbudowany z komponentów Frutjam i narzędzi CSS Tailwind — zero JavaScript, żadnych dodatkowych zależności.
Kopiuj-wklej gotowe
Każdy blok jest samodzielnym kodem HTMX. Wklej go do dowolnego szablonu Django, Laravel Blade, strony HTMX lub komponentu React.
Świadomy tematu
Bloki automatycznie dziedziczą Twój aktywny motyw Frutjam — przełączaj motywy, a wszystkie bloki aktualizują się bez konieczności wprowadzania zmian.
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.