Dashboards

Build a SaaS app shell layout. Left sidebar 240px wide, collapsible to 56px (icons only). Sidebar contents: workspace switcher at top (avatar + name, dropdown), search input (Cmd+K hint), then grouped nav links (Inbox, Projects, Teams) each with a small leading icon and an optional trailing count badge. Bottom of sidebar: user avatar + name + settings cog. Topbar: 48px tall, contains breadcrumbs on the left, a "New" primary CTA + a notifications bell + user avatar on the right. Main canvas: padding 32px, background slightly lighter than sidebar. Dark theme. Crisp 1px dividers between regions.

Build a data table component. Top toolbar: search input on the left, filter chips next to it (status, owner, date), view switcher on the right (List / Board / Calendar). Bulk action bar appears when rows are selected. Table: 40px row height, checkbox in first column, sortable headers (caret indicator on active sort), resizable column borders, no zebra stripes. Just 1px row dividers at rgba(255,255,255,0.04). Cell padding 12px horizontal. Empty state: centered illustration + "No items yet" + a primary CTA. Footer: p

Build a row of 4 KPI cards. Each card: rounded-2xl, 1px border rgba(255,255,255,0.08), padding 20px. Inside: small uppercase tracking-widest label (11px ink-400), a 32px number in tabular monospace, a one-line delta below ("+12.4% vs last week") with a colored arrow icon (green up / red down), and a tiny inline SVG sparkline (60×24px) on the right side. On hover the border brightens. Make the 4 cards equal-width on desktop and stack 2x2 on tablet, 1x4 on mobile.

Build a kanban board. Horizontally scrollable row of 4 columns (Backlog, Todo, In Progress, Done). Each column: header with status name, count badge, '+' add button. Below: scrollable list of cards, each 280px wide, rounded-xl, padding 12px. Title (14px medium), tag pills, footer row with assignee avatar + due date. Drag-and-drop using dnd-kit: dragged card lifts with scale 1.02 + shadow; drop indicators show as 2px accent lines between cards. Update card status optimistically on drop.

Build a vertical activity timeline. A 2px vertical connector line down the left. Each event row: a 24px circle node anchored to the line (filled with the event-type color), an actor avatar inline, then the action text ('mira opened this issue · 12m ago'). Comments expand into a card containing the comment body. Date dividers ('Yesterday', 'May 23') break up groups of events. Infinite scroll at the bottom; sticky 'Add comment' composer below the feed.

Build a settings page. 2-column layout: left sticky rail (220px wide) with grouped section links (Account, Workspace, Members, Billing, Notifications, Security). Right column: scrollable content. Each section starts with a 22px heading. Within: stacked rows of settings, each row laid out as 'label + description' on the left and a control (input, switch, select) on the right, 1px divider between rows. When any control is dirty, a sticky bottom bar slides up with 'Discard' and 'Save changes' buttons.

Build a billing overview panel. 12-col grid. Top-left card (col-span-8): current plan name, price, renewal date, 'Manage subscription →' link. Top-right card (col-span-4): payment method (card brand + last 4), 'Update →'. Below: a Usage card spanning full width with 4 stacked meter rows (Storage, Bandwidth, Requests, Members) each with a thin progress bar, used/limit numbers in mono, and an inline overage warning when > 80%. At the bottom: an invoice history table with date / amount / status / download columns.

Build a team members table. Top bar: search input on the left, role filter chip group next to it, primary 'Invite members' button on the right (opens a modal). Table rows: 40px avatar + name + email stacked on the left, role chip (Admin / Member / Viewer) in the middle, last-active timestamp, and a '⋯' menu on the right. Pending invites pinned above active members with a soft amber 'Pending' tint. Role chip opens a popover to change role; '⋯' opens Remove / Resend / Transfer ownership.

Build an analytics overview. Top row: time-range selector (segmented control: 7d, 30d, 90d, Custom) on the right with the section heading on the left. Then a 4-column KPI row reusing the metric-cards component. Below: a full-width line chart with a soft accent fill and a comparison-line for the previous period in a muted color, plus a hover crosshair with a value tooltip. Beneath: two side-by-side bar charts (top countries, top sources). All charts respect the active range selection and animate on transition.

Build a workspace search palette opened with ⌘K. Modal 640px wide, padding 0, surface fill, strong shadow. Search input at top (no border, focus from open). Below: grouped result lists ('Issues', 'Docs', 'People', 'Actions') each with an uppercase 11px label. Per row: leading entity icon, primary label, secondary muted metadata, trailing kbd shortcut for top results. Empty input shows a Recent section. Arrow keys cycle across all results regardless of group. Powered by a fuzzy-search index (e.g. cmdk + a small client store).