defuss-shadcn / Application / Scaffolds / scaffold-admin-dashboard
Admin Dashboard
A typical admin dashboard as a clickdummy: navigate with the sidebar, press ⌘K, switch the revenue period, select orders, create one, invite a customer, flip dark mode. Every control is a shipped component; the scaffold adds only layout glue and a few lines of wiring. Part of the Application Scaffolds.
On this page (2)
§Admin dashboard
The whole application in one source. Views are URL fragments (#orders, #customers, #settings) shown with :target - the browser history works; ⌘K opens the Command palette; New order opens a Sheet; checking orders reveals the bulk bar (:has); the 7d / 30d / 12m switch morphs the Chart; the moon toggles dark mode.
§How it works
The scaffold is a page, not a component: it composes the library and keeps its own glue small.
- Shell - Sidebar (collapsible with the trigger or ⌘B, a mobile drawer below 44rem of width), a top bar with Breadcrumb, a Popover of notifications and the theme toggle.
- Navigation - every view is a section with an id; links point at
#ordersand CSS shows.dash-view:target(the first view when nothing is targeted). Back and forward buttons work, views are linkable. Six lines of script movearia-currentand the breadcrumb. - Command palette - the Command component: ⌘K, type to filter, ↵ to run; items jump to views or open the Sheet and the Dialog.
- Overview - KPI cards with the Statistic trend chips and SVG sparklines, two Charts (the Toggle Group swaps the series and the chart morphs), a Table with Dropdown row actions and Progress bars.
- Orders - Tabs, a search field, a select, checkboxes - the bulk-action bar appears through
:has(:checked), no script - and Pagination. New order opens a Sheet with a Number Input; submitting shows a Toast. - Customers and Settings - Avatars, Badges, a Dialog to invite, Switches, and an Alert Dialog guarding the danger zone.
- Full screen - app-admin-dashboard.html is generated from this page's example at build time: one source, two ways to view it.
Comments, ideas or improvements? Edit this page's source on GitHub