1. Examples

Showcase Hub

Opinionated Bootstrap for data-heavy applications

This package now shows the shell, menus, breadcrumbs, filter toolbars, cards, tabs, tables, list patterns, side rails, and sticky footer in a few realistic page shapes.

What To Review

Tighter radius system Sidebar menu pattern Inline field wrappers Three-column detail rail Validation and bulk grid patterns

The demos are meant to show reusable screen composition, not just isolated components. The page chrome is part of the language now.

Recommended flow:

Start with the dashboard for the high-level visual tone, check the work queue for table and filter density, then use the record detail page for column layout, action rails, and secondary navigation.

Included Page Types

Dashboard with summary blocks, alerts, tabs, and lists Sidebar work queue with table filters and pagination Three-column record detail with accordion and action rail Native-first details, menu, and dialog patterns Modal and offcanvas workflows with validation and assignment patterns Operational states for empty, no-results, loading, error, permission, and file workflows Validation, dense filter bars, and read-only/edit form patterns Bulk-action data grid with sticky headers, row states, and a side drawer Reference catalog with copyable control markup

Dashboard

Shows the broadest component mix: KPI blocks, a filter toolbar, alert/empty states, folder tabs, a table, and the tuned vertical list.

Useful for checking overall tone, density, and surface rhythm.

Work Queue

Demonstrates the sidebar shell, menu sections, line tabs, compact filters, dense tables, and pagination in a realistic operations screen.

Useful for evaluating table-heavy apps and operator workflow pages.

Record Detail

Shows a three-column detail pattern with secondary navigation, an accordion section stack, right-rail actions, and a comfy activity feed.

Useful for entity detail screens, case review flows, and configuration pages.

Native Patterns

Shows `

` disclosures, a native summary-based menu, and styled `` patterns for both centered modals and drawer-style side sheets so you can compare the browser-element approach against the helper path.

Useful when you want less JS and stronger native semantics.

Reference

Shows the standard control markup directly under a rendered preview so you can copy and adapt buttons, fields, alerts, tabs, tables, and native primitives.

Useful as the practical starter page when building a new screen.

Overlay Workflows

Shows helper-driven modal and offcanvas patterns using the same validation, key-value, chip, and drawer primitives as the rest of the kit.

Useful for approval steps, side-panel editing, and high-consequence confirmation flows.

States

Covers empty vs no-results, loading, error, permission, toasts, activity timelines, and file/document treatment.

Useful for the non-happy-path work that B2B products hit every day.

Forms

Shows validation, error summaries, required labels, dense filter bars, chips, and read-only/edit detail surfaces.

Useful for settings screens, import forms, and operator review workflows.

Advanced Data Grid

Shows bulk action bars, sticky headers, selected and exception row states, busy buttons, and a side drawer that preserves grid context.

Useful for operations pages where the grid is the product.