App dashboard
A product interface starts with its frame, the navigation that stays while the screens change. Inside it sit the screens people open every day, the overview, the data, the messages and the settings.
The order
Top to bottom, the way the sections sit on the finished page.
Step 1 / 7 · App shells
App shell
The frame with header, navigation and content area that every screen lives in.
The frame of an application. It places navigation, header, panes and content on desktop, tablet and phone, with a sidebar that turns into a rail and a drawer, navigation in the header, three panes that push on phones, an inspector that becomes a sheet and a focus mode for one task.
Step 3 / 7 · Dashboards
Dashboard
The start screen with the numbers and lists that matter today.
Complete application screens in a sidebar frame, with a tab bar of their own on phones.
Step 4 / 7 · Tables
Data table
Sorting, filters, selection and paging for the records behind the numbers.
Tables that stay readable: search, filters, selection, sorting, pages and details. Phones get a compact list.
Step 5 / 7 · Charts
Line chart
Trends over time, the chart most dashboards need first.
One or several lines over time with nice ticks, a crosshair tooltip, arrow key stepping and a data table for screen readers.
Step 6 / 7 · Notifications
Notifications
What happened while people were away, with read state and actions.
Inbox, audit log, bell popover, channel preferences, weekly digest and a changelog feed. Complete screens in an app frame, with their own phone layouts.
Step 7 / 7 · Settings
Settings
Profile, team, notifications and billing in one consistent place.
Settings pages with a section column, cards per topic and a save bar that appears on change.
Install all of it at once
One command puts every component of this collection into your project.
aiw add @ai-website/app-shell @ai-website/sidebar @ai-website/dashboard @ai-website/data-table @ai-website/line-chart @ai-website/notifications @ai-website/settingsPrompt for your AI assistant
Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.
Build an app dashboard with the UI Kit. Use App shell, Sidebar, Dashboard, Data table, Line chart, Notifications and Settings in this order. Write real copy for my offer and check the page in light and dark.More collections
- SaaS landing pageFrom the promise to the trial
- Local businessCafé, shop or trade around the corner
- Medical practiceTrust, hours and the next free slot
- Online shopFrom the shelf to the order
- PortfolioWork first, then the person behind it
- Blog or magazineFront page, reading and coming back
- EventProgram, tickets and the countdown
- AI productWhat the AI does, shown honestly
- Creator pageOne person, their work and their audience