The gallery is used to display a collection of nested widgets in a flexible layout that adjusts
to the width of the screen and the nested widgets. Use the slider to change the size of the state avatars.
Evenly sized items
Unevenly sized items
Alaska
Alabama
Arkansas
Arizona
California
Colorado
Connecticut
Delaware
Florida
Georgia
Hawaii
Iowa
Idaho
Illinois
Indiana
Kansas
Kentucky
Louisiana
Massachusetts
Maryland
Maine
Michigan
Minnesota
Missouri
Mississippi
Montana
North Carolina
North Dakota
Nebraska
New Hampshire
New Jersey
New Mexico
Nevada
New York
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Virginia
Vermont
Washington
Wisconsin
West Virginia
Wyoming
text_format Text formatting
The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.open_in_newweb_assetdock_to_right
code_blocks Code blocks
Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.open_in_newweb_assetdock_to_right
pending Progress widget
Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.open_in_newweb_assetdock_to_right
construction Toolbar widget
An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.open_in_newweb_assetdock_to_right
collections Gallery widget
A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.open_in_newweb_assetdock_to_right
dashboard Deck of cards widget
A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.open_in_newweb_assetdock_to_right
tab Tab switcher widget
Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.open_in_newweb_assetdock_to_right
explore Navigation widgets
The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.open_in_newweb_assetdock_to_right
edit Form input widgets
Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.open_in_newweb_assetdock_to_right
checklist Form validation
Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.open_in_newweb_assetdock_to_right
table_view Data table
A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.open_in_newweb_assetdock_to_right
edit_note CRUD
Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.open_in_newweb_assetdock_to_right
bar_chart Charts
Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.open_in_newweb_assetdock_to_right
account_tree Mermaid
Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.open_in_newweb_assetdock_to_right