Demos
Realistic scenarios, each in all three modes with its source. Demos always show the latest release.
App shell
Dashboard on a tinted canvas
An analytics overview made of stat cards and panels. Canvas tints the main area so each white card has an edge; at phone width the sidebar becomes a drawer behind the menu button.
Full-width table
A list page where the table is the page. In Tinted, the default, the sidebar takes the page tint and the table sits on white with no card around it. Sorting and paging are links, so they work with JavaScript off.
Docs with an outline
A documentation article on one white page (Flat). Its headings list themselves in OnThisPage in the AppAside from 1024px up, and on phones the sidebar's drawer opens from the right, where the menu button moves.
Reading column
A blog article with no sidebar. ContentWidth centers the header, the article and the footer on one column so their edges line up, while the bars, their lines and a full-bleed band stay full width.
Scrolling like a desktop app
A mail client. ScrollMode.Main makes the shell fill the window and scrolls only the message list, so the header, the folders and the footer never move.
Collapsible icon rail
On wide screens the menu button shrinks the sidebar to an icon rail, with labels as tooltips and the account pinned in SidebarFooter. Inset raises the work area as one panel in a tinted frame.
Full-height dark sidebar
A hosting dashboard whose sidebar runs the full height of the window, with the brand in SidebarHeader lined up with the header beside it. ColorScheme makes the sidebar dark in a light app.
Menu panel with header links
A guide with site links in the header and chapters in the sidebar. At phone width the sidebar opens as a panel under the header, with the header's links at its top so there is one menu, and the menu button becomes its close button.
Collapsed from C#
A notes app with a focus-mode button. @bind-Collapsed follows the icon rail on an interactive page, and C# can collapse or expand it.
Content site
A site with no sidebar: a hero and a band of project cards on a 72rem column. From 768px up SiteNav is a row of links in the header; below it a menu button opens the same links in a panel, with SiteNavFooter's button under them.
Typography
Release notes
A changelog post: the title, byline and links are components, and the body is HTML from Markdown, set large for reading in an article-width column.
Install guide
A setup page: numbered steps, a command with its own copy button, and files named in their header with the lines to change highlighted.
Actions
Several submit buttons
One form, three actions: each submit button posts its own Name and Value, so a single handler knows which was pressed. Works with JavaScript off.
Editor toolbar
A document toolbar in a Toolbar: a joined group of formatting buttons, icon buttons with labels, and the main action on the right. At phone width what doesn't fit moves into the … menu, with JavaScript off too.
In an app header
An app header's actions in a Toolbar that takes the free space: on phones they move into the … menu, and Compose, with the highest priority, stays longest.
Forms
Sign-up form
A complete sign-up: labels, required marks, lengths and input types come from the model's DataAnnotations, the server checks the rest, such as the terms, and every control posts with JavaScript off.
Filtered order list
An orders page: a search, a status menu and a checkbox above a sortable, paged table. The filters live in the URL, so a filtered view can be bookmarked, and filtering keeps the sort and starts again at page 1.
Selection
Notification settings
A settings page: switches (and one checkbox) at the end of each row with hints under their labels, grouped in fieldsets with dividers and section icons, and one form that saves them all. Every switch posts like a checkbox, so it works with JavaScript off.
Navigation
Tabs in a form
Account details split across two tabs that still post as one form: after a failed save, the first tab with errors opens and each tab counts its own. With JavaScript off there are no tabs, and both sections show, one under the other.
Checkout
A four-step checkout with the step in the address: each step's form posts and the server sends the browser on to the next, finished steps link back, and an order summary sits beside it. Works with JavaScript off.
Feedback
Banner that stays dismissed
A maintenance notice above a small app: close it, move between pages and reload, and the server leaves it out for a year, until a new notice gets a new key. With JavaScript off it closes, but comes back on the next page.
Inbox with undo
An inbox where each Archive button posts a form and a toast offers Undo. On static pages the post redirects with the archived ids in the address, the toast follows, and Undo is a link; on interactive pages Undo runs C#. Works with JavaScript off.
Data display
Profile card
A team member's card: a cover, an avatar with an online dot, a role badge, contact details in a DescriptionList, skills as tags and two actions in the footer.
Store dashboard
Stat cards for revenue, orders, refunds and conversion over a monthly goal and top products. The period is a link, so it works in every mode, and refunds going down shows as good news.