Showcases
Composed examples showing how the components fit together in real-world layouts.
Email app
List-detail layout with search app bar, navigation rail, multi-select inbox, and compose dialog.
CRM pipeline
Kanban board of sales deals with funnel widget, filter chips, per-card menus, and add-deal form.
ERP · Purchase orders
Table-style enterprise list with KPI cards, status filters, sortable columns, and a tabbed detail dialog.
Field service · mobile
Mobile-first work-order list: bottom navigation + FAB, filters and actions in bottom sheets, adaptive side-sheet detail. Resize to phone width.
Buttons & Actions
Triggers for primary, secondary, and contextual actions.
material-button
Five MD3 styles via variant; sizes XS–XL; form-associated.
material-button-group
MD3 Expressive group — standard (gap container) and connected (fused inner corners). Single / multi select with toggle icon buttons.
material-fab
MD3 floating action button — three sizes (small / medium / large) and six color sets. Form-associated; works as a popover trigger.
material-fab-menu
MD3 Expressive FAB menu — opens 2–6 related actions above the FAB, with a contrasting close button. Three color sets.
material-icon-button
MD3 Expressive icon buttons — variants × sizes × shape × width, toggle.
material-split-button
MD3 Expressive split button — leading action + trailing menu; four variants, five sizes, rotating chevron.
Form fields
Form-associated input controls. All bind to native FormData.
material-autocomplete
Editable combobox: filters slotted options client-side, or queries a
remote src endpoint (select2-compatible JSON). Single or multiple chips; form-associated.
material-calendar
MD3 standalone calendar — 360×456dp grid, single-date selection,
month/year picker views, locale-aware via Intl or Django jsi18n.
material-checkbox
18dp box, 48dp target; states, error, help text; form-associated.
material-chip
Assist / filter / input / suggestion chips. 32dp height, 8dp corner; elevated, selected, disabled;
input chips emit remove; form-associated.
material-data-table
Progressive enhancement over a server-rendered <table> (Django / Unpoly). Sort links, form-posting selection, sticky
header, row links. Virtual rows, column resize/reorder, pinned
columns, row grouping, inline editing. M2 anatomy, M3 tokens.
material-transfer
Dual listbox — Django filter_horizontal analog: two
panels, per-side search, move buttons; posts chosen values for getlist().
material-tree
Tree view — expand/collapse, tri-state checkbox selection, lazy
children. Nested markup or flat mptt-style rows with level; form-posts checked values.
material-date-field
Text-field + calendar trigger. Opens an adaptive material-dialog with a material-calendar;
hidden ISO input for form posts.
material-date-range-field
Date range picker — modal material-calendar range with
band + hover preview; hidden ISO pair posts Django's date_from/date_to.
material-datetime-field
Text-field + event trigger. Opens an adaptive material-dialog hosting material-calendar and material-time-picker; hidden ISO YYYY-MM-DDTHH:MM input for form posts.
material-masked-field
Pattern-masked entry (# digit, A letter, * alnum) — phones, tax IDs; posts formatted or raw
(unmask).
material-number-field
Number entry — steppers, min/max/step, decimals, locale grouping, prefix/suffix; posts a canonical dot-decimal string.
material-radio
20dp ring, 48dp target; material-radio-group coordinates value, ARIA roles, and arrow-key navigation; form-associated.
material-rich-text
Rich text for notes — marks, lists, links, undo, all over contenteditable; form-associated, posts HTML (sanitize server-side).
material-select
MD3 single-select — a textfield + chevron trigger opens a popover
menu of material-option children. Supports material-optgroup, type-ahead, clearable, form-associated.
material-slider
MD3 expressive slider — single, range, centered, discrete; five sizes; horizontal & vertical; value indicator with formatter; form-associated.
material-switch
52×32 track; handle grows on selection / press; optional handle icons; form-associated with label, help, error, required, readonly.
material-textarea
Multi-line MD3 text area — fixed rows or auto-resize between min/max; form-associated.
material-textfield · file-field
MD3 text field — floating label, supporting/error text, icons, file field.
material-dropzone
Drag-and-drop multi-file area — form-posted native input
(FILES.getlist), image previews, size/type validation,
per-file progress API.
material-time-field
Text-field + schedule trigger. Opens an adaptive material-dialog with a material-time-picker;
hidden ISO HH:MM input for form posts.
material-time-picker
MD3 standalone time picker — dial + input variants, 12/24h,
locale-aware via Intl or Django jsi18n.
Containment
Surfaces that group related content — cards, dialogs, lists, overlays.
material-avatar
Image / initials / icon avatar — size scale, hash-stable auto
colors; material-avatar-group stacks with a +N chip.
material-card
Elevated / filled / outlined cards with full MD3 anatomy
(media, headline, subhead, supporting, actions). Actionable via href or clickable; supports disabled.
material-carousel
MD3 carousel — uncontained or uncontained-multi-aspect layouts, with
parallax, scroll-snap, and keyboard arrow navigation. Items are
actionable via href or clickable.
material-dialog
MD3 modal — basic / full-screen / adaptive. Native <dialog> + scrim;
opens via data-dialog-target, native command, or .show().
material-bottom-sheet
MD3 bottom sheet — modal (scrim, swipe-to-dismiss) and standard;
drag handle expands peek ↔ full. Opens via the same data-dialog-target trigger as dialogs.
material-side-sheet
MD3 side sheet — modal over a scrim, standard in-flow panel, or adaptive (standard ≥840px). Trailing detail/filter surface for CRM/ERP.
material-skeleton
Shimmer loading placeholders — text lines, avatar circle, media
rectangle; composites are plain markup. Pairs with Unpoly up-placeholder; reduced-motion falls back to a pulse.
material-stepper
Multi-step wizard — M2 anatomy, M3 tokens. Client-side, with
constraint-validation gating. Or server-driven: an indicator for
django-formtools, controlled via wizard_goto_step events.
Horizontal / vertical, linear / free-order.
material-list
MD3 list — 1/2/3-line items, leading/trailing slots, single & multi selection.
material-menu
MD3 vertical menu with leading/trailing slots; popover-anchored, viewport-aware.
material-tooltip
Plain & rich MD3 tooltips. Hover, focus, or long-press; rich variant supports persistent click-to-open with subhead and actions.
Navigation & Layout
Top-level structure — app bars, rails, tab bars, toolbars.
material-app-bar
MD3 Expressive top app bar — small / medium-flexible / large-flexible; collapses to small on scroll.
material-breadcrumbs
Server-rendered breadcrumb links with CSS chevron separators
(RTL-mirrored); marks the last crumb with aria-current.
material-command-palette
⌘K quick actions — fuzzy search, sections, keyboard nav;
href items navigate the Unpoly-friendly way; others emit materialCommand.
material-navigation-bar
MD3 Expressive nav bar — 3–5 destinations at the bottom edge. Vertical
(compact) or horizontal (medium) items, sharing material-navigation-item.
material-navigation-group
Expandable accordion group for the nav rail — nested items, chevron + height animation, localStorage persistence.
material-navigation-rail
MD3 Expressive nav rail — collapsed (96dp) / expanded (220–360dp), with
shared material-navigation-item.
material-pagination
Page navigation with ellipsis windowing — server-driven links via href-template (Unpoly), or client-side via materialPageChange.
material-search
MD3 Search — contained pill bar + search view: docked suggestions on desktop, full-screen on compact; slotted, JS, or remote sources, form-associated.
material-search-app-bar
MD3 Expressive search variant — embedded search container, form-associated, inside/outside icon slots.
material-tabs
MD3 tabs — primary / secondary variants, fixed or scrollable, optional icons + badges, anchor or button mode.
material-toolbar
MD3 Expressive docked & floating toolbars. Standard / vibrant color schemes; horizontal / vertical orientation. Layout-only container — caller handles positioning.
Feedback & Status
Notifications, badges, and progress indicators.
material-badge
MD3 badge — small dot or large pill (up to 4 chars). Slots into material-icon-button, material-navigation-item, and any trailing slot.
material-circular-progress
MD3 circular — determinate / indeterminate × flat / wavy, 24–240dp.
For long waits (5s+); use material-loading-indicator for short.
material-linear-progress
MD3 linear — determinate / indeterminate × flat / wavy, configurable thickness, stop indicator. For long waits (5s+).
material-loading-indicator
MD3 Expressive — spins while morphing through 7 shapes; default / contained variants, 24–240dp.
material-snackbar
MD3 transient bottom message + queue host. One visible at a time;
replace-by-id; Django messages-friendly imperative API.