--- name: monstarx-ui description: Build polished AI-native interface components — agent screen, thinking trace, tool chips, task rows, feature plan, request queue tray, image generation grid, streaming answer, context cards, approval card, recommendation card, voice agent orb, comments on a preview, prompt bar, model picker, dictation waveform, selection actions, command palette, diff table, insight cards, records table, filter table, code diff, log stream, flowchart canvas, kanban board, live cursors and presence, version timeline, sidebar navigation, onboarding checklist, settings form, stepper / wizard, data import mapping, file drop and attachments, permission dialog, booking slot picker, pricing table, toast stack, notification inbox, empty states. Use when an app needs agent, chat, input, data, workflow or feedback UI; each section is a complete, stack-agnostic spec with states, interactions and accessibility. --- # MonstarX UI — components for AI-native apps > Free, live React + Tailwind components for AI apps: thinking traces, task rows, approval cards, prompt bars, data tables, kanban, booking and more. Copy the code, or the prompt for MonstarX or your coding agent. 40 components, each a live demo at https://monstarx.com/ui with its React + Tailwind source. Below, every component's build prompt: hand one to Claude Code, Cursor, Codex or any coding agent, or ask MonstarX (https://monstarx.com/) to build it into your app. A coding agent can also hand a finished app to MonstarX to host, test and publish over MCP: https://monstarx.com/docs/mcp.md. ## For coding agents - **MCP server** (public, read-only, no sign-in): https://monstarx.com/ui/mcp — Streamable HTTP. Claude Code: `claude mcp add --transport http monstarx-ui https://monstarx.com/ui/mcp`. Tools: search_components, list_components, get_component (the source, dependencies, variants and full spec), get_prompt, get_guidelines; resources ui://components/{id} and ui://guidelines; prompts add-component and find-component. Setup for every client: https://monstarx.com/ui#agents. - **shadcn registry**: `npx shadcn@latest add https://monstarx.com/ui/r/.json` writes the component and installs lucide-react (index: https://monstarx.com/ui/r/registry.json). ## Contents - Agent states: [Agent screen](#agent-screen), [Thinking trace](#thinking), [Tool chips](#tool-chips), [Task rows](#task-rows), [Feature plan](#feature-plan), [Request queue tray](#request-queue), [Image generation grid](#image-grid) - Conversation: [Streaming answer](#streaming-answer), [Context cards](#context-cards), [Approval card](#approval-card), [Recommendation card](#recommendation-card), [Voice agent orb](#voice-orb), [Comments on a preview](#preview-comments) - Input: [Prompt bar](#prompt-bar), [Model picker](#model-picker), [Dictation waveform](#dictation-waveform), [Selection actions](#selection-actions), [Command palette](#command-palette) - Data: [Diff table](#diff-table), [Insight cards](#insight-cards), [Records table](#records-table), [Filter table](#filter-table), [Code diff](#code-diff), [Log stream](#log-stream) - Workflow: [Flowchart canvas](#flowchart-canvas), [Kanban board](#kanban), [Live cursors and presence](#live-cursors), [Version timeline](#version-timeline) - App building blocks: [Sidebar navigation](#sidebar-nav), [Onboarding checklist](#onboarding-checklist), [Settings form](#settings-form), [Stepper / wizard](#stepper), [Data import mapping](#import-mapping), [File drop and attachments](#file-drop), [Permission dialog](#permission-dialog), [Booking slot picker](#booking-slots), [Pricing table](#pricing-table) - Feedback: [Toast stack](#toast-stack), [Notification inbox](#notification-inbox), [Empty states](#empty-states) ## 01. Agent screen Agent states · An agent using a website for you: watch it click and type, take over or approve the risky step, teach it by doing a task once, or replay the recording. Live demo and React + Tailwind source: https://monstarx.com/ui#agent-screen · Install: `npx shadcn@latest add https://monstarx.com/ui/r/agent-screen.json` ### Build prompt for a coding agent ````text Build a "Agent screen" UI component. An agent using a website for you: watch it click and type, take over or approve the risky step, teach it by doing a task once, or replay the recording. What it is for: A live view of an AI agent using a website for you — its pointer moving, clicking and typing — with the controls a person needs to trust it: pause, take over, approve the one click that spends money, teach it a task by doing it once, and replay a recording of what it did. Structure: - A card with a browser frame (address bar with a lock, the site’s address and a status badge: “Roastie is using this tab”, “You’re driving”, “Teaching · 0:12”, “Recording · 6 Oct, 9:41”), the site inside it at a fixed 340px height, a coloured ring around the frame (violet agent, blue you, red teaching). - Beside the frame on wide cards (below on narrow ones, via a container query): a “Steps” list — tick for done, spinner for the current step, circle for later, a shield and “Needs your OK” on a step that needs approval. - The agent’s pointer: an arrow with a name tag (“Roastie”) that glides to the centre of each element it uses and shows a small ripple when it clicks. - A control bar at the bottom: the live status on the start, buttons on the end (Pause/Resume and Take over; Hand back while you drive; Watch again when done). - Teach variant: no agent pointer; the site is live. Each click or edit becomes a step (“Search for “Nyeri””, “Open Nyeri AA”, “Set the quantity to 30 kg”); typing in the same field updates one step. Buttons: Start over, Save as skill (after two steps), then Replay and Teach again. - Record variant: a transport bar — round play/pause, a scrubber with a dot per step (amber for the approval), “0:04 / 0:09”, and a 1×/2× speed button. Steps in the list are buttons that jump to that moment. States: - Watching: the agent works through the steps; the page changes as it types and clicks. - Waiting for approval: the pointer stops on “Place order”; a bar drops in over the top of the page (never over the button it is about to press): “Place this order for $450.00 with Green Coffee Co-op?” with Not now and Approve. - Paused; You’re in control (page usable, pointer hidden); Stopped before placing the order (after Not now); Done (“Order GCC-2291 placed”). - Teaching: red ring and a running clock; Skill saved; Replaying (the agent’s pointer repeats your steps on a fresh page). - Recording: playing, paused, scrubbing (the pointer jumps instead of gliding), ended. Interactions: - Pause/Resume stops and continues the agent; Take over hands you the live page from where the agent was; Hand back lets the agent continue. - Approve lets the waiting click land; Not now stops the run there. - Teach: use the site normally — search, open a coffee, type a quantity, pick freight, add to the order. - Record: Space/Enter on play; the scrubber is a native range input (←/→ move, Home/End jump), dragging scrubs; clicking a step jumps to it. Accessibility: - While the agent drives, the site is inert (not focusable, ignored by screen readers); the Steps list and a polite live status describe what happens. - The current step has aria-current="step"; status icons are decorative next to text. - Control buttons have visible labels; Pause uses aria-pressed; the scrubber has an aria-valuetext such as “0:04 of 0:09, step 3: Set the quantity to 30 kg”. - The approval bar is announced through the live status (“Waiting for your OK”) without stealing focus. - With reduced motion the pointer jumps instead of gliding and the click ripple is off. Variants: Watch, Teach, Record — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow reordering green coffee on Green Coffee Co-op (greencoffee.example/wholesale): Nyeri AA (Kenya, $11.80/kg, 420 kg available), Huila Pink Bourbon (Colombia, $13.40/kg), Yirgacheffe Kochere (Ethiopia, $12.60/kg). Steps: search “Nyeri”, open Nyeri AA, set 30 kg, choose air freight ($3.20/kg), add to order ($354.00 + $96.00 = $450.00), place the order (needs approval) → Order GCC-2291, lands Monday. The recording was approved by Priya. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#agent-screen ```` ### Or ask MonstarX > Add a screen where people can watch the assistant use a website for them: its pointer moves, clicks and types while a list shows each step, with Pause, Take over and an approval before anything that spends money. Add a mode to teach it a task by doing it once, and a recording people can replay and scrub through. ## 02. Thinking trace Agent states · Shows what the agent is doing while it works — steps, reasoning, searches and code — then folds away into one line. Live demo and React + Tailwind source: https://monstarx.com/ui#thinking · Install: `npx shadcn@latest add https://monstarx.com/ui/r/thinking.json` ### Build prompt for a coding agent ````text Build a "Thinking trace" UI component. Shows what the agent is doing while it works — steps, reasoning, searches and code — then folds away into one line. What it is for: Sits above an AI assistant’s reply while the assistant works, so people can see progress and check how an answer was reached; when the work ends it folds into a single line so the answer stays the focus. Structure: - A header button: a sparkle icon, the label “Thinking” with a moving shimmer and a live seconds counter while working, “Thought for 4.6s” once done, and a chevron that turns when open. - A panel under it, indented behind a thin start-side rule, holding the trace in one of four forms: a list of steps; the reasoning as running text; the searches (query chips, then result rows with a site initial, title and domain, then “Read 4 sources”); or code (the query in a monospace block, then its result rows). - The final answer under the trace, fading in when the work is done. States: - Working: shimmer label, counter ticking every 100ms, panel open, the current step with a spinner, finished steps with a green tick, waiting steps dimmed with a dot. - Streaming reasoning: text appearing a few characters at a time behind a pulsing caret. - Done: label becomes “Thought for Ns”, counter stops, the panel folds away about a second later — unless the person opened or closed it themselves, which wins. - Folded: one line; opening it shows the full trace again. Interactions: - Click, tap, Enter or Space on the header toggles the panel at any time, also while working. - Restarting the trace (a new request) resets the counter, opens the panel and clears the person’s choice. Accessibility: - The header is a real button with aria-expanded and aria-controls pointing at the panel. - A visually hidden polite live region says “Thinking”, then “Thought for 4.6 seconds”. - Each step carries hidden text for its state (done, in progress, waiting); icons are aria-hidden. - Code keeps left-to-right direction inside right-to-left pages. - With reduced motion: no shimmer, pulse or spinner movement; the trace shows its finished state at once. Variants: Steps, Reasoning, Search, Code — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow Coffee Roasters’ agent checking stock: steps “Read the roast log for week 41 (38 batches · 642 kg roasted)”, “Checked green stock against open orders”, “Found Nyeri AA running short (18 kg in stock, 52 kg ordered)”, “Drafted a reorder for Monday”; searches about Kenya AA green prices; a SQL query summing wholesale orders by origin; the answer “Order 30 kg of Nyeri AA by air today to cover Thursday’s roast, and 60 kg by sea for November.” Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#thinking ```` ### Or ask MonstarX > Add a thinking trace to my app’s assistant: while it works, show a “Thinking…” panel that lists each step with a spinner, a tick when it is done and how long it took. Let people open it to read the reasoning, the searches it ran and any code it wrote, and fold it into “Thought for 6s” when it finishes. ## 03. Tool chips Agent states · The tools an agent calls while it answers, as chips that run, fail, retry and finish — each opening to its input and output. Live demo and React + Tailwind source: https://monstarx.com/ui#tool-chips · Install: `npx shadcn@latest add https://monstarx.com/ui/r/tool-chips.json` ### Build prompt for a coding agent ````text Build a "Tool chips" UI component. The tools an agent calls while it answers, as chips that run, fail, retry and finish — each opening to its input and output. What it is for: Shows which tools an AI agent called while it worked on a request — searches, file reads, API calls, drafts — as they run, so people can see where an answer came from, spot a failure, and open any call to check exactly what went in and what came back. Structure: - Above the chips, the person’s request as a right-aligned bubble; below them, the agent’s answer once every tool has finished. - Inline variant: a wrapping row of pill-shaped chips, one per tool call, each with the tool’s icon (or a spinner while it runs), a verb phrase (“Searching wholesale orders” → “Searched wholesale orders”) and its duration (“1.2s”) once done. A small amber retry icon on a call that succeeded on its second attempt. - Timeline variant: a header button “Used 5 tools · 6.0s” (“Using tools · 3 of 5” while running) that folds the list; below it a vertical list joined by a thin line, each row with a status circle (tick, spinner, warning), the phrase, the call in monospace (search_orders(Larder & Lane)), a “retried” badge and the duration. - Opening a chip or row shows a details panel: the tool’s name, “Copy input” and “Run again”, then two columns (stacked on phones) — Input as pretty-printed JSON and Output as one plain sentence, with the first attempt’s error in red above the result when it was retried. - A short “Roastie is working…” line with a pulsing violet dot while anything is still running. States: - Waiting: not shown yet (inline) or a grey row with a muted icon (timeline). - Running: violet tint, spinner, a light sheen sweeping across the chip; two calls can run at the same time. - Failed: red tint and a warning icon (“Couldn’t get a shipping quote”); the panel shows the error. - Retried and done: back to neutral with the amber retry mark; the panel keeps the first error above the result. - Done: neutral chip with the tool icon and its duration; when all are done the answer fades in below. Interactions: - Click or tap a chip/row to open its details; click it again (or press Escape) to close. One open at a time. - Inline chips: ←/→ (and Home/End) move between chips; Tab leaves the row. - “Copy input” copies the JSON and says “Copied” for a moment; “Run again” re-runs a finished call (spinner, then the result). - Timeline header folds and unfolds the whole list. Accessibility: - Chips and rows are buttons with aria-expanded and aria-controls pointing at the details panel; the chip row is a labelled list (“Tools used”). - Status icons in the timeline are images labelled Waiting, Running, Failed or Done; decorative icons are hidden. - A polite live region reads progress (“search_orders running, read_file done…”) and finally “Used 5 tools in 6.0s”. - Spinner and sheen stop with reduced motion, and the demo shows the finished state. Variants: Inline, Timeline — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s assistant Roastie answering “Can we get Larder & Lane’s 12 kg to them by Friday?”: search_orders {customer: Larder & Lane, since: 2026-09-01} → 6 orders, 74 kg; read_file roast-log-week41.csv → Thursday’s roast has 118 of 160 kg booked (runs alongside the first); check_inventory Crow’s Nest Espresso → 186 kg green; shipping_quote Sendle 12 kg Collingwood → Fitzroy fails once (“Sendle timed out after 10 s”) then returns $18.40, delivered Friday morning; draft_email to orders@larderandlane.example → saved to Outbox. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#tool-chips ```` ### Or ask MonstarX > Show the tools my assistant uses while it answers as small chips: a spinner while each one runs, its name and how long it took when done, red with the error when it fails, and a click to open what went in and what came back. Offer a timeline view that folds into “Used 5 tools”. ## 04. Task rows Agent states · Live status for the jobs an agent runs: queued, running with progress, failed with a retry, done — as capsules or a list. Live demo and React + Tailwind source: https://monstarx.com/ui#task-rows · Install: `npx shadcn@latest add https://monstarx.com/ui/r/task-rows.json` ### Build prompt for a coding agent ````text Build a "Task rows" UI component. Live status for the jobs an agent runs: queued, running with progress, failed with a retry, done — as capsules or a list. What it is for: A live list of the background jobs an agent is running for someone — in a chat, a sidebar or a dashboard — so they can see at a glance what is done, what is moving, what is waiting and what needs them. Structure: - A one-line summary above the list: “1 of 4 done · 1 running · 1 failed”. - One row per task: a status icon, the task title (and the error under it when it failed), a short count such as “12 invoices”, a status badge (or a Retry button when failed), and a chevron button. - Under each row, a hidden panel with the task’s sub-steps, each with a tick, a clock or a warning icon. - Two layouts: capsules (each row its own rounded pill, spaced apart) and list (one bordered container with dividers). States: - Queued: dashed circle with a clock, muted title, “Queued” badge. - Running: a progress ring that fills with the percentage, a pulsing dot inside, the badge shows the percentage. - Failed: red circle with a warning, the error text in red under the title, a Retry button instead of the badge. - Done: green circle with a tick, “Done” badge. - When the running task reaches 100% it becomes done and the next queued task starts; Retry puts a failed task back to running (or queued if another is running). Interactions: - The chevron opens and closes a task’s steps; one task open at a time. - Retry restarts the failed task from 0%. - Everything is reachable with Tab and works with Enter or Space. Accessibility: - The summary line is a polite live region, so progress milestones are announced without reading every percentage. - The running ring is a progressbar with aria-valuenow; the other status icons are images with a label (Done, Failed, Queued). - Each chevron has aria-expanded, aria-controls and a label naming its task (“Show steps for Verify wholesale invoices”). - With reduced motion the pulse stops; progress still updates. Variants: Capsules, List — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow Coffee Roasters’ agent jobs: “Verify wholesale invoices” (12 invoices, done), “Build next week’s roast schedule” (38 batches, running at 36%), “Email cafés about the Nyeri shortage” (8 cafés, failed: “The mail server refused 2 addresses.”), “Update product pages” (6 coffees, queued), each with three sub-steps. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#task-rows ```` ### Or ask MonstarX > Add a task list that shows what the agent is working on: one row per task with its status (queued, running with a progress ring, failed with a Retry button, done with a tick), a short count such as “12 invoices”, and a chevron that opens the task’s sub-steps. ## 05. Feature plan Agent states · The plan an agent works through, as a checklist with progress: each feature’s status, what it covers and whether its test passed. Live demo and React + Tailwind source: https://monstarx.com/ui#feature-plan · Install: `npx shadcn@latest add https://monstarx.com/ui/r/feature-plan.json` ### Build prompt for a coding agent ````text Build a "Feature plan" UI component. The plan an agent works through, as a checklist with progress: each feature’s status, what it covers and whether its test passed. What it is for: Shows the plan an agent is building from — a checklist of features — and how far it has got: which feature is being built, tested or fixed, and which ones passed their tests. It keeps a long build legible and gives people something to check before they trust the result. Structure: - Card header: a checklist icon, the project name, “3 of 5 built” at the end, a progress bar made of one segment per feature, and a one-line live status (“Testing: Roast-day cut-off”). - One row per feature, numbered f1, f2…: a stage icon, the title, a test badge (Testing…, Test passed, Test failed) and a chevron. Opening a row shows the feature’s one-line detail and the latest note (what failed, what was fixed). - Compact variant: one line with a progress ring (percentage, or a tick when done), “3 of 5 features built”, the live status and a dot per feature; it opens to a tight list of the features. States: - To do: dashed circle, muted title, empty segment. - Building: spinner, half-filled pulsing blue segment. - Testing: flask icon, “Testing…” badge. - Fixing: amber wrench, amber segment, “Test failed” badge and the failure note in red. - Done: green tick, full green segment, “Test passed” badge. - All done: status reads “All 5 built · every test passed”, the ring shows a tick. Interactions: - Each row is one button that opens and closes its detail; one row open at a time. - The compact line opens and closes the list. - Progress arrives from the agent; nothing needs a click to advance. Accessibility: - The segmented bar is a progressbar (aria-valuenow = features built, aria-valuemax = all features). - The status line is a polite live region. - Stage icons are images labelled with their stage (Building, Testing, Fixing, Done, To do). - Row buttons carry aria-expanded and aria-controls; chevrons mirror in right-to-left layouts. - With reduced motion: no spinner or pulse, and the demo shows the finished plan. Variants: Card, Compact — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s wholesale portal: f1 Café accounts and sign-in (done, passed), f2 Standing orders (done, passed), f3 Roast-day cut-off (building — “Orders after Tuesday 2 pm move to Thursday’s roast”), f4 Invoices with GST (later fails once: “GST was rounded down a cent on 3 invoices”, then fixed), f5 Delivery tracking. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#feature-plan ```` ### Or ask MonstarX > Add a feature plan card: a checklist of the features being built with a progress bar (“3 of 5 built”). Each feature shows to do, in progress or done, opens to a one-line detail, and carries a small “Test passed” or “Test failed” badge. ## 06. Request queue tray Agent states · Requests sent while the agent is busy wait in a tray above the prompt box — reorder, edit, remove or send one next. Live demo and React + Tailwind source: https://monstarx.com/ui#request-queue · Install: `npx shadcn@latest add https://monstarx.com/ui/r/request-queue.json` ### Build prompt for a coding agent ````text Build a "Request queue tray" UI component. Requests sent while the agent is busy wait in a tray above the prompt box — reorder, edit, remove or send one next. What it is for: Lets people keep sending requests while an AI agent is busy: new requests wait in a tray above the prompt box instead of interrupting, and people can reorder, edit, remove, pause or promote them before the agent gets to them. Structure: - One card. At the top, the request being worked on: a violet spinner, “Working on” eyebrow, the request text, the current step (“Building… 3/4”) and a thin segmented progress bar, one segment per step. - Tray variant: below it a “Queued” header with a count pill and a “Pause queue / Resume queue” button, then the queued requests as a numbered list (the next one’s number in a blue circle), each clamped to two lines. - Compact variant: a single line “3 queued · next: …” with a chevron that opens the same header and list. - Each queued row: number, text, and actions shown on hover or focus (always on phones): Send next (to the top), Move up, Move down (hidden on phones), Edit, Remove. - At the bottom, the prompt box: “Add to the queue…” while the agent works (“Ask for a change…” when idle), a Stop button for the current request and a round send button. States: - Working: spinner and progress; queued requests wait. - Idle and empty: a green tick and “All caught up · 2 done”. - Paused: the current request finishes, then the queue waits; a “paused” pill in the compact line. - Editing a row: the text becomes a two-line text field with Cancel and Save. - New request while idle and empty: it starts at once instead of queueing. Interactions: - Enter in the prompt box adds the request to the end of the queue (or starts it when nothing is running). - When the current request finishes, the first queued one starts automatically half a second later (unless paused). - Send next moves a request to the top; Move up/down reorder by one. - Keyboard on a focused row: ↑/↓ move focus between rows, Alt+↑/Alt+↓ move the request itself (focus follows it), Enter edits, Delete or Backspace removes. In the edit field Enter saves, Shift+Enter makes a new line, Escape cancels. - Stop ends the current request; the next queued one then starts. Accessibility: - The queue is an ordered list labelled “Queued requests”; each row is focusable with a label “2 of 3: …”. - Every icon button names its action and the request (“Move up: Add Sugarcane Decaf…”); disabled when it can’t apply. - A polite live region announces “Queued, position 3 of 3”, “Moved to position 1 of 3”, “Removed from the queue”, “Started: …”. - The current step is a polite live region; progress pulses and spinners stop with reduced motion. - Text fields are 16px on phones so iOS does not zoom. Variants: Tray, Compact — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s shop builder. Working on “Add a wholesale price list page with prices per kilo for each café tier” (steps: Reading the request, Planning the change, Building, Testing in a browser). Queued: “Make the Subscribe button on the home page green”, “Add Sugarcane Decaf to the shop at $19 for 250 g”, “Email me when a café pauses its standing order”. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#request-queue ```` ### Or ask MonstarX > Let people keep sending requests while the assistant is working: show what it is working on with its progress, and put new requests in a queue above the prompt box where they can be reordered, edited, removed or sent next, with a button to pause the queue. ## 07. Image generation grid Agent states · Generate images from a prompt: batches that develop from noise with live progress, then vary, upscale, save or download any of them. Live demo and React + Tailwind source: https://monstarx.com/ui#image-grid · Install: `npx shadcn@latest add https://monstarx.com/ui/r/image-grid.json` ### Build prompt for a coding agent ````text Build a "Image generation grid" UI component. Generate images from a prompt: batches that develop from noise with live progress, then vary, upscale, save or download any of them. What it is for: The screen where people generate images from a description — product shots, labels, illustrations, social posts — watch them develop, and iterate by varying, upscaling, saving and downloading the ones they like. Structure: - A prompt form: a two-line text box with the description, a Style switch (Risograph, Watercolour, Linocut), a Shape switch (1:1, 4:5) and a violet Generate button (“⌘↵”) that becomes Stop while images are generating. - Grid variant: batches newest first in a scroll area, each with a line saying what it is (a violet sparkle and the prompt, or “Variations · …”) and its style and shape, then four tiles (two per row on phones, four on wider screens) at the batch’s shape, 12px radius. - A generating tile: the picture under heavy blur and film grain that clears as it develops, with a caption “Step 18/30 · 60%” and a thin progress bar. - A finished tile: on hover or focus (always on phones) a gradient bar with Make variations, Upscale 2× and Download on the start side and a heart on the end; badges “2× · 2048 px” after an upscale and a red heart when saved. - Focus variant: the selected image large on a tinted ground, beside it (below on phones) “Variation 2 of 4”, the prompt, style and size, four buttons (Vary, Upscale, Download, Save) and a strip of every image to pick from. States: - Generating (per image, each at its own pace), stopped (“Stopped”), done. - Upscaling: a dark veil with a spinner and a percentage, then the sharper, more detailed picture and its badge. - Saved (heart filled). - A variation batch stays in the source image’s style and close to it. Interactions: - Generate (or ⌘/Ctrl+Enter in the prompt) starts four images; Stop halts the batch. - Style and Shape are radio groups: arrows move and choose. - On a finished image: Make variations adds a batch of four based on it; Upscale 2× runs once; Download saves the file; the heart toggles saved. - Focus variant: pick any image from the strip to show it large. Accessibility: - Each image is role="img" with a description (“Image 2: Huila Pink Bourbon label art, risograph, upscaled 2×”); each batch is a labelled section. - Progress is a progressbar per image with its percentage; “Generating 4 images…”, “Images ready.” and “Upscaling…” are announced politely. - Every icon button has a label and a tooltip; the heart uses aria-pressed; the action bar appears on keyboard focus, not only hover. - With reduced motion there is no blur-to-sharp effect: a plain placeholder with the percentage, then the image. Variants: Grid, Focus — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s label art for Huila Pink Bourbon: “ripe pink coffee cherries, layered Andes hills at sunrise, a small crow on a branch”. A first batch of four risograph squares is ready; a watercolour batch starts on its own. Downloads are named huila-label-.svg (-2x when upscaled). In the demo the pictures are drawn from a seed; a real app shows its image model’s results. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#image-grid ```` ### Or ask MonstarX > Add an image generator: a prompt box with style and shape options and a Generate button that makes four images at a time, each showing its progress as it develops. On a finished image people can make variations, upscale it, save it as a favourite or download it; earlier batches stay below. ## 08. Streaming answer Conversation · An answer that writes itself in, with numbered citations that open a preview, actions to copy or rate it, and follow-up questions. Live demo and React + Tailwind source: https://monstarx.com/ui#streaming-answer · Install: `npx shadcn@latest add https://monstarx.com/ui/r/streaming-answer.json` ### Build prompt for a coding agent ````text Build a "Streaming answer" UI component. An answer that writes itself in, with numbered citations that open a preview, actions to copy or rate it, and follow-up questions. What it is for: The assistant’s reply in a chat or an AI search box: it appears word by word as it is generated, shows where each claim came from, and offers the next useful questions so the conversation keeps going. Structure: - The person’s question as a right-aligned bubble. - The answer as running text with bold key phrases and inline citations — numbered circles, or small source chips (a coloured square and the site’s short name). - Under a finished answer: icon buttons to copy, write again, thumbs up and thumbs down, and a “3 sources” button with stacked source colours that opens a numbered source list. - Below the conversation: “Follow-ups” — two or three questions as rows with a return-arrow icon. - The conversation scrolls inside its own area (about 22rem tall) and keeps the newest words in view. States: - Streaming: words appear about every 55ms behind a blinking caret; actions and follow-ups are hidden. - Done: caret gone, actions and follow-ups appear. - Citation preview open: a card with the source number, title, site and a one-sentence snippet, placed below the citation (above it near the bottom of the window) and kept inside the window. - Rated: the chosen thumb is filled and coloured (green up, red down); choosing it again clears it. - Copied: the copy icon becomes a tick for 1.5s. Interactions: - Hovering, focusing or tapping a citation opens its preview; leaving, blurring, Escape or scrolling closes it. - Clicking a follow-up asks it: it appears as a new question and its answer streams in; asked follow-ups leave the list. - Write again streams the last answer from the start. - Scrolling the conversation never scrolls the page. Accessibility: - Each citation is a button labelled “Source 1: Subscriptions dashboard”, with aria-describedby pointing at the open preview (role tooltip). - The streaming text is hidden from screen readers until complete; the full answer is then announced once through a polite live region. - Thumbs use aria-pressed; the sources button uses aria-expanded and aria-controls. - With reduced motion the answer appears at once and the caret does not blink. Variants: Citations, Source chips — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s assistant, asked “Which coffee should we feature this winter?” — answer: feature Huila Pink Bourbon, up 31% on subscriptions [1], matching the July survey’s ask for fruitier coffee [2], 14 weeks of green stock [3], 6 points more margin than Crow’s Nest. Sources: Subscriptions dashboard (app.kettlecrow.example), July customer survey (forms.kettlecrow.example), Green coffee stock (inventory.kettlecrow.example). Follow-ups: how much to order, the subscription box tasting note, which cafés would stock it. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#streaming-answer ```` ### Or ask MonstarX > Make the assistant’s answers stream in word by word behind a blinking caret, with numbered citations that show the source’s title, site and a snippet on hover, a row of actions (copy, retry, thumbs up and down) and two or three follow-up questions people can click to ask next. ## 09. Context cards Conversation · The passages an AI found before answering: source, relevance and matching words, with pin and leave out — and the answer follows. Live demo and React + Tailwind source: https://monstarx.com/ui#context-cards · Install: `npx shadcn@latest add https://monstarx.com/ui/r/context-cards.json` ### Build prompt for a coding agent ````text Build a "Context cards" UI component. The passages an AI found before answering: source, relevance and matching words, with pin and leave out — and the answer follows. What it is for: Shows the passages an AI retrieved from a knowledge base before answering (retrieval-augmented generation), so people can see what the answer rests on, how relevant each source was, and steer it — pin a passage so it is always used, or leave one out. Structure: - The question as a right-aligned bubble, then one card. - A header: a search icon with “Searching handbook, terms, helpdesk and inbox… 3 found” turning into “Found 5 passages in 5 sources · using 4”, and a context budget — a thin bar made of one coloured segment per passage in use — with “1,000 / 2,000 tokens”. - Cards variant: a horizontal, snap-scrolling row of cards (about 17rem wide, 82% on phones) with previous/next buttons. Each card: a coloured source tile with an icon, the source name and where in it (“p. 12 · Refunds and replacements”), a relevance meter with the score (0.94), the passage with the question’s words highlighted (four lines; “More” shows the whole passage with the sentences around it, greyed), and a footer with Pin, Leave out/Use and More/Less. - List variant: a bordered list, one row per passage (number, source, a “not used” pill, relevance, chevron) that opens to the passage, its type, date and token count, and the same actions. - Below: the answer, “Answer from 4 passages”, written clause by clause, each clause ending with a small coloured citation number matching its source tile. States: - Searching: passages arrive one by one, with a skeleton card (or row) where the next one will appear. - Used: normal card. Below the relevance threshold (0.65): dashed, greyed, struck through, “Below 0.65 relevance — not used”. - Left out by hand: same greyed look, “Left out by you”. Pinned: a violet ring and a “Pinned” button state; pinned passages are always used. - The budget bar and the answer update immediately: leave out a passage and its clause disappears from the answer; with nothing used, the answer asks to pin or use a passage. Interactions: - Pin / Unpin; Leave out / Use (using a low-relevance passage includes it anyway); More / Less on a card; open/close a row in the list. - Previous/next buttons page the row by 80% of its width (smooth unless reduced motion) and disable at the ends; the row also scrolls by touch or trackpad. Accessibility: - Passages are a labelled list of articles (“Customer care handbook.pdf, p. 12 · Refunds and replacements”); the relevance score has a visually hidden “Relevance” label. - Pin uses aria-pressed; every action names its source (“Leave out Wholesale terms 2026.docx”); list rows use aria-expanded and aria-controls. - The budget is a meter with aria-valuetext “1000 of 2000 tokens”. - A polite live region reports the search, the answer, and each change (“Pinned Helpdesk #4182: always used”). Variants: Cards, List — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Jun from Kettle & Crow customer care asks “A café says their beans arrived stale. What’s our refund policy?” Passages: Customer care handbook.pdf p. 12 (0.94, 312 tokens: replacement or full refund within 14 days; roasted more than 6 weeks before delivery counts as stale), Wholesale terms 2026.docx § 7.2 (0.89, 268: unopened bags back within 30 days for credit; opened bags replaced if the roast date is more than 21 days before delivery), Helpdesk #4182 (0.81, 236: Little Moth, 2 × 1 kg sent and $76 credited), Roastery SOP — Packing.md (0.72, 184: wholesale bags ship within 4 days of roasting), Supplier inbox “Re: valve bags” (0.58, below the threshold). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#context-cards ```` ### Or ask MonstarX > When the assistant answers from our documents, show the passages it used as cards: each with the source and page, a relevance score, the matching words highlighted, and buttons to pin it or leave it out, with the answer citing each one by number. ## 10. Approval card Conversation · Questions the agent asks before it acts, one at a time, and a permission card for actions that need a yes. Live demo and React + Tailwind source: https://monstarx.com/ui#approval-card · Install: `npx shadcn@latest add https://monstarx.com/ui/r/approval-card.json` ### Build prompt for a coding agent ````text Build a "Approval card" UI component. Questions the agent asks before it acts, one at a time, and a permission card for actions that need a yes. What it is for: Puts a person in the loop before an agent acts: a short run of questions it needs answered to do the job well, and a permission card that says exactly what a risky action will do before it happens. Structure: - Questions card: the question as the title with a close (skip all) button; the answers — radio rows for one choice (plus a “Something else…” free-text row), checkbox rows for several, or a text field; a footer with previous/next arrows, “1 of 3”, Skip and a primary Continue (Done on the last). - Each choice row shows its number key (1, 2, 3) at the end on wide screens. - Summary after the last question: “Building the wholesale portal with:” and each question with its answer (or “Skipped — I’ll choose”), plus Edit answers. - Permission card: an icon tile, the action as a question (“Send 8 emails to wholesale cafés?”), one line of context, an amber risk chip (“Sends email · can’t be unsent”), a disclosure showing the recipients, the subject and the message, an “Always allow emails to cafés” checkbox, and Deny, Edit and Approve and send. States: - Unanswered: Continue disabled. - Answered: Continue enabled; selected rows tinted, radio dot or check mark filled. - Editing (permission): the message becomes a text area and the preview stays open. - Sending: the buttons give way to a spinner and “Sending 3 of 8…”. - Sent or denied: a result card saying what happened and what happens next time, with Start over. Interactions: - Number keys 1–9 pick the matching option (toggle it, for several choices); Enter continues once answered. - Skip moves on without an answer; the close button skips the rest. - Arrows go back and forth between questions keeping the answers. - Focus moves to the first control of each new question — but never on first render. Accessibility: - Questions are a group labelled by the question; one-choice answers a radiogroup of real radio inputs, several-choice real checkboxes (visually restyled, focus ring kept). - The step counter is a polite live region. - The permission card is role alertdialog labelled by its question; the disclosure uses aria-expanded and aria-controls. - The result cards are role status so the outcome is announced. Variants: Questions, Permission — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s agent before building a wholesale portal: “Who places orders in the portal?” (Café owners only / Any staff member at a café / Our team, for the café), “How can cafés pay?” (Card at checkout, Monthly invoice, Direct debit), “What should the portal be called?” (e.g. Kettle & Crow Trade). Permission: emailing 8 cafés (Larder & Lane, Little Moth, Northcote Social…) that Nyeri AA is short this week, signed by Theo. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#approval-card ```` ### Or ask MonstarX > Before the assistant does something important, show an approval card: a few questions one at a time (one choice, several choices or a short answer) with Skip, Continue and a “1 of 3” counter. For risky actions, show a card that says exactly what will happen, with Approve, Edit and Deny. ## 11. Recommendation card Conversation · An AI recommendation with a confidence gauge, the evidence and risk behind it, and the alternatives it weighed — as a card or a comparison. Live demo and React + Tailwind source: https://monstarx.com/ui#recommendation-card · Install: `npx shadcn@latest add https://monstarx.com/ui/r/recommendation-card.json` ### Build prompt for a coding agent ````text Build a "Recommendation card" UI component. An AI recommendation with a confidence gauge, the evidence and risk behind it, and the alternatives it weighed — as a card or a comparison. What it is for: Presents a decision an AI recommends — what to buy, which plan, which supplier — together with how sure it is and why, so people can trust it, question it, or pick an alternative it weighed, and then act on it in one click. Structure: - A card with a violet “Recommendation” eyebrow and the question it answers. - Card variant: the option’s name (large), origin and supplier, and the cost (“120 kg × $8.90 = $1,068.00”); on the end, a semicircle confidence gauge with the percentage in the middle and “High confidence” under it (green ≥ 75%, amber ≥ 50%, grey below). - Then the evidence: one line per reason with a green tick and a small source tag (“Sales · 14 weeks”, “Supplier quotes”), and the risk in amber with a warning icon. - A dashed disclosure “How sure is Roastie, and what would change its mind?” that explains the percentage and what would change it. - “Also considered”: one row per alternative with its one-line summary and a small confidence bar; choosing one shows it in the card with a “back to Cerrado Natural” bar on top. - Compare variant: a table with one column per option (the recommended one badged), rows for confidence (small gauges), price per kg, total, arrival, cup score (best value per row in bold green), fit with the blend and risk, and a Choose button at the foot of each column; the chosen column is outlined in blue. - A footer: helpful / not helpful buttons and “Draft order · $1,068.00”, which becomes “Order PO-0412 drafted — waiting in Outbox for Ellie.” States: - Recommended option shown; an alternative shown; disclosure open; rated up or down (“Thanks — Roastie learns from this.”); order drafted. - The gauge fills from zero each time an option is shown (instantly with reduced motion). Interactions: - Choose an alternative (row or column); go back to the recommendation; open the explanation. - Rate the recommendation (pressing again clears it); Draft order acts on whichever option is shown or chosen. - The compare table scrolls sideways inside the card on phones. Accessibility: - Each gauge is role="meter" with aria-valuenow and aria-valuetext (“82%, high confidence”). - Choose buttons use aria-pressed and name the option; ratings use aria-pressed inside a group labelled “Was this helpful?”. - The compare view is a real table with a caption and row headers; the best value in a row carries a visually hidden “(best)”. - The disclosure uses aria-expanded and aria-controls; the risk line starts with a visually hidden “Risk:”; the drafted message is a polite live region. Variants: Card, Compare — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow asks “Which green coffee should we buy for November’s espresso blend?” Recommended: Cerrado Natural (Brazil, Highland Green Co.), 82%, $8.90/kg, 120 kg = $1,068.00, arrives in 3 weeks, cup 84 — reasons: espresso sales up 18% over six weeks, lowest of three quotes, lands before the current lot runs out on 2 Nov, Mara cupped it at 84; risk: Santos port delays; would change if Larder & Lane move to Nyeri AA (buy 90 kg). Alternatives: Mogiana Yellow Bourbon (Rio Verde Imports, 64%, $9.60/kg, 4 weeks, cup 85) and Nyeri AA (Kenya, 31%, $11.80/kg, 5 weeks, cup 88, too bright for milk drinks). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#recommendation-card ```` ### Or ask MonstarX > Add a recommendation card: the option the assistant recommends with a confidence gauge (for example “82% · High”), the reasons with their sources, the main risk, what would change its mind, the alternatives it considered with their own confidence, and a button to act on it. ## 12. Voice agent orb Conversation · An orb that breathes, listens, thinks and speaks, with live captions, mute and tap to interrupt — or a compact in-call bar. Live demo and React + Tailwind source: https://monstarx.com/ui#voice-orb · Install: `npx shadcn@latest add https://monstarx.com/ui/r/voice-orb.json` ### Build prompt for a coding agent ````text Build a "Voice agent orb" UI component. An orb that breathes, listens, thinks and speaks, with live captions, mute and tap to interrupt — or a compact in-call bar. What it is for: The face of a voice assistant: one round shape that shows whether it is listening, thinking or speaking, with live captions, mute, and the freedom to interrupt — for apps people talk to hands-free, or a call to an AI agent. Structure: - Orb variant: a 192–224px orb (a round button) drawn on a canvas — three soft, overlapping blobs in sky-to-violet gradients with a white highlight and a glow behind; a microphone icon on it while idle. - Under it: a status line with a coloured dot (“Listening”, “Thinking”, “Speaking · tap to interrupt”, “Muted”), then captions (who is speaking in small caps, the words so far; Roastie’s upcoming words faint), then round controls: mute, captions on/off, Roastie’s voice on/off, and a red end button while connected. - Call variant: before the call a “Call Roastie” button; during it a floating pill — a 44px orb, “Roastie” and “Listening · 0:42”, five level bars, mute, captions (wider screens) and a red end button — with the latest line above it as a chat bubble (yours on the end, Roastie’s on the start). States: - Idle: slow breathing; “Tap to talk”. - Connecting: a grey dotted ring orbits. - Listening: sky glow; the orb swells and ripples with your voice’s level; your words appear as they are recognised. - Thinking: amber dotted ring orbiting, the gradient turning. - Speaking: violet glow; the orb pulses with Roastie’s voice; captions fill in word by word. - Muted: the orb dims to half and the status reads “Muted”; nothing is heard. - Finished: “Tap to talk again” and a one-line summary of what was done. Interactions: - Tap the orb to start; tap it while Roastie speaks to interrupt (it stops mid-sentence and listens). - Mute toggles the microphone; captions and voice toggle; end closes the session and clears it. - Voice playback is off by default and only starts after a click (here with the browser’s speech synthesis). Accessibility: - The orb is a button whose label follows the state (“Talk to Roastie”, “Interrupt Roastie”, “Roastie is thinking”), disabled while it can’t be pressed. - Toggles use aria-pressed and change their labels (“Mute microphone” / “Unmute microphone”). - The status is a polite live region, and each finished line (“Roastie: Done. Twelve kilos are held…”) is announced once — not word by word. - The canvas is decorative (aria-hidden). With reduced motion the orb is drawn still and only its colour and ring change with the state. Variants: Orb, Call bar — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s voice assistant Roastie. You: “Do we have Nyeri AA for Thursday’s roast?” Roastie: “Yes — 42 kilos of green Nyeri AA. I can hold twelve for Larder & Lane’s order on Thursday. Shall I?” You: “Yes please, and let Theo know.” Roastie: “Done. Twelve kilos are held for Thursday, and Theo has the details in his inbox.” Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#voice-orb ```` ### Or ask MonstarX > Add a voice assistant to my app: a glowing orb people tap to talk to, which shows when it is listening, thinking and speaking, with live captions, a mute button, tap to interrupt while it speaks, and a small call bar with a timer and an end button. ## 13. Comments on a preview Conversation · Pinned comment threads on a live preview: drop a pin anywhere, reply, resolve and undo, with an optional list of every thread. Live demo and React + Tailwind source: https://monstarx.com/ui#preview-comments · Install: `npx shadcn@latest add https://monstarx.com/ui/r/preview-comments.json` ### Build prompt for a coding agent ````text Build a "Comments on a preview" UI component. Pinned comment threads on a live preview: drop a pin anywhere, reply, resolve and undo, with an optional list of every thread. What it is for: Feedback pinned to the exact spot on a live preview of an app, page or design — so reviewers point instead of describing, discuss in threads, and resolve each one when it is done. Structure: - A toolbar above the preview: an address pill (lock icon, kettlecrow.example), a Resolved toggle with its count (eye / eye-off), and a dark “Comment” button that turns sky “Click to place” in comment mode; after resolving, a green “Resolved · Undo” button appears for six seconds. - The preview (380px tall) with pins over it. A pin is a teardrop (round with one sharp corner at the point it marks) holding the first commenter’s avatar, a dark count badge when there are replies, a pulsing sky dot for an unread reply; resolved pins are a green tick and are hidden unless Resolved is on. - A thread popover (300px) beside its pin, flipping to the other side near an edge: the anchor (“Headline”), Resolve / Reopen and close; the comments (avatar, name, time, text) scrolling inside; a typing indicator when someone is writing; a reply box with a round send button. - On a preview narrower than 480px the popover becomes a sheet along the bottom of the preview. - Sidebar variant: a list beside the preview (below it on phones) with Open and Resolved tabs and counts; each entry shows the avatar, name, latest time, an unread dot, two lines of the first comment and “Headline · 1 reply”. States: - Browsing: pins visible, one thread open or none. - Comment mode: the preview gets a sky inner ring and a crosshair cursor with a hint “Click anywhere to comment · Esc to cancel”; a keyboard crosshair starts in the centre. - Drafting: a sky draft pin and a popover with “Add a comment…”. - Resolved: the thread closes, its pin hides (or shows as a tick), Undo is offered; reopening puts it back. - A teammate replying: “Mara is typing…”, then the reply appears and the pin gets an unread dot until opened. Interactions: - Click a pin to open its thread, again to close; Escape closes and returns focus to the pin. - Comment, or the C key, enters comment mode; click anywhere on the preview to drop a pin; with the keyboard, arrows move the crosshair (Shift for bigger steps), Enter drops the pin, Escape cancels. - Enter sends a comment or reply, Shift+Enter makes a new line; Escape in an empty box closes it. - Resolve hides the thread and offers Undo; the Resolved toggle shows resolved pins; in the sidebar, clicking an entry opens its pin. Accessibility: - Pins are buttons whose names carry the author, anchor, the first comment, the number of replies and “new reply”, with aria-expanded. - The popover is a dialog labelled with its anchor; the reply box takes focus only when someone opens a thread (never when the page loads). - Comment mode is a toggle button (aria-pressed, aria-keyshortcuts="C"); the placing surface explains its keys in its label. - Replies and resolving are announced in a polite live region; the sidebar is tabs with tabpanel; pin positions are stored as shares of the preview’s size so they stay on their target at any width. Variants: Pins, With list — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: A review of Kettle & Crow’s shop front (“Roasted Monday. Dispatched Thursday.”, Shop coffee and Subscribe buttons, three coffee cards). Threads: Headline — Ellie Hart “Could we say ‘Roasted Monday, at your door Thursday’?” and Mara Okafor “Yes — Thursday is right for metro Melbourne”; Nyeri AA card — Priya Raman “down to 18 kg of green, mark it ‘Last bags’?” (Mara replies a few seconds in); Shop coffee button — Theo Lindqvist “a second button ‘For cafés’ here?”; Menu (resolved) — Jun Park’s typo, fixed by Ellie. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#preview-comments ```` ### Or ask MonstarX > Let people comment on the preview of my app: a Comment button, then a click anywhere drops a pin with the person’s avatar and opens a thread where others can reply. Threads can be resolved (with Undo) and hidden, show when there is a new reply, and are also listed in a side panel with Open and Resolved tabs. ## 14. Prompt bar Input · The box people type to the agent in: @ to attach sources, / for commands, a model menu, attachments and voice. Live demo and React + Tailwind source: https://monstarx.com/ui#prompt-bar · Install: `npx shadcn@latest add https://monstarx.com/ui/r/prompt-bar.json` ### Build prompt for a coding agent ````text Build a "Prompt bar" UI component. The box people type to the agent in: @ to attach sources, / for commands, a model menu, attachments and voice. What it is for: The composer at the bottom of an AI chat or agent screen: where people type a request, attach the data it should use, run a command, pick a model, or speak instead of typing. Structure: - Attached chips above the text: sources and files (grey, with an icon and a remove ×) and at most one command (violet). - A text area that grows with its content up to six lines, then scrolls. - A toolbar: attach (+), add a source (@), run a command (/), then at the end a model menu (“Auto ▾”), a microphone and a round send button. - Rounded shape: text on top, toolbar below, in a 16px-radius box. Pill shape: one row — attach, text, model, microphone, send — fully round while it is one line, easing to a 24px radius when the text wraps or chips appear. - A suggestion list that opens above the composer when “@” or “/” is typed, with an icon, a name and a hint per row and a footer of keyboard hints. - After sending, the message appears above as a right-aligned bubble with its attachments listed. States: - Empty: placeholder “Ask Roastie — @ to add data, / for commands”; send disabled. - Suggesting: list open, filtered by what follows the @ or /, first row highlighted. - Dictating: the text area gives way to a red animated waveform, a 0:03 timer and “Listening…”; the microphone becomes a red stop button; words appear in the text as they are recognised. - Model menu open: three options with a hint each and a tick on the current one. Interactions: - “@” or “/” at the start or after a space opens the list; typing filters it; ↑/↓ move, Enter or Tab choose, Escape closes; clicking a row chooses it. - Choosing a source adds a chip and removes the typed “@query”; choosing a command replaces any earlier command chip. - Enter sends, Shift+Enter makes a new line; IME composition never sends. - Backspace in an empty box removes the last chip. - The @ and / buttons insert the trigger at the caret and open the list. - The microphone starts and stops dictation; it stops by itself when the speaker stops. Accessibility: - The text area is a combobox with aria-expanded, aria-controls and aria-activedescendant pointing at the highlighted option of a listbox. - Every icon button has a label (Attach a file, Add a source, Run a command, Dictate / Stop dictation, Send); the microphone uses aria-pressed. - Each chip’s remove button names the chip; the model menu is a listbox with aria-selected. - Text is 16px on phones so iOS does not zoom; the waveform stops moving with reduced motion. Variants: Rounded, Pill — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s assistant “Roastie”. Sources: roast-log-week41.csv, Wholesale orders (table), Green coffee contract.pdf, kettlecrow.example, Supplier inbox. Commands: /reorder, /schedule, /email, /forecast, /summarize. Models: Auto, Fast, Deep. Dictation types “Draft a reorder for Nyeri AA, thirty kilos by air for Thursday’s roast”. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#prompt-bar ```` ### Or ask MonstarX > Add a prompt box to my app: it grows as people type, “@” opens a list of files and data sources to attach as chips, “/” opens a list of commands, and it has buttons to attach a file, choose a model, dictate by voice and send — all usable from the keyboard. ## 15. Model picker Input · Choose the model and how hard it thinks: speed and cost at a glance, premium badges, and effort from low to max. Live demo and React + Tailwind source: https://monstarx.com/ui#model-picker · Install: `npx shadcn@latest add https://monstarx.com/ui/r/model-picker.json` ### Build prompt for a coding agent ````text Build a "Model picker" UI component. Choose the model and how hard it thinks: speed and cost at a glance, premium badges, and effort from low to max. What it is for: Lets people choose which AI model answers and how much effort it spends, with enough information to choose well: what each model is for, how fast and how costly it is, and what each effort level does to speed and usage. Structure: - Menu variant: a prompt box with a pill button at its end showing the current choice (“✦ Auto · Medium ▾”) and a send button; the picker opens above it as a popover. - Inline variant: the same picker in a settings card titled “Default model for new chats”. - The picker: a “Model” list — each row a name, an optional badge (Recommended, Premium, Vision), a one-line description, a speed meter (3 segments, blue) and a cost meter (4 segments, amber), and a tick on the chosen one. - Below a divider, “Effort”: a four-part segmented control (Low, Medium, High, Max) and one sentence describing the chosen level and its usage (“High: thinks longer before answering — about 2× the usage.”). States: - Highlighted row (keyboard or pointer) tinted; chosen row ticked. - An effort a model does not offer is disabled and dimmed; if the chosen effort is not offered, the highest offered one is used. - A model with a single effort shows “… always answers quickly; effort is not adjustable.” - Popover open or closed; the trigger always reflects the current model and effort. Interactions: - Trigger toggles the popover; a press outside or Escape closes it, and Escape returns focus to the trigger. - In the list: ↑/↓, Home and End move the highlight; Enter or Space chooses; clicking chooses. - In effort: arrow keys move and choose (one tab stop); clicking chooses. Accessibility: - The popover is a dialog labelled “Model and effort”; the trigger has aria-haspopup, aria-expanded and aria-controls. - The model list is a focusable listbox using aria-activedescendant, options with aria-selected. - Effort is a radiogroup of radio buttons with aria-checked and roving tabindex. - Each meter is an image with a label (“Speed 3 of 3”, “Cost 4 of 4”); the description sentence is a polite live region. Variants: Menu, Inline — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s assistant with made-up models: Auto (Recommended — picks the right model for each step), Kestrel Mini (quick edits, effort fixed), Kestrel (everyday building), Kestrel Pro (Premium — hard problems, long plans), Osprey Vision (Vision — reads screenshots, designs and PDFs). Effort: Low (about half the usage), Medium (default), High (about 2×), Max (up to 4×). Placeholder: “Plan next week’s roast schedule…”. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#model-picker ```` ### Or ask MonstarX > Add a model picker beside the prompt box: a button showing the current model and effort that opens a list of models, each with a short description, speed and cost indicators and a badge for premium ones, plus an effort control (Low, Medium, High, Max) that explains what each level costs. ## 16. Dictation waveform Input · Speak instead of typing: a live waveform and timer, words arriving as you talk, then keep or cancel — with a demo voice or your own microphone. Live demo and React + Tailwind source: https://monstarx.com/ui#dictation-waveform · Install: `npx shadcn@latest add https://monstarx.com/ui/r/dictation-waveform.json` ### Build prompt for a coding agent ````text Build a "Dictation waveform" UI component. Speak instead of typing: a live waveform and timer, words arriving as you talk, then keep or cancel — with a demo voice or your own microphone. What it is for: Lets people speak instead of typing into any text field or note: a live waveform proves the microphone hears them, words appear as they talk, and they choose to keep or cancel what was said. Structure: - Field variant: a labelled text area (“Note for the driver”) with a bottom bar — a Demo voice / My microphone switch and a round microphone button. While dictating, the field shows the existing text, the new words on a faint red highlight, not-yet-final words in grey and a blinking red caret; the bar becomes a red dot with a timer (0:04), a scrolling waveform strip (40 bars), a cancel ✕ and a keep ✓. - Panel variant: a “Voice note” card with a language chip (“English (Australia)”), a timer, a wide waveform (56 bars mirrored around the middle in a violet-to-sky gradient), a big round microphone button over the empty waveform, the transcript area, and a bottom bar: Pause/Resume and Stop while recording; Discard, Copy and “Add to order” after. - A small line under the component for status and notices. States: - Idle: text field (or empty waveform with the record button). - Starting the microphone… (only for the real microphone, while permission is asked). - Listening: waveform moving with the voice, words arriving grey and settling black at the end of each phrase, timer counting. - Paused (panel): grey, flat waveform; the timer stops. - Done: the words join the field with the caret at the end (field), or a transcript with Discard / Copy / Add to order (panel). - Microphone blocked: falls back to the demo voice and says so; no speech recognition in this browser: the waveform still follows the voice and a notice suggests Chrome, Edge or Safari. Interactions: - The microphone button starts dictation; ✓ (or the end of speech) keeps the words; ✕ or Escape cancels and restores the text as it was. - Pause/Resume and Stop in the panel; Copy copies the transcript; Add to order keeps it. - The voice switch chooses the demo voice or the visitor’s own microphone; the browser asks for permission only when recording starts. - With a real microphone the level comes from the Web Audio API (an AnalyserNode’s RMS) and the words from the Web Speech API with interim results; everything stops (tracks, recognition, audio context) on stop or unmount. Accessibility: - Every icon button has a label (Start dictation, Cancel dictation, Keep what you said, Start recording a voice note); focus moves to the keep/stop button when recording starts so Escape and Enter work at once. - The voice switch is a radio group. The waveform is decorative (aria-hidden). - Settled phrases are read through a polite live region; interim words are not announced. - With reduced motion the waveform updates four times a second without easing; text is 16px on phones so iOS does not zoom. Variants: In a field, Voice note — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s delivery note for Larder & Lane. The field starts with “Kettle & Crow — wholesale delivery, Thursday.”; the demo voice says, in three phrases: “Leave the bags at the back door,” “and invoice Larder & Lane for twelve kilos” “of Crow’s Nest Espresso.” Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#dictation-waveform ```` ### Or ask MonstarX > Add voice typing to my text fields: a microphone button that turns the field into a live waveform with a timer, shows the words as people speak (unfinished words in grey), and has buttons to keep or cancel what was said. ## 17. Selection actions Input · Highlight text and an AI toolbar appears: improve, shorten, warm up, fix or translate, then accept or discard the rewrite in place. Live demo and React + Tailwind source: https://monstarx.com/ui#selection-actions · Install: `npx shadcn@latest add https://monstarx.com/ui/r/selection-actions.json` ### Build prompt for a coding agent ````text Build a "Selection actions" UI component. Highlight text and an AI toolbar appears: improve, shorten, warm up, fix or translate, then accept or discard the rewrite in place. What it is for: AI rewriting where people already write: select some text and a small set of actions appears next to it — improve, shorten, warm up, fix spelling, translate — then the rewrite is shown in place as a change to accept or discard. Structure: - An editor card: a breadcrumb header (“Product page / Huila Pink Bourbon · 250 g · $24”), the text in paragraphs, and a footer line for hints and results. - Toolbar variant: a floating bar above the selection (below it on touch screens, where the system’s own menu sits above, and when there is no room): a violet sparkle, Improve, Shorter, Warmer, Fix spelling, a divider and Translate ▾ (opening Japanese and Indonesian). - Menu variant: a small “Ask AI” pill in the same place that opens a 16rem panel — an “Ask AI to…” input above a list of actions, each with an icon, a name and a hint. - Review: the change in place, word by word — removed words struck through on a red tint, new words on a green tint, unchanged words as they were (a translation or full rewrite shows the old sentence struck through, then the new one) — and Accept (with an ↵ hint) and Discard in the footer, so nothing covers the text being reviewed. States: - Idle: “Select any text to rewrite it.” and a “Select a sentence for me” button. - Selected: the selection snaps to whole sentences (highlighted violet) and the actions appear. - Working: the sentences pulse violet; the bar reads “Shorter…”; the footer “Rewriting…”. - Review: the change in place; if the action changes nothing (spelling already right), “Nothing to change here — it already reads well.” and Close. - Accepted: the new text stays; the footer says “Shortened 2 sentences” with Undo. Interactions: - Select with the mouse, by touch, or with the keyboard (the editor is a read-only text box with a caret: Shift+arrows select). - Tab moves from the editor into the toolbar; ←/→, Home and End move between its buttons. Pressing a button keeps the selection (mousedown does not steal it). - Menu variant: typing filters the actions; ↑/↓ move, Enter runs, Escape closes. - Review: Enter accepts, Escape discards (focus starts on Accept). Undo restores the text before the last accept. - Clicking outside the component puts the actions away. Accessibility: - The editor is role="textbox" with aria-multiline and aria-readonly and a label that explains selecting. - The actions are a role="toolbar" labelled “Rewrite with AI”; Translate has aria-expanded and opens a menu of menuitems. - The menu variant’s input is a combobox with aria-activedescendant over a listbox. - The footer is a polite live region (“Rewriting…”, “Improved: Enter to accept, Esc to discard.”, “Shortened 2 sentences”). Removed and added text use del and ins. - With reduced motion the rewrite lands at once and nothing pulses. Variants: Toolbar, Ask AI menu — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s product page for Huila Pink Bourbon, six sentences in three paragraphs: “Huila Pink Bourbon comes from the Los Naranjos farm, high in the hills of southern Colombia. Pink Bourbon is a rare cross of red and yellow Bourbon, and it ripens to a soft pink colour.” / “In the cup its very sweet and juicy, with notes of watermelon, rose and brown sugar. We roast it light on a Loring S35 so the fruit stays bright. Its best brewed as a filter or pour over, but it also makes a lively espresso.” (two deliberate “its” mistakes) / “Ships every Monday and Thursday in 250 g and 1 kg bags.” Each sentence has a prepared improved, shorter, warmer, corrected, Japanese and Indonesian version. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#selection-actions ```` ### Or ask MonstarX > Let people select text in my editor and get an AI toolbar right next to it — Improve, Shorter, Warmer, Fix spelling and Translate — then show the rewrite in place with the old words struck through and the new ones in green, and buttons to accept or discard it. ## 18. Command palette Input · One box to find anything and run any action: fuzzy search, grouped results, scopes and a second step, all from the keyboard. Live demo and React + Tailwind source: https://monstarx.com/ui#command-palette · Install: `npx shadcn@latest add https://monstarx.com/ui/r/command-palette.json` ### Build prompt for a coding agent ````text Build a "Command palette" UI component. One box to find anything and run any action: fuzzy search, grouped results, scopes and a second step, all from the keyboard. What it is for: The ⌘K box of an app: one place to jump to any record and run any action without the mouse — search that forgives typos, results grouped by kind, and a second step for actions that need a choice. Structure: - A trigger in the app bar: a search-looking button “Search or jump to…” with ⌘ K key caps; beside it a status line that says what the last command did. - The palette: a 16px-radius panel with a large shadow — a 48px input row (search icon, the text, an “esc” key cap that closes), a row of scope pills (All, Actions, Coffees, Cafés, People), a 300px results list that scrolls inside itself, and a footer of key hints with the result count at the end. - Results in groups with small uppercase headings: Recent (when nothing is typed), Best match (the top hit when something is), then Actions, Coffees, Cafés, People. Each row: a 28px icon tile (violet for actions, an outline for records, initials in a circle for people), the label with matched letters bold and underlined in violet, a detail line, and at the end a figure, a shortcut key cap or a chevron for actions that open a second step. - Preview variant: from 640px wide, the list takes 56% and a preview pane shows the highlighted row — kind, name, a list of facts and, for coffees, a stock meter (amber under 20 kg). On phones the pane is hidden. - A second step (“Schedule a roast…”): a back arrow and a violet breadcrumb chip join the input, the placeholder becomes the question, and the list shows the choices. States: - Nothing typed: Recent, then up to four actions and three of each other kind. - Typing: rows filter on every keystroke with a fuzzy match (letters in order; runs and word starts score higher; a detail or keyword match counts from two letters), best first. - Scoped: one pill dark, only that kind; typing “>”, “#” or “@” first scopes to actions, cafés or people. - No matches: a search icon, “No matches for “…”” and two choices — “Ask Roastie “…”” (violet) and “Clear search”. - Closed: only the trigger; after running a command the status line shows a green tick and what happened. Interactions: - ⌘K or Ctrl+K opens and closes it; clicking the trigger opens it; focus goes to the input. - ↑/↓ move the highlight and wrap; Page Up/Down jump five; the highlighted row scrolls into view; moving the mouse over a row highlights it. - Enter or a click runs the highlighted row: records open, actions run, “Schedule a roast…” opens its second step. - Escape steps back one level: clears the text, then leaves the second step or the scope, then closes and returns focus to the trigger. Backspace in an empty input leaves the second step or the scope. - Running an item moves it to the top of Recent. Accessibility: - The palette is a dialog labelled “Command palette”; the input is a combobox with aria-controls, aria-autocomplete="list" and aria-activedescendant on the highlighted option, so focus never leaves the input. - Results are a listbox of groups (role="group" labelled by their heading) of options with aria-selected; the empty state’s two choices are options too. - The scope pills are toggle buttons with aria-pressed; the result count is a polite live region; the status line is role="status". - Matched letters are marked with , not colour alone; the input is 16px on phones so iOS does not zoom; the opening animation is removed with reduced motion. Variants: Grouped, With preview — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s app. Actions: New wholesale order (N), Schedule a roast… (R, a second step listing the coffees: “Roast Nyeri AA on Thursday”), Email every café, Export roast log week 41 (38 batches, 642 kg), Invite a teammate, Open settings. Coffees with green stock: Crow’s Nest Espresso 142 kg, Huila Pink Bourbon 64 kg, Yirgacheffe Kochere 51 kg, Nyeri AA 18 kg (low), Cerrado Natural 96 kg, Sugarcane Decaf 33 kg. Cafés with suburbs and standing orders (Larder & Lane, Fitzroy, 12 kg a week…). People: Ellie Hart, Mara Okafor, Theo Lindqvist, Priya Raman, Jun Park, Sam Whitlock. Recent: Nyeri AA, Larder & Lane, Export roast log. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#command-palette ```` ### Or ask MonstarX > Add a command palette that opens with ⌘K: one search box that finds pages, records and actions as you type (forgiving typos), groups the results with recent items first, highlights the matching letters, runs the chosen one with Enter, and shows a friendly empty state with a suggestion when nothing matches. ## 19. Diff table Data · AI edits sweeping through a table row by row: every change as before → after, accept or reject per cell, per row or all, and the rows it left alone explained. Live demo and React + Tailwind source: https://monstarx.com/ui#diff-table · Install: `npx shadcn@latest add https://monstarx.com/ui/r/diff-table.json` ### Build prompt for a coding agent ````text Build a "Diff table" UI component. AI edits sweeping through a table row by row: every change as before → after, accept or reject per cell, per row or all, and the rows it left alone explained. What it is for: Reviews the edits an AI proposes to a table — a price change, a bulk fix, a cleanup — before they are applied: people watch the agent sweep through the rows, see every changed cell as before → after, read why some rows were left alone, and accept or reject per cell, per row or all at once. Structure: - A card. Header: a violet AI icon (spinning while it works), the instruction in quotes-free plain text, and a status line (“Editing row 4 of 8 · 5 changes so far” → “8 changes in 7 rows · 1 row kept as it is”). - The table (scrolls sideways on phones with the first column sticky): Café (name and suburb), Coffee, $/kg (end-aligned, tabular figures), Delivery, and a narrow review column with ✓ and ✕ for each changed row. - Inline variant: a changed cell shows the old value small, red and struck through, then the new value in green; accepted cells add a small tick. - Rows variant: each changed row becomes a pair, git style — a “−” row tinted red with the old values (changed cells in red) and a “+” row tinted green with the new ones and the review buttons. - A row the agent chose not to change gets an amber note under it (“Kept: Fixed price until 31 Dec under their contract.”). - A footer: “Click a changed cell to reject or restore it. 8 of 8 kept”, Reject all, Accept all and “Apply 8 changes”; after applying, “Price list updated · cafés see new prices from 1 Nov” and Undo. States: - Sweeping: a violet highlight moves down one row at a time (with a ping dot in the name cell); edits appear in the rows it has passed, each changed cell flashing green once. - Proposed (default), Accepted (new value with a tick), Rejected (old value back, new value grey and struck). - Applied: the table shows the final values, accepted ones in green; Undo returns to review. - Bulk buttons are disabled while sweeping; Apply is disabled when every change is rejected. Interactions: - Click a changed cell to reject it; click again to restore it. - Row ✓ accepts every change in the row (again to go back to proposed); row ✕ rejects them (again to restore). - Accept all, Reject all, Apply, Undo. Accessibility: - A real table with a caption, column headers and the café as a row header. - Changed cells are buttons with aria-pressed (kept or not) and a full label: “Larder & Lane price per kilo: $38.50 to $40.00, proposed”. - Row buttons name the café (“Reject the changes to Little Moth”, “Restore the changes to Little Moth”). - The status line is a polite live region; another one announces each decision (“Harbour Kiosk: accepted”, “All changes rejected”, “Applied 8 changes”). - With reduced motion there is no sweep: all proposals are shown at once, without the flash. Variants: Inline, Before and after rows — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s wholesale price list; instruction “Raise wholesale prices 4%, rounded to the nearest 10¢, and move Fitzroy deliveries to Thursday.” Larder & Lane (Fitzroy, Crow’s Nest Espresso) $38.50 → $40.00 and Tue → Thu; Little Moth (Carlton, Sugarcane Decaf) $41.00 → $42.60; Saltbush Bakery (Brunswick, Crow’s Nest) $38.50 → $40.00; Northcote Social (Nyeri AA, $52.00) kept — fixed price until 31 Dec; Harbour Kiosk (Williamstown) $39.00 → $40.60; The Reading Room (Clifton Hill, Huila Pink Bourbon) $47.50 → $49.40; Quay & Co (Docklands, Cerrado Natural) $34.00 → $35.40; Fig & Fennel (Richmond, Yirgacheffe Kochere) $49.00 → $51.00. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#diff-table ```` ### Or ask MonstarX > When the assistant proposes changes to a table, show them before applying: each changed cell with the old value struck through and the new one in green, a note on any row it chose not to change, and buttons to accept or reject each cell, each row or everything, then Apply. ## 20. Insight cards Data · Numbers that explain themselves: stat cards with sparklines or bar charts you can hover, and the insight behind them. Live demo and React + Tailwind source: https://monstarx.com/ui#insight-cards · Install: `npx shadcn@latest add https://monstarx.com/ui/r/insight-cards.json` ### Build prompt for a coding agent ````text Build a "Insight cards" UI component. Numbers that explain themselves: stat cards with sparklines or bar charts you can hover, and the insight behind them. What it is for: The top of a dashboard: the few numbers that matter this week, each with its trend, and an AI-written insight that explains what the numbers mean and offers the next step. Structure: - A responsive grid of stat cards (one column in a narrow container, two from about 24rem, four from about 48rem — container queries, not the window): label, change badge with an arrow, the big number, a small caption line, and a 48px-tall chart. - Charts: a sparkline (2px line with a soft gradient area under it) or seven bars (the latest dark, the rest light). - Below the cards, an insight card with a soft violet wash: a lightbulb tile, a title, two sentences, a primary action button, and a pager (previous, dots, next). States: - Resting: caption reads “vs last week”. - Reading a day (hover, touch or keyboard): a vertical guide and a dot on the sparkline, or that day’s bar coloured; the caption becomes “Thu 9 Oct · $2,760”. - Change badge green when the change is good news and red when it is bad, whichever direction it points (a roast loss going down is good). - Insight action done: the button turns green with a tick and “Done”, and stays done for that insight. Interactions: - Moving a pointer or finger across a chart reads the nearest day; leaving clears it. Vertical page scrolling still works on touch. - Each chart is focusable: ←/→ step through days, Home/End jump, Escape clears. - The pager’s arrows cycle through the insights. Accessibility: - Each chart is a focusable group whose label summarises the trend (“Revenue over the last 7 days, from $2,210 to $2,630”) and says how to step through it; the day being read is announced through a polite live region. - Arrows and percentages have text, not only colour; the insight text is a live region and the pager says “Insight 2 of 3”. - Chevrons mirror in right-to-left layouts. Variants: Sparklines, Bars — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow, Mon 6 – Sun 12 Oct 2026: Revenue $18,420 (+12.4%, daily 2,210…2,630), Orders 312 (+8.1%), Subscribers 1,284 (+2.3%), Roast loss 15.8% (−0.4 pts, good). Insights: “Nyeri AA will sell out 6 days early” → Draft a reorder; “Thursday is carrying the week” → Move 6 batches to Monday; “Tasting notes keep subscribers” → Add cards to every box. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#insight-cards ```` ### Or ask MonstarX > Add a row of stat cards to my dashboard: each shows a number, its change since last week in green or red, and a small chart people can hover to read each day’s value. Below them, add an insight card that pages through what the numbers mean, each with a suggested next step. ## 21. Records table Data · A CRM-style table: search, sortable columns, tags, a strength meter, and row selection with bulk actions. Live demo and React + Tailwind source: https://monstarx.com/ui#records-table · Install: `npx shadcn@latest add https://monstarx.com/ui/r/records-table.json` ### Build prompt for a coding agent ````text Build a "Records table" UI component. A CRM-style table: search, sortable columns, tags, a strength meter, and row selection with bulk actions. What it is for: The main table of a CRM, an admin screen or an AI-built back office: find a record fast, compare numbers, see which relationships need attention, and act on several records at once. Structure: - Above the table: a search field and, at the end, a live count (“10 cafés · 238 kg a month”). - Columns: a checkbox; the record (initials avatar, name, and a second line with suburb and contact); tags as small outlined chips; monthly volume as a number with a thin bar relative to the largest; last order as relative time; relationship strength as four rising bars coloured red, amber or green with a word (Weak, Fair, Good, Strong); a status pill (Active, At risk, Paused). - A header row with sortable column buttons showing ↑, ↓ or a neutral ⇅ icon. - A dark bulk-action bar that slides up inside the table’s bottom edge when rows are selected: “3 selected”, Email, Export and a clear (×) button. - An empty state when the search matches nothing: “No cafés match “xyz”” with Clear the search. States: - Default sort: monthly volume, largest first. - Sorted column: its header text and arrow emphasised; clicking again reverses; a new column starts descending for numbers and ascending for names. - Selected rows tinted; the header checkbox is checked when all visible rows are, indeterminate when some are. - Comfortable density (two-line records, 12px vertical padding) or compact (one line, 6px). - After a bulk action, a short green confirmation line below the table. Interactions: - Typing in search filters by name, suburb, contact and tags as you type. - Clicking a header sorts; Tab reaches every header button and checkbox. - Select all toggles only the rows currently visible. - On narrow screens the table scrolls sideways inside its frame while the checkbox and name columns stay pinned at the start edge. Accessibility: - A real table with a visually hidden caption describing the current sort; record names are row headers (th scope="row"). - Sortable headers use aria-sort (ascending, descending, none) and contain buttons. - Every checkbox is labelled (“Select Larder & Lane”, “Select all cafés”); selected rows carry aria-selected. - The strength meter is an image labelled “Strong relationship”; counts and confirmations are live regions. - The hidden bulk bar is aria-hidden and its buttons leave the tab order. Variants: Comfortable, Compact — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s wholesale cafés: Larder & Lane (Fitzroy, Ava Chen, Pour-over + Weekly, 42 kg, 2 days ago, Strong, Active), Little Moth (Carlton, 28 kg), Saltbush Bakery (Brunswick, 19 kg, At risk), Northcote Social (36 kg), Harbour Kiosk (Williamstown, 8 kg, Paused), The Reading Room (Clifton Hill, 14 kg), Quay & Co (Docklands, 51 kg), Fig & Fennel (Richmond, 11 kg, At risk), Common Ground (Footscray, 23 kg), Wren Street Deli (Abbotsford, 6 kg, Paused). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#records-table ```` ### Or ask MonstarX > Add a customers table: searchable, with sortable columns (name, tags, monthly volume, last order, and relationship strength shown as four bars), checkboxes to select rows, and a bar with bulk actions that appears when rows are selected. On a phone the first column stays in place while the rest scrolls. ## 22. Filter table Data · A live table that status chips reorganise as you filter: counts update, rows glide into place and new ones arrive while you watch. Live demo and React + Tailwind source: https://monstarx.com/ui#filter-table · Install: `npx shadcn@latest add https://monstarx.com/ui/r/filter-table.json` ### Build prompt for a coding agent ````text Build a "Filter table" UI component. A live table that status chips reorganise as you filter: counts update, rows glide into place and new ones arrive while you watch. What it is for: A table of live records — orders, tickets, jobs, deliveries — that people narrow with status chips while new rows keep arriving and existing ones change status, without losing their place. Structure: - A header row: the title (“Today’s orders”), a Live indicator (a pulsing green dot, or a grey “Paused”), a Pause updates / Resume button, and a search field at the end (full width on its own row on phones). - A row of status chips: All with the total, then one chip per status with a coloured dot and its live count — New (sky), Roasting (violet), Packed (amber), Shipped (emerald), Issue (red). Several can be on at once; the row scrolls sideways when it does not fit. - A table in a 292px scroll area with a sticky header: Order (#1048, monospace), Café, Coffee, Weight, Status (a pill with a dot, plus the reason for an issue on wide screens), Placed. On phones Coffee and weight move under the café name and Weight and Placed hide. - Grouped variant: the same rows under a heading per status (dot, name, count, total kg) that folds. - A footer with “6 of 11 orders” and the total weight shown. States: - All: every order, newest first. Filtered: only the chosen statuses; choosing every status goes back to All. - A row that changes status flashes amber for a moment; if its new status is filtered out it stays faded for about a second, then leaves, so the change is seen rather than vanishing. - New rows slide in at the top; rows that move (filtering, arrivals, regrouping) glide from their old place to the new one. - Paused: no new events until Resume; the indicator turns grey. - Nothing matches: “No orders match” with what was searched and a Clear filters button. Interactions: - Click a chip to toggle it; All clears the chips. - The chips are one tab stop: ←/→ (mirrored in right-to-left), Home and End move between them; Space or Enter toggles. - Typing in the search narrows by café, coffee or order number; the × clears it. - Grouped: a group heading folds or unfolds its rows. - Pause updates freezes the stream (it must be possible to stop content that updates by itself). Accessibility: - A real with a caption that names the active filter; column headers with scope; group headings as
containing a button with aria-expanded. - Chips are toggle buttons with aria-pressed inside a toolbar labelled “Filter by status”; counts are part of their names. - A polite live region announces arrivals and issues while live (not every status change), and stops when paused. - Row movement uses transforms only and is turned off with reduced motion; colour is never the only signal (every status has its word). Variants: Chips, Grouped — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s orders on a Tuesday morning: #1048 Fig & Fennel, Huila Pink Bourbon 8 kg, New, 9:52; #1047 Larder & Lane, Crow’s Nest Espresso 12 kg, New; #1046 Web orders, Yirgacheffe Kochere 9 kg, Roasting; #1045 Northcote Social, Nyeri AA 10 kg, Roasting; #1044 Little Moth, Sugarcane Decaf 7 kg, Packed; #1043 Harbour Kiosk 4 kg, Issue “Courier delay”; #1042 Quay & Co 16 kg, Packed; #1041 Saltbush Bakery, #1040 The Reading Room, Shipped yesterday. Every 2.6 s an order arrives (Web orders, Nyeri AA, 3 kg, 10:02…) or moves on a stage; one card is declined. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#filter-table ```` ### Or ask MonstarX > Add a live orders table with status chips above it (All, New, In progress, Shipped, Issue) that each show a count and filter the rows when clicked. New orders appear at the top and rows move smoothly when their status changes; add a search box, a Pause button for the live updates and an option to group the rows by status. ## 23. Code diff Data · The agent’s code changes, ready to review: unified or side by side, word-level highlights, folded unchanged lines and comments on any changed line. Live demo and React + Tailwind source: https://monstarx.com/ui#code-diff · Install: `npx shadcn@latest add https://monstarx.com/ui/r/code-diff.json` ### Build prompt for a coding agent ````text Build a "Code diff" UI component. The agent’s code changes, ready to review: unified or side by side, word-level highlights, folded unchanged lines and comments on any changed line. What it is for: Shows the code an AI agent changed, file by file, in a form people can actually review: what was removed and added down to the word, unchanged code folded away, the agent’s own note on why a line changed, comments on any changed line, and a clear approve. Structure: - A summary line: a violet sparkle, “Roastie changed 2 files to add the 2 pm Tuesday cut-off · +19 −6”, “1 / 2 viewed” and an “Approve changes” button. - One bordered section per file. Header: collapse chevron, file icon, the path in monospace (left-to-right even in RTL pages), “+11 −6”, five small squares showing the green/red share, and a “Viewed” checkbox (checking it collapses the file). The second file (the tests) starts collapsed so the first change is what people read first. - Unified variant: rows of old line number, new line number, a +/− sign and the code; removed lines tinted red, added lines green, with the exact words that changed in a stronger tint. Syntax colours: comments grey italic, strings green, keywords violet, numbers amber, function names blue. - Split variant: the old file on the start half and the new file on the end half, each with its own line numbers; each run of removed lines sits beside the lines that replaced it, with empty grey cells where one side has nothing. - Runs of unchanged lines more than three lines from a change fold into a blue bar “Show 15 unchanged lines” (runs shorter than four lines are simply shown). - Comment threads open under a line: comment cards (the agent’s with a sparkle and “why it changed”), then a text box with Cancel and Comment. States: - Folded and unfolded runs; collapsed or viewed files; a line with a thread; composing a comment; approved (the button turns green and reads “Approved”). - The diff itself is computed: a longest-common-subsequence line diff, then a word diff for each removed/added pair, so any two versions render correctly. Interactions: - Click a fold bar to show its lines. The chevron collapses a file; Viewed marks it read and collapses it. - Hover a changed line (or Tab to it) to reveal a small “+” comment button in the gutter; it opens the comment box. ⌘/Ctrl+Enter posts, Escape cancels. - Approve changes toggles approval. - Wide code scrolls sideways inside the file, never the page. Accessibility: - Each file is a labelled section; the collapse button has aria-expanded and names the file. - The +/− sign cells carry “added”/“removed” labels; line numbers are not selectable, so copying code copies only code. - Comment buttons are only in the Tab order on changed lines and are labelled “Comment on line 14”. - Approve uses aria-pressed; the Viewed checkbox is a real checkbox with a visible label. Variants: Unified, Side by side — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s order system. src/lib/roast-day.ts: roastDayFor(placedAt) gains a zone parameter (Australia/Melbourne), converts with toZone, and adds CUTOFF_HOUR = 14 so an order after 2 pm on Tuesday waits for Monday’s roast (Kettle & Crow roasts on Mondays and Thursdays); roastLabel and ordersFor are unchanged and fold away. The agent’s note on CUTOFF_HOUR: “Same cut-off as the wholesale order page.” src/lib/roast-day.test.ts adds two tests: a Tuesday order at 13:55 stays in Thursday’s roast (2026-10-08), one at 14:05 moves to Monday’s (2026-10-12). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#code-diff ```` ### Or ask MonstarX > Show the code changes the agent made as a diff people can review: file by file, removed lines in red and added lines in green with the changed words highlighted, unchanged code folded away, a Viewed checkbox per file, comments on any changed line, and a switch between unified and side-by-side views. ## 24. Log stream Data · A live log viewer with level filters, search, follow and copy — or a terminal that streams a build and takes commands. Live demo and React + Tailwind source: https://monstarx.com/ui#log-stream · Install: `npx shadcn@latest add https://monstarx.com/ui/r/log-stream.json` ### Build prompt for a coding agent ````text Build a "Log stream" UI component. A live log viewer with level filters, search, follow and copy — or a terminal that streams a build and takes commands. What it is for: Where people watch what their app or agent is doing right now — server logs, a build, a deploy — and find the line that matters: filter by level, search, follow the newest lines, and copy what they need. Structure: - Logs variant: a toolbar with four level toggles (Debug, Info, Warn, Error — a coloured dot, the name or its initial on phones, and a live count), a search field, and Pause, Copy and Clear icon buttons. - The log: a 300px monospace list, newest at the bottom; each line has a chevron when it has details, the time with milliseconds (hidden on phones), the level in its colour, the source in brackets and the message; warn lines tinted amber, errors tinted red; a copy button appears at the end on hover or focus. Details open as pretty-printed JSON under the line. - A status bar: a green pulsing “Streaming · kettlecrow-shop” (grey “Paused”), “24 of 31”, and a Follow on / off switch. - A “↓ 7 new lines” pill floats over the bottom of the log when follow is off and lines have arrived. - Terminal variant: a window bar (three dots, “kettlecrow — ~/shop — zsh”, a running/idle indicator, Copy), then a terminal with a coloured prompt, commands typed letter by letter, coloured output (green ticks, amber warnings, sky links, dim file sizes), progress bars that redraw in place, and a live prompt line to type into. States: - Streaming or paused; following (pinned to the newest line) or not. - Filtered by levels and search (matches highlighted in amber); nothing matches; cleared. - Terminal: running a script (no prompt, a block caret while typing) or idle (prompt with “type help”). Interactions: - Level toggles show or hide each level; search filters as you type; × clears it. - Scrolling up lets go of follow; scrolling back to the bottom, End, the pill or the Follow switch follows again; Home jumps to the oldest line. - Pause stops new lines; Copy copies every visible line as text (Copied ✓ for a moment); a line’s own button copies just it; Clear empties the view. - Terminal: type a command and press Enter — help, orders, roast --today, stock nyeri, deploy, ls, echo, clear (or Ctrl+L); ↑/↓ walk the history; Ctrl+C stops a running script; clicking anywhere in the output focuses the prompt unless text is selected. Accessibility: - The log is role="log" with aria-live="off" (a stream would be too chatty) and is focusable for keyboard scrolling; errors are announced in a separate polite region. - Level toggles and Pause use aria-pressed; icon buttons have labels; detail chevrons use aria-expanded. - The terminal prompt is a labelled input (“Command”); output is role="log". - New-line highlights and pulses stop with reduced motion and scripted output appears at once. Variants: Logs, Terminal — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s shop server on a Tuesday from 10:42:03: GET /api/coffees 200 · 38 ms; POST /api/orders 201 · #1049 · Fig & Fennel · 8 kg (details: Huila Pink Bourbon, $256.00); roast-plan “Thursday: batch 3 of 7 · Nyeri AA · 6 kg”; WARN stock “Nyeri AA green stock low: 18 kg”; WARN db “slow query orders.byCafe · 812 ms”; ERROR payments “card declined for #1050 · insufficient_funds” (Harbour Kiosk, $96.00); ERROR courier “tracking webhook 502; retrying in 30 s”. Terminal: npm run build (vite v8.3.0, 1,284 modules, a 512 kB chunk warning, built in 3.21s) then npm run deploy (42 files, checks, live at https://kettlecrow.example). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#log-stream ```` ### Or ask MonstarX > Add a live log viewer to my app’s admin: lines stream in with time, level and source; toggles show or hide each level with a count; a search box highlights matches; it follows the newest line until I scroll up (then shows a “new lines” button); and I can pause it, open a line’s details and copy lines. ## 25. Flowchart canvas Workflow · An automation drawn on a dotted canvas — trigger, conditions and actions — with a + to add a step anywhere and a test run that lights up the path. Live demo and React + Tailwind source: https://monstarx.com/ui#flowchart-canvas · Install: `npx shadcn@latest add https://monstarx.com/ui/r/flowchart-canvas.json` ### Build prompt for a coding agent ````text Build a "Flowchart canvas" UI component. An automation drawn on a dotted canvas — trigger, conditions and actions — with a + to add a step anywhere and a test run that lights up the path. What it is for: The editor for an automation or agent workflow: a trigger, then conditions that branch and actions that run, drawn as a flow people can read at a glance, extend in place and test before switching it on. Structure: - A toolbar: the flow’s name and status (“Draft · changes save automatically”, or the test order in the run variant), a test-order switch (12 kg / 7 kg) in the run variant, and a dark Test run / Running… / Run again button. - A 460px canvas with a dot grid that pans and scales with the view. The flow is laid out top to bottom; a condition’s two branches sit side by side under it. - Each step is a 212 × 62 card: a 32px icon tile coloured by kind (trigger amber, condition sky, action and wait neutral), a small uppercase kind label (Trigger, If, Action, Wait), the step’s name and a detail line. - Connectors are 1.5px lines with rounded elbows; branch connectors carry “Yes” and “No” pills. Round + buttons sit on every connector, at the top of each branch and under the last step; an empty branch shows a dashed “Add a step” card. - Corner controls: zoom out, the zoom percentage, zoom in and fit; in the build variant, a bar for the selected step with its name in an editable field and a delete button. States: - Selected step: sky border and soft ring. - Add menu open from a +: Actions (Email the café, Notify the roastery, Create an invoice, Reserve green stock) and Logic (Wait for the cut-off, Is it a new café?), each with an icon and detail. - Test run: steps light up one at a time — running (emerald border, spinner, the connector into it animated), done (emerald tick); the condition shows its answer by highlighting the Yes or No pill; the branch not taken fades; a final “Passed · 4 steps · 1.2 s” badge. - Run variant: no + buttons; a run plays as soon as it appears; switching the test order re-runs it down the other branch. Interactions: - Drag the empty canvas to pan (a finger pans sideways and still scrolls the page vertically); Ctrl/⌘ + wheel or a pinch zooms around the pointer; the buttons zoom around the centre; Fit frames the flow by its width (also on load and when the flow changes size), shrinking for height only to 80% so the text stays readable. - Click or Enter on a step selects it; type to rename it; Delete or Backspace removes it (deleting a condition keeps its Yes branch in its place; the trigger cannot be deleted). - A + opens the add menu beside it: ↑/↓, Home and End move, Enter adds, Escape closes. Adding a condition moves the steps after it into its Yes branch. - With the canvas focused: arrows pan, + and − zoom, 0 fits, Escape clears the selection. Accessibility: - The canvas is a focusable group with aria-roledescription “canvas” and a label that explains its keys; steps are buttons in reading order (top to bottom, Yes before No) with full names (“If: Order is 10 kg or more? … Test run: done, answered Yes”) and aria-pressed when selected. - Every + has a label (“Add a step here”), aria-haspopup="menu" and aria-expanded; the menu uses menu and menuitem roles in labelled groups. - A polite live region announces added and deleted steps and the run’s start and result. - Animations (connector dashes, spinners, menu entrance) stop with reduced motion and a run shows its result at once. Variants: Build, Test run — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s “Route wholesale orders”: Trigger “Wholesale order placed” (from the café portal) → If “Order is 10 kg or more?” → Yes: “Book a batch on Thursday” (Loring S35 · own roast), “Email Mara the plan”; No: “Add to the shared batch” (mixed web and café orders), “Email the café” (confirmation and ship date). Test orders: Larder & Lane · 12 kg (takes Yes), Little Moth · 7 kg (takes No). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#flowchart-canvas ```` ### Or ask MonstarX > Add an automation builder: a flow drawn on a dotted canvas that starts with a trigger, branches on yes/no conditions and runs actions, with a + on every connector to add a step from a menu, steps that can be renamed or deleted, pan and zoom, and a Test run button that highlights each step as it runs. ## 26. Kanban board Workflow · Columns of cards to move between stages — with a mouse, a finger or the keyboard — with limits and a quick add. Live demo and React + Tailwind source: https://monstarx.com/ui#kanban · Install: `npx shadcn@latest add https://monstarx.com/ui/r/kanban.json` ### Build prompt for a coding agent ````text Build a "Kanban board" UI component. Columns of cards to move between stages — with a mouse, a finger or the keyboard — with limits and a quick add. What it is for: A board for work that moves through stages — orders, tickets, content, hiring — where people drag cards between columns, see where the bottleneck is, and add work in place. Structure: - A row of columns that share the width (at least 200px each) and scroll sideways with snap points when they do not fit. - Each column: a tinted rounded panel with a header (title and a count pill, “2 / 2” when it has a limit), the cards, and an “Add card” button at the bottom. - Each card: title, one-line detail, and a footer with a coloured tag, the due day and the owner’s initials; a grip icon at the top end corner. Compact variant: the title only. - While dragging: the card follows the pointer, slightly tilted with a shadow; its old place stays as a faded ghost; a 2px blue line shows where it will land; the target column’s border darkens. States: - Count pill grey under the limit, amber at the limit, red over it (counting the card being dragged in). - Held with the keyboard: blue border and ring on the card. - Quick add open: a text field in place of the Add card button. Interactions: - Mouse: press anywhere on a card and move at least 5px to start dragging; release to drop at the line. - Touch: drag by the grip, so a finger elsewhere still scrolls the board. - Keyboard: Tab to a card, Space or Enter to pick it up, ←/→ to change column, ↑/↓ to change position, Space or Enter to drop, Escape to put it back where it started. Focus stays on the moving card. - Add card: type a title and press Enter; Escape or leaving it empty cancels. Accessibility: - Columns are labelled regions with real headings; cards are lists of buttons with aria-roledescription “Draggable card”, a full label (title, detail, due) and aria-pressed while held. - An assertive live region narrates picking up, each move (“Roasting, position 1 of 2”), dropping and cancelling. - A visible hint explains the keyboard on wider screens; the drag tilt is removed with reduced motion. Variants: Board, Compact — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s roastery floor: To roast (limit 5) — Larder & Lane 12 kg Crow’s Nest Espresso (Wholesale, Thu), Subscription boxes 84 bags Huila Pink Bourbon, Quay & Co 16 kg; Roasting (limit 2) — Web orders batch 2, 9 kg Yirgacheffe Kochere (Online, Today); Resting (limit 4) — Northcote Social 10 kg Nyeri AA, Little Moth 7 kg Sugarcane Decaf; Packed — Web orders batch 1, 32 orders (Shipped). Owners MO, PR, TL, JP. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#kanban ```` ### Or ask MonstarX > Add a kanban board with a column for each stage, cards people can drag between columns with a mouse or a finger or move with the keyboard (Space to pick up, arrows to move, Space to drop), a count and a limit on each column, and a quick “Add card” at the bottom of each one. ## 27. Live cursors and presence Workflow · Who is here and what they are doing: avatars with status, named cursors that glide, remote selections and carets, and follow mode. Live demo and React + Tailwind source: https://monstarx.com/ui#live-cursors · Install: `npx shadcn@latest add https://monstarx.com/ui/r/live-cursors.json` ### Build prompt for a coding agent ````text Build a "Live cursors and presence" UI component. Who is here and what they are doing: avatars with status, named cursors that glide, remote selections and carets, and follow mode. What it is for: Presence for anything people edit together — a board, a document, a design, a spreadsheet: who is here, where they are pointing, what they have selected or are typing, and a way to follow someone. Structure: - A header with the file’s name and “edited just now”, and at the end an overlapping avatar stack: you first (dark), then up to five others in their own colours with a small status dot (green active, grey idle), then “+N”. - Each person has one colour used everywhere: their avatar, cursor, name label, selection and caret. - Cursors: a filled arrow in the person’s colour with a white outline and a pill label with their first name (“Theo · moving” while dragging, “· idle” when idle); they glide between positions. - Canvas variant: a dotted board of sticky notes; a note being moved lifts, tilts slightly and gets the mover’s outline; a selection box in the selector’s colour outlines the notes inside it; typed text appears in the typist’s colour with a blinking caret. - Document variant: a text page; a remote selection is a tinted highlight with an underline and a name flag; a remote caret is a 2px bar with a flag above it; an idle person’s caret is faded. - Following: the frame gets a 2px ring in that person’s colour and a floating “Following Mara ×” pill; the view zooms toward their cursor and keeps it in place as they move. States: - Active, idle (dimmed avatar and cursor), joined (the avatar pops in), left (removed; following stops). - Dragging a note, drawing a selection box, typing, selecting text. - Following someone or not. Interactions: - Select an avatar to follow that person; select it again, the pill’s ×, or press Escape to stop. - Hovering an avatar shows the name and status. - Everything else is driven by the other people’s activity, which arrives over a realtime channel. Accessibility: - The avatar stack is a list labelled with how many people are here; each other person is a toggle button (aria-pressed) named “Follow Mara Okafor, Head roaster” plus “idle” when idle; you are named “You, Ellie Hart”. - Cursors, labels, flags and boxes are decorative (aria-hidden): the content itself stays readable text. - Joins, leaves and following are announced in a polite live region; Escape stops following from anywhere in the component. - With reduced motion cursors do not glide (they stay put) and following does not animate; typing appears at once. Variants: Board, Document — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s “Thursday roast plan”. Canvas: notes “Huila Pink Bourbon — 2 batches, 24 kg”, “Nyeri AA first: the last 18 kg”, “Little Moth wants decaf on Thursday” (Theo moves it), “Cupping Fri 3 pm — who’s in?” (Mara types “Mara, Sam ✓”), “Order 60 kg Nyeri AA by sea”; Priya draws a selection box. Document: “Loring S35, 7 am start…”, Theo selects “Northcote Social it moves to fortnightly”, Mara types “Add 6 kg Sugarcane Decaf for Little Moth.”, Priya idle at the end. People: Mara Okafor (rose), Theo Lindqvist (sky), Priya Raman (emerald), Jun Park (amber, leaves), Sam Whitlock (fuchsia, joins); you are Ellie Hart. Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#live-cursors ```` ### Or ask MonstarX > Show who else is in a document right now: a stack of avatars with an active or idle dot, each person’s cursor with their name in their own colour, what they have selected or are typing, a note when someone joins or leaves, and a way to follow someone by clicking their avatar. ## 28. Version timeline Workflow · Every saved version on a timeline: see what changed as a diff or a before/after slider, restore any version after a clear confirmation, and undo. Live demo and React + Tailwind source: https://monstarx.com/ui#version-timeline · Install: `npx shadcn@latest add https://monstarx.com/ui/r/version-timeline.json` ### Build prompt for a coding agent ````text Build a "Version timeline" UI component. Every saved version on a timeline: see what changed as a diff or a before/after slider, restore any version after a clear confirmation, and undo. What it is for: The history of an app, document or design: every saved version with who made it and what changed, and a safe way to go back to any of them — without ever losing the version you are on. Structure: - Two panes (one at a time on phones, with a back arrow): the timeline on the start side (44%), the selected version on the other. - Timeline: a header (“Versions”, “6 saved”) and versions newest first under day headings (Today, Yesterday, Sun 4 Oct). Each row: a dot on a vertical line (emerald with a halo for the current version, filled for the selected one, hollow otherwise), the number in monospace (v14), pills for Current and Live (published), the title, and the author and time — a violet sparkle when the agent made it. - Detail: the number and title, author and time (and “a copy of v11” for a restore); then the preview — Changes variant: files changed with +/− counts and a five-cell bar, and a unified diff of the chosen file (green added, red removed lines, monospace); Visual variant: the page at that version and now, overlaid, with a draggable divider and labels “v11” and “Now · v14”, plus a slider for the keyboard. - A footer: “Your app runs v14 now.” and a dark Restore v11 button (disabled for the current version). - A confirmation dialog over the component: an amber restore icon, “Restore v11?”, what will happen (“saved as a new version, v15, and v14 stays in the history”), an “Also publish it” checkbox, Cancel and Restore v11 / Restore and publish. States: - Browsing: one version selected; the current one marked. - Confirming: the dialog open, focus on Cancel. - Restoring: the button shows a spinner and “Restoring…”. - Restored: a new version at the top (“Restored version 11”), current and selected, with “v11 restored · Back to v14” in the footer; publishing moves the Live pill to it. Interactions: - Click a version, or use ↑/↓, Home and End in the list (focus follows); on phones Enter or a tap opens its detail. - Changes: choose a file to see its diff. Visual: drag anywhere on the picture or use the slider to move the divider. - Restore opens the confirmation; Escape, Cancel or a click on the backdrop closes it and returns focus to Restore; Tab stays inside it. - “Back to v14” undoes the restore exactly. Accessibility: - The timeline is a listbox (grouped by day) of options with aria-selected and roving focus; each option’s name includes number, title, author, time, Current and Published. - The confirmation is an alertdialog with aria-modal, a title and a description, and a focus trap. - Diff lines say “Added:” / “Removed:” to screen readers, not colour alone; the before/after divider has a labelled range input with a spoken value. - Restoring and undoing are announced in a polite live region. Variants: Changes, Before / after — one component with a prop that switches between them. Look and feel (use the project's own design system and components if it has them; otherwise these): - Neutral greys for surfaces, borders and text (white and neutral-50 to neutral-950); colour only where it means something: emerald for success, amber for warnings, red for errors, sky for information, violet for AI activity. - Hairline 1px borders rather than heavy shadows; one soft shadow for anything that floats (menus, popovers, toasts). - Radius 12px for cards and panels, 8px for controls, fully round for pills and avatars. - Inter or the system UI font at 13–15px; tabular numbers for figures; a monospace face for code, ids and file names. - Motion of 150–250ms with ease-out, used to explain change (appear, expand, progress) and never required to understand it; prefers-reduced-motion turns it off. - A light and a dark theme with the same structure; every colour has a counterpart in each. - Comfortable on a 360px-wide phone and on a desktop: nothing overflows the page; wide content scrolls inside its own container. Sample data: Kettle & Crow’s shop: v14 “Cafés can pause a standing order” (MonstarX agent, today 10:42; portal/orders.tsx +58 −9, standing-orders.ts +22 −3, a test +31), v13 “Invoices show GST on every line” (Ellie Hart, 9:15), v12 “Roast-day cut-off moved to Tue 2 pm” (agent, yesterday 16:30, published), v11 “New headline on the home page” (Mara Okafor: “Roasted Monday. At your door Thursday.”), v10 “Nyeri AA marked ‘Last bags’” (Priya Raman, Sun 4 Oct), v9 “Delivery texts for every drop” (agent). Done when: - Every interaction listed works with a mouse, with touch, and with the keyboard alone, with a visible focus ring. - Screen readers announce what it is, its state and its changes. - It looks right in the light and dark themes, at 360px wide and on a wide screen, with long text in other languages and in right-to-left layouts. - Nothing on the page jumps as it changes state; timers and listeners stop when it unmounts. Use the project's framework and styling. With none, use React, TypeScript and Tailwind CSS. A live demo and a React + Tailwind reference implementation: https://monstarx.com/ui#version-timeline ```` ### Or ask MonstarX > Add a version history: a timeline of saved versions grouped by day, with who made each one and the current one marked. Selecting a version shows what changed (or a before/after comparison of the page), and Restore asks for confirmation, keeps the current version in the history and can be undone. ## 29. Sidebar navigation App building blocks · An app’s side menu with a workspace switcher, badges, folding sections, a highlight that glides with the pointer, and an icon rail. Live demo and React + Tailwind source: https://monstarx.com/ui#sidebar-nav · Install: `npx shadcn@latest add https://monstarx.com/ui/r/sidebar-nav.json` ### Build prompt for a coding agent ````text Build a "Sidebar navigation" UI component. An app’s side menu with a workspace switcher, badges, folding sections, a highlight that glides with the pointer, and an icon rail. What it is for: The side navigation of a dashboard or admin app: switch workspace, see where you are and what needs attention, fold sections you rarely use, and collapse it to icons when you need the room. Structure: - A full-height column on a lightly tinted ground with a hairline end border: 232px wide expanded, 60px as an icon rail; the width animates between the two. - Top: a workspace button — a 28px coloured tile with the workspace’s initials, its name and a detail line (“Roastery · 6 members”), and an up-down chevron — that opens a menu of workspaces with a tick on the current one and “New workspace” at the end. - A search button styled as a field (“Search ⌘K”), then the main rows (icon, label, a count or an attention badge), then collapsible sections with small uppercase headings and a chevron. - One highlight shape behind the rows that glides to whichever row the pointer or keyboard focus is on; the current page is a raised white row with a hairline ring. - Bottom: Settings, the signed-in person (avatar, name, plan) and a collapse button. - Rail: icons only, centred; badges become dots (sky for attention); section headings become thin dividers; hovering or focusing a row shows a dark tooltip beside the rail with the label and count. - Beside it, the page it opens: a breadcrumb, the page title with its icon and a one-line summary. On phones the expanded sidebar takes the whole width and the page shows again when it collapses. States: - Expanded or rail (the variant sets the start; the button and the “[” key switch). - A section open or folded (height animates; folded rows leave the tab order); Sales starts folded. - Workspace menu open; switching workspace swaps the rows and selects its first page. - Badges: a quiet count (Orders 12) or a filled sky pill for things that need attention (Inbox 4). Interactions: - Click a row to open its page; aria-current marks it. - ↑/↓ move between rows, Home/End jump to the first or last; Tab still moves through everything. - “[” collapses or expands while focus is in the sidebar; the button says which it will do. - The workspace menu opens on click, Enter or Space; ↑/↓, Home and End move; Enter picks; Escape closes and returns focus; a click outside closes it. - Section headings fold and unfold their rows. Accessibility: - A