A native Flowbite 4 accordion and drawer composition, with verified semantic theme aliases, a persistent packing checklist and an accessible local materials-note workflow.
Flowbite 4.0.2 Accordion and Drawer classes, default theme and Tailwind CSS 4.3.3. · Implementation reference
02
Flowbite Design System Design Reference
Flowbite 4.0.2 default theme with Tailwind CSS 4.3.3. The named aliases below are actual Flowbite theme variables; their referenced ramps come from Tailwind. The packing illustration and application spacing choices are original.
Flowbite Design System Four Adds a Named Default Theme
Flowbite Four Adds a Named Default Theme
This example uses Flowbite 4.0.2, not an unversioned collection of old blue-and-gray snippets. Its default theme defines semantic aliases such as color-body, color-heading, color-brand and color-neutral-primary. The page imports that theme before applying the Flowbite Tailwind plugin, then uses corresponding classes such as text-heading and bg-brand.
The aliases point into Tailwind’s color ramps. For example, the normal brand action references blue-700, while its stronger hover role references blue-800. The specification preserves those references so a reader can distinguish the semantic role from a primitive color value. The packing artwork reuses the same brand roles without becoming an official Flowbite illustration.
Flowbite Design System Theme Geometry and Tailwind Layout Work Together
Theme Geometry and Tailwind Layout Work Together
The default theme’s radius-base is twelve pixels, used by rounded-base on the main containers, drawer controls and result notice. It also defines distinct two-, four-, six-, eight- and sixteen-pixel radii. Importing the theme therefore matters when a copied component uses the newer semantic class names.
Inter leads the supplied font stack, but this self-contained preview does not download a remote font. It uses the available system fallback. Page spacing follows Tailwind utilities: p-6 is one-and-a-half rem, gap-8 is two rem and the desktop p-10 is two-and-a-half rem. These layout utilities are not presented as a separate invented Flowbite spacing scale.
Flowbite Design System One Accordion Instance Owns Three Categories
One Accordion Instance Owns Three Categories
The JavaScript constructs an Accordion with an array of items. Every item has a stable ID, a trigger element and a target panel; the paper category starts active. alwaysOpen is false, so opening Tools closes Paper. Custom activeClasses and inactiveClasses use the default theme’s semantic foreground and surface names.
The class controls panel visibility and updates aria-expanded on its trigger. The markup provides aria-controls and matching panel IDs. The checklist inputs remain in the document while a panel is collapsed, so their checked state survives category changes. Collapsing a section is a visibility action, not a reset of the user’s packing work.
Flowbite Design System Progress Is Derived from Actual Checkboxes
Progress Is Derived from Actual Checkboxes
Six real checkboxes represent specific workshop materials. The application derives packed count, next item and remaining-item text from their current checked properties. The progress bar’s width and aria-valuenow update from that same count; no separate counter can drift away from the checklist.
Drawing sheets and tracing paper are separate choices because their preparation differs. The cutting mat describes a shared station, and the low-tack tape includes a wall-surface caution. Those concrete details make the expanded category useful; the accordion is not simply hiding repeated generic paragraphs.
Open Paper and mark Drawing sheets packed.
Open Tools, mark Pencils and markers packed, then return to Paper.
Check that both choices remain selected and the summary reports two of six.
Flowbite Design System A Drawer Instance Handles Visibility and Backdrop
A Drawer Instance Handles Visibility and Backdrop
The materials panel is initialized through new Drawer with placement right, backdrop true and bodyScrolling false. Opening the panel calls show; Close calls hide. The native Flowbite implementation applies the positioning and transition classes, backdrop and visibility attributes. This page deliberately uses the JavaScript API rather than mixing it with a second data-attribute initializer for the same panel.
The drawer width is twenty-four rem with max-w-full, so it remains usable at a narrow viewport. Its content can scroll vertically inside the panel. The page itself is sized by its content; the drawer’s h-screen is an intentional fixed overlay and does not create a minimum-height loop for the embedded page.
Flowbite Design System Add Focus Management Around the Drawer Lifecycle
Add Focus Management Around the Drawer Lifecycle
The onShow callback makes the background main element inert and focuses the Prepared by input. onHide removes inert and returns focus to Prepare materials note. A small keydown handler loops Tab and Shift+Tab between the panel’s first and last controls. These additions are visible in the complete source rather than assumed to be provided by a styling class.
Flowbite handles Escape for its drawer. The example’s callbacks ensure that whichever close path is used, the background becomes interactive again. The panel is labeled with aria-labelledby; the close control has an explicit accessible name. A real application should test this behavior alongside its own portals and routing, not treat a library name as a blanket accessibility guarantee.
Flowbite Design System Validate the Owner and Save Only Local Text
Validate the Owner and Save Only Local Text
Prepared by is required with minimum and maximum length constraints. The submit handler additionally trims the name and rejects whitespace-only input. Session note is optional and limited to 240 characters. The remaining-items summary is refreshed when the drawer opens, so it describes the current checklist rather than an earlier packing state.
Saving closes the drawer and announces a local note containing the owner, packed count and optional text. No email is sent and no shared document is created. User strings are assigned with textContent. Editing the packing checklist clears the old result notice because its previous count would otherwise become misleading.
Flowbite Design System Include Classes Generated by the JavaScript Library
Include Classes Generated by the JavaScript Library
The Tailwind input imports the default Flowbite theme and registers flowbite/plugin. Explicit source directives cover the HTML, the application module and Flowbite’s ESM library. The last source is significant: classes that the library adds at runtime must exist in the generated stylesheet even when they were not written directly into the initial HTML.
The bundle imports Accordion and Drawer from flowbite. The supplied example initializes each instance once after its markup exists. Framework applications that mount and unmount views should pair lifecycle setup with instance cleanup to avoid duplicate listeners. The local page has one mount and no client-side route transitions.
Flowbite Design System A Packing Aid with Visible Implementation Boundaries
A Packing Aid with Visible Implementation Boundaries
The field guide demonstrates a content-heavy accordion, persistent checkbox state and an overlay workflow. It has no fabricated stock data or remote procurement result. All six materials are sample workshop preparation tasks, and the saved note remains in memory for the duration of the page.
The default semantic theme, component classes and JavaScript behavior are from Flowbite; the workshop content, original illustration and focus augmentation are application code. This separation lets a reader copy a useful composition while understanding which responsibilities the library actually covers.
Use Flowbite’s stateful instance for panel visibility.
Keep checklist data and derived progress in application logic.
Handle real purchasing or shared persistence only through an explicit backend integration.
Buttons connect to panel IDs through aria-controls.
The drawer is labeled by its heading.
The progressbar exposes the same count shown to sighted users.
Native Flowbite instances and local state
Accordion/Drawer initialization plus application-specific checklist and focus management.
javascript
import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();
Save the supplied interaction as main.js and compile it to bundle.js as shown in setup.
The viewport and native asset loading are included.
04
Flowbite Design System Agent Setup
Implementation Starting Point
Verified Flowbite 4.0.2 with Tailwind CSS 4.3.3. Adapt the node_modules source path to the actual location of input.css. No remote fonts are required.
css
/* npm install [email protected] */
/* npm install -D [email protected] @tailwindcss/[email protected] esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
A Prompt for Your Project
Agent Prompt
Use the complete Flowbite 4.0.2 workshop packing guide, including its Tailwind source discovery, native Accordion and Drawer initialization. Keep the grouped materials and checklist state connected to the guide, and validate the owner information before recording a local packing note. Preserve the drawer’s keyboard focus, inert background handling and dismissal behavior. Keep original illustration CSS separate from the library’s semantic theme. No service ticket or external submission should be introduced into this local packing workflow.
05
Flowbite Design System Sources and Scope
Flowbite 4.0.2 with its default theme. The packing content, decorative artwork and focus augmentation are original. Materials notes remain local.
