SaaS app screens
Inside a work tool people plan, talk, track and report. These screens cover that day in the order a team meets them, from the board in the morning to the report at the end of the week, each one ready for your data.
The order
Top to bottom, the way the sections sit on the finished page.
Step 1 / 13 · 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 2 / 13 · Tasks and planning
Kanban board
The board shows every task by status, with drag and drop, swimlanes and limits per column.
Kanban boards with limits per column, cards you move by mouse, touch, keyboard or menu, swimlanes, a sprint with burndown, card details and filters.
Step 3 / 13 · Tasks and planning
Task list
The list of what is due, grouped, sorted by priority and with a view for my day.
Task screens with priorities, subtasks, filters and a satisfying tick. Grouped by due date, a sortable table, an urgent and important matrix, My Day and a task page.
Step 4 / 13 · Tasks and planning
Scheduler
Resources and shifts on a week plan, with capacity and free slots in view.
Planning for people and rooms. Bookings to drag and resize with conflicts, a shift plan with open shifts, rooms with a line for now, capacity and a common free time.
Step 5 / 13 · Tasks and planning
Time tracker
A timer and the timesheet behind it, for teams that bill by the hour.
Time tracking with a live timer, a weekly timesheet you fill like a spreadsheet, entries by day to edit and bill, a week summary with charts and a focus timer.
Step 6 / 13 · Team and collaboration
Messenger
Channels, threads and direct messages keep the talk next to the work.
Messaging for apps. Chats with replies, reactions, photos, files and voice, typing and read status, channels with threads, a floating messenger and search.
Step 7 / 13 · Team and collaboration
Rich text editor
Notes, specs and comments with formatting, written right in the product.
Text editing without a package. A document with full toolbar and word count, comments with @ mentions, Markdown with preview, a selection toolbar and email.
Step 8 / 13 · Files
File preview
Images, documents, tables and code open in place, without a download.
File previews for apps. Images with zoom and filmstrip, code with search and outline, a spreadsheet grid, a paged PDF with search and a quick look.
Step 9 / 13 · CRM and invoicing
CRM contact
A contact with history, deals and notes for every product that sells or supports.
A CRM contact in five screens. Profile with tabs, a history with filters and new entries, deals as a stage ladder, notes with mentions and a list with detail.
Step 10 / 13 · CRM and invoicing
Invoice
Invoices with line items, payment state and reminders, ready to print or send.
Invoices in five screens. A printable sheet, an editor with live sums, a list with filters and bulk actions, a page to pay and reminders in stages.
Step 11 / 13 · Analytics and reports
Analytics overview
Key figures and trends of the week in one overview.
Analytics in five screens. Key figures with the period before, a live view, a funnel with cohorts and goals, the audience and a period comparison.
Step 12 / 13 · Analytics and reports
Report builder
A report builder lets people pick metrics, filters and a schedule for the numbers they share.
Build reports in five screens. Columns with groups and totals, charts from a measure, AND and OR filters, schedule and share, and templates to start from.
Step 13 / 13 · Team and collaboration
Team management
Members, roles and seats close the loop for the people who run the workspace.
Team screens for apps. Members with roles and a careful remove, invitations with checked addresses and a link, roles with rights, teams as a tree and seats.
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/kanban-board @ai-website/task-list @ai-website/scheduler @ai-website/time-tracker @ai-website/messenger @ai-website/rich-text-editor @ai-website/file-preview @ai-website/crm-contact @ai-website/invoice @ai-website/analytics-overview @ai-website/report-builder @ai-website/team-managementPrompt for your AI assistant
Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.
Build the screens of a SaaS app with the UI Kit. Use App shell, Kanban board, Task list, Scheduler, Time tracker, Messenger, Rich text editor, File preview, CRM contact, Invoice, Analytics overview, Report builder and Team management 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
- App dashboardThe frame and the screens inside it
- AI productWhat the AI does, shown honestly
- Creator pageOne person, their work and their audience
- 3D and motionDepth that carries the message
- Shop checkoutFrom add to cart to the return