Layout demo
Overview
This page demonstrates the Layout demo
This is a layout demo
Page chrome uses PageHead, then an inline Notice, then panels.
Post views improve visibility in feeds
439
Post views
from previous month
Upvotes help us learn how you engage
0
Upvotes received
from previous month
Followers grow visibility and engagement
0
Total followers
No change from previous month
Sidebar + Main
sidebar description
This page demonstrates the SidebarLayout shell with a site-level StickyHeader, Sidebar, and MainContainer. Compose them from @/components/ui.
Account
Segmented tabs use type="segmented" and size="sm".
TabsIndicator is the sliding primary pill behind the active tab. Default size is md.
Toast
size is md (default) or lg, matching Notice.
App-wide notifications via useToastManager. Provider lives in the root layout.
Panel head
panel head description
Use PanelHead for a flush title row and PanelFoot for a flush action row.
Loading
Centered status block for a panel or dialog body. Icon, spinner, then copy.
Loading members…
Loading in dialog
Keep DialogHead and DialogFoot; put Loading inside DialogContent.
Modals
Popover
Anchored overlay — closes on outside click or Escape. Pass showClose to PopoverPopup for a corner close. Use openOnHover on the trigger to open on hover.
Tooltip
Hover or focus hint. TooltipProvider is already at the root — do not remount it. Use render on TooltipTrigger so you do not nest buttons. Disabled controls need a wrapping span because they ignore pointer events. align="start" lines the tooltip up with the trigger's start edge (left in LTR).
Menu
Dropdown of actions — closes on item click, outside click, or Escape. Pass variant="destructive" on MenuItem for delete. Nested menus use MenuSubmenuRoot.
Drawer
Slide-in panel with swipe-to-dismiss. DrawerHead and DrawerFoot stay pinned; DrawerContent scrolls when the body is taller than the remaining space. Bottom sheets overlay the page; side panels sit under the site header like the sidebar.
Dialog
General modal — closes on backdrop click or Escape. DialogHead and DialogFoot stay pinned; DialogContent scrolls past maxHeight. Pass showClose on DialogHead — do not also pass it on DialogPopup.
Alert dialog
Confirmation modal — requires an explicit action to dismiss.