This is a static progress bar set to an infinite value.
This dynamic progress bar refreshes its state from the backend. When it completes, it updates its value to complete.
Finite
This is a static progress bar set to a finite value.
This dynamic progress bar refreshes its state from the backend. When it completes, it sets the value of the state variable
done to 1 which results in hiding the progress bar and displaying a completion message instead.
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