Interactive canvas
Components
Tabs, popovers, dialogs, alerts, dropdowns, and accordions arranged as a compact component lab instead of isolated documentation snippets.
Interactive component canvas
This route groups tabs, dropdowns, popovers, dialogs, buttons, and alerts into the kind of exploratory workspace you would ship in a demo app.
Real demos should show components behaving inside patterns like task rows, approvals, and settings blocks, not only in isolated docs frames.
Pattern 1 - Dense list rows
Pair a list row with status chips and ghost menus for operational pages.
Pattern 2 - Context popovers
Use popovers for filter summaries and quick read-only context.
Popover example
Dialog example
Dialogs are still useful for previewing a compact flow when the content needs focus.
This preview keeps the existing PUI design language while demonstrating a tighter, route-driven layout shell.
Shown inside the dialog
Buttons, body copy, and footer actions stay on the same radius and border scale as the rest of the demo.