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.
Que sont les blocs ?
Les blocs sont des sections de page plus grandes et prêtes à l'emploi, construites en composant ensemble des composants Frutjam. Là où un composant est un élément unique de l’interface utilisateur (un bouton, une carte, un badge), un bloc est une section de mise en page complète – un héros, un tableau de prix, un en-tête de site – prête à être copiée et collée dans votre projet.
CSS uniquement
Chaque bloc est construit avec des composants Frutjam et des utilitaires CSS Tailwind – zéro JavaScript, pas de dépendances supplémentaires.
Copier-coller prêt
Chaque bloc est du HTMX autonome. Collez-le dans n'importe quel modèle Django, Laravel Blade, page HTMX ou composant React.
Conscient du thème
Les blocs héritent automatiquement de votre thème Frutjam actif : changez de thème et tous les blocs sont mis à jour sans aucune modification nécessaire.
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.