Agent-ready UI for AI products

142 React components, screens, blocks, illustrations and motion effects for AI products and SaaS. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. Add them with the shadcn CLI, or let Claude, Cursor or v0 do it through the MCP server.

40 items are free and open source (MIT). The others are part of affectUI Pro – a one-time purchase from $199.

Components

Agent Checkpoints – An agent's run as a line of checkpoints, like git for agents – rewind to any of them and a new attempt branches out of it, while the one it left fades back but stays
Agent Cursors – Agents working in a document like teammates in a multiplayer editor – live pointers with names, suggestions typed letter by letter, images they resize, code they fix and comments beside the page
Agent Findings – A swarm of agents checking something – one calm row per agent with its progress, and their findings sliding into a short feed as they're found
Agent Fleet – Several agents side by side – each card sums up its sub-agents, and a click opens its tree to the right while the last one folds back into its card
Agent Graph – Agents and the tools they call as a living network – a pulse along the link for every call and its answer, busy links growing thicker, agents that breathe while they work and turn amber when they need you
Agent Handoff – A task passed from agent to agent like a relay – at every handoff what went along to the next one, and what got lost on the way
Agent Inbox – All your background agent tasks in one calm list – live clocks and status tags, filter tabs with rolling counts, rows that unfold to the last steps with Approve, Reject, Retry or Open, and glide to their new place
Agent Lanes – Where every agent is right now – a live timeline with a lane per agent, tasks growing into “now”, hand-offs drawn between agents and approvals right on the block
Agent Ledger – Everything an agent changed in your systems, each change with an undo – before and after per row, and pointing at Undo shows what builds on it: what would be undone too, and what can't be taken back
Agent Monitor – One agent at work, as a card – its current step with a clock and the bill so far, a time strip and the finished steps with the logo of each tool, a click on any of them for the details; the exact command when it needs your OK; folds into a small bar with the tools it has used
Agent Plan – An agent's step-by-step plan to review before it runs – rename, drag to reorder, remove or add steps, then watch each one run with live timers and retry from a failed step
Agent Queue – The work waiting for your agents, and how fast it moves – jobs drop into a live queue, glide into free worker slots as growing bars and land in Done or Failed, while a depth chart shows the backlog build up when a rate limit pauses the workers and drain when they resume
Agent Recap – What the agents did while you were away – the night as a small chart with a peak per event, then a board of what needs you, what failed and what's done, acted on right on the card
Agent Steering – Steer an agent while it works – queue a note for the next step and watch it glide into the plan when the agent picks it up, or interrupt right away
Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
AI Answer – Streamed answer with source cards, citation chips that preview their source, copy, regenerate, feedback and follow-ups
Approval Card – An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row
Autonomy Dial – How much an agent may do on its own – a three-stop dial, and its real actions gliding between “Runs on its own” and “Asks you first”, with a lock for what always asks
Billing Schedule – Build a billing phase – start date, duration, products with repeats and timing, discount, minimum and live totals
Breakdown Chart – Stacked bar chart with measure, slice and segment pickers, a hover breakdown and a linked table
Button – Primary, secondary, ghost and destructive buttons with icons, sizes and a shimmering loading state
Change Summary – What moved since last time – one metric per row with a colored trend
Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
Cited Answer – An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked
Collaboration Stream – What agents actually say to each other – a quiet chat where every message shows who it is from and who it is for, handoffs and questions for you tagged, files as chips that open a preview, a card with details under every message, and a composer to name agents with @ or answer a question
Combobox – Pick one or many from a searchable, grouped list – chips with avatars, highlighted matches, create-on-the-fly and full keyboard support
Command Menu – Search and run anything from one field – tool actions with logos and ⌘1–⌘5, everyday commands with icons
Comment Thread – One comment with replies – an assistant reports what it did, folds open details and answers @mentions
Comments Panel – Comment feed with filters, runnable /edit commands, resolve and a composer
Compact Breakdown – A total split into its parts in one small card – numbers roll, the bar glides and the ranked rows trade places when the period changes
Conflict Radar – Agents working on their own branches at once, and where they get in each other's way – a row per file and a column per agent, a line between the agents that changed the same lines, each agent's way in one sentence to pick from, and Merge once all are settled
Context Map – What fills an agent's context window, as a living treemap – system prompt, tools, memory, every file, the chat and tool results as tiles that glide as it grows, the free space dashed, and compaction squeezing old turns into a summary
Context Window – What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear
Cost Waterfall – Where the money and tokens of an agent run go – every LLM call, tool call and sub-agent as a step in a waterfall, with model, tokens, cost and time, the most expensive step on top and a switch between cost and tokens
Data Table – Spreadsheet-style table: select cells and ranges, edit in place, copy and paste, undo and sort
Date Range Picker – Presets and two calendars with a hover preview, comparison with the previous period or year, full keyboard control
Decision Inbox – Open decisions with two quick answers each – answered ones confirm and fold away
Decision Tree – An agent stuck on a decision lays out its options as a tree – the consequences of each branch, the risky ones marked, its own pick highlighted – and you choose a path or write your own
Delegate Board – Hand work to your agents by dragging it onto them – each agent previews its new “busy until” time, or switch to Auto and every new task goes to whoever is free first
Dropzone – Drag files in and watch them upload – fanning documents, colored type badges, progress with time left, errors with retry
Email Draft – Agent-written email for review – switch recipient and tone, edit inline, remove the attachment, send or discard with undo
Experiment Card – An A/B test in two lines that quietly unfolds on hover – variants linked to a tiny chart, a metric switch with rolling numbers, and a winner you pick with a click
Fallback Chain – One request finding a model that answers, as a small flow diagram – the request branches out to each model in its fallback order, a light runs to the one being tried, failed branches break red, and the one that answers runs on to the response
Fan-out Grid – One agent hands a big job to many workers – every task a cell on a live grid that fills in as they get through it, with retries, failures, cost and the time left, and the details of any task on hover
Filter Menu – Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control
Inline Diff – AI edits to prose shown inline – struck and added words you accept or reject one by one, with keys, a popover and undo
Integration Picker – Integrations page of a command menu – search, a list of services and the picked one with its connection on two tiles
Integration Settings – Settings card for a connected service – on/off switch, API key, validated site address, time zone and a save bar
KPI Chart – Metric card with a multi-line chart and a tooltip that follows the pointer
Memory Panel – What the assistant remembers about you, grouped and editable – a master switch, category filters, and on every memory edit in place, pause or forget with Undo on the tray
Message Actions – The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer
Model Picker – The model menu of an AI chat – point at a model and its speed, quality and cost bars fill, switch on extended thinking and its effort unfolds, while the tray rolls the first-token time and price
Notification Stack – Notice cards stacked behind each other – dismiss the front one to reveal the next
OTP Input – The verification code field done right – a gliding focus ring, paste and SMS autofill, a calm shake on errors and a morph into Verified
Parallel Attempts – An agent tries the same task several ways at once and the best one wins – every attempt races as a row with its model, approach and live bar, then gets a score; the best is marked and picked, and you can switch to another
Permission Request – An agent asks for one specific right – who, why and exactly what will happen – and you allow it once, for an hour or always; then it folds into one line with the time left and Revoke
Plan vs Actual – An agent's plan against what really happens – every step's bar grows over its dashed planned ghost, overruns turn amber, the steps after it slide right, and the expected finish moves away from the planned one
Profile Menu – Account card with the signed-in user, menu actions and profile setup progress
Progress Tracker – Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play
Project Card – A two-line project summary that quietly unfolds on hover – a progress ring with one segment per subtask, a people filter and a status picker, all linked by hover
Prompt Library – Saved prompt templates with variables – type straight into the sentence, watch the finished prompt assemble below, and use it once every variable is filled
Reaction Bar – Like, comment, repost and share in one pill – icons pop and fill, counts roll in digit by digit
Review Center – A focused workspace for what your agents want to do – the queue sorted by risk, one item at a time with the shaky spans marked, Approve, Edit, Reject and Skip on single keys, a stamp as each one leaves and the next one rising in
Scheduled Runs – Agent tasks sorted into a week of sessions – each session has a usage limit, small tasks fill the gaps, big ones are split across sessions, and the stack flies in one card at a time
Segmented Control – Switch between two to six options – a raised pill or underline that glides, stretches a little and can be dragged across, with icons, counts and badges
Setup Guide – Onboarding panel with a progress bar and collapsible task groups that strike through when done
Smart Recommendation – Suggestion card with a confidence signal, alternatives to switch to and accept with undo
Stepper Form – A multi-step flow for onboarding and setup – steps that fill and check off, sliding steps, a card that morphs to each step, inline validation and a success state
Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
Tips Panel – Grid of short tips with one action each – taken tips turn into a done state
Toaster – Calm toasts from anywhere – a stack that fans out on hover, promise toasts that morph from spinner to check, swipe to dismiss
Tool Access Map – An agent in the middle with every tool it can reach around it – which ones it used, which failed and which it calls right now; open a tool for its calls and replay one on its own
Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
Usage Meter – Plan usage and AI credits – a stacked credits meter by category, daily sparkline, limits and a button that speaks up near the limit
Writing Assistant – AI chat card with a soft gradient glow, suggestions, streaming replies and live voice dictation

Screens

AI Chat / Agents – Chat with an orchestrating agent, the agents at work, and a brief to fill in beside it
AI Chat / Run – One autonomous agent run: the plan ticking through its steps, the tool calls, an approval it waits on and the draft it wrote
AI Chat / Start – AI assistant start page: greeting, prompt box with tools, connected apps and suggestions
Analytics – Revenue dashboard: key figures, revenue by channel, breakdown, top products and weekly trends
App Shell Flat – The App Shell laid flat – gray sidebar, an edge-to-edge page and the work area beside it, split by single hairlines
App Shell Inset – Collapsible sidebar with workspace, menu, projects and account, and a resizable work area on the right – tools, browser and suggested sources – the frame every screen sits in
CRM – Company list with pipelines, open views as tabs and an editable data table
Evals – Prompt evaluation dashboard: pass rate by version, reviewable prompt changes and test cases you can re-run
Folders / Detail – Inside one folder: breadcrumbs, file cards with previews, and an empty state
Folders / Overview – Folder overview with tabs, search, sort, grid/list toggle and file templates
Integrations – App directory with a sticky header, categories, search and connect states
Kanban Board – Issues on a board by priority – drag cards between columns, switch to a list, filter and sort
Onboarding – First-run flow of an AI workspace: workspace setup, tool connections, team invites and a first agent, with a getting-started checklist
Settings / Billing – Billing in the settings: the plan with the upcoming bill and usage, plans with monthly or yearly pricing and an add-on, billing address and card, invoices and cancel
Settings / General – Workspace settings with a settings sidebar: icon, name and address as rows, a company context for the assistant and a danger zone that asks for the name
Settings / Models – Model settings with a settings sidebar: default chat and image models with an animated Auto explainer, every provider's models grouped by hosting region with a switch and access per model, filter, search, custom endpoints and your own API keys
Settings / Notifications – Notification settings with a settings sidebar: a daily digest with its time, a table of notification types each sent by email, mobile, both or only to the inbox, and quiet hours at night
Settings / Preferences – Personal preferences with a settings sidebar: default models with Auto and the Model Wheel, language and appearance, chat tools as tiles, custom instructions the model reads with every message and the memories it kept
Settings / Privacy – Privacy settings with a settings sidebar: switches for ad measurement, analytics and training on chats, this browser's cookies, product emails, active sessions to sign out, chats shared by link and a danger zone to export or delete every chat
Settings / Profile – Profile settings with a settings sidebar: picture, name, role and email as rows, time preferences, personal context for the assistant and the password
Settings / Security – Security settings with a settings sidebar: email domains to verify, sign-in rules with SSO and two-step verification, the identity provider details to copy, an IP allowlist and a danger zone that signs everyone out
Settings / Teams – Members and teams in the settings: seats at a glance, search, role filter, export and invite, members with role, plan and usage, bulk changes, and teams
Workflow Builder – Nodes on a canvas joined by curves – drag them in from a palette, set each one up, then run the workflow and watch every step light up

Blocks

Agent Gallery – Slim gradient panels with one open product screen in the middle – pick a panel and it glides open
App Directory – Browse, search and connect integrations – categories, filters and app cards with a connect flow
Client Context – A client workspace with live numbers and a shared context timeline – switch clients, search, filter and add notes or files
Invoice & Credit Note – An invoice and its credit note stacked like paper – switch between them, pick lines to credit, adjust amounts and issue
KPI Board – The top of a dashboard – three trend cards, an overview chart that compares this period with the last, and a focus card; hover shows any day's value and every number rolls when the range changes
Logo Marquee – The endless “Trusted by” strip – a seamless loop that eases to a stop on hover, scrubs with inertia and lifts the hovered logo to colour
Metrics Dashboard – Sales overview – KPI cards pick the metric, one chart switches between dotted line and bars, with top products and channels
Pricing Plans – Pricing section with a monthly / yearly switch, three plan cards and collapsible details
Task Board – Kanban board with drag and drop, quick add, a detail panel, search, label filters and a compact view
Testimonial Wall – The landing-page wall of quotes – columns that scroll endlessly in opposite directions, ease to a stop on hover and scrub with inertia

Illustrations

Agent Team – A prompt types itself and branches out into three agents, each with a role and overlapping tool logos
Cover Flow – Browse covers in 3D – drag, flick or scrub the row, it springs to the nearest cover; images drift in their frames over a soft reflection
DACH Region – DACH map with fading neighbours and a pastel band along the border, switchable to the US, China, India, Brazil or Japan
Empty Calendar – Stack of calendar cards marked empty, fanning out on hover
Enrichment Orbit – Grok tile inside two rings with comets and data nodes orbiting around it
Frost Cloud – A frosted white cloud with eyes cut out of it, on a red-orange or blue sky – it floats, turns to look around, blinks, follows the pointer and bounces with a wink when clicked
Ghosted Chat – Unanswered chat messages marked as read, with a thumbs-down reply on hover
Glass Folder – Glassy blue folder with documents behind a frosted pocket that tips open on hover
Glow Cloud – A glowing cloud with eyes in blue or red-orange – it floats, turns to look around, blinks, follows the pointer and bounces with a wink when clicked
Glow Keyboard – AI chat input that types itself over a glass keyboard – every key press sends a wave up the gradient floor
Integration Beam – Your product between the tools it connects – light pulses flow along curved beams, hover to focus a tool, click to pause it
Integration Flow – Integration pills rotating along a dashed arc, each beaming its data into a central analysis hub
Integration Grid – Honeycomb-like wall of integration logos around a bright centre tile with your product mark, fading out toward the edges
Layer Stack – Isometric stack of five layers with a list beside it – the chosen entry lifts its layer out in color
Lead Sourcing – ChatGPT tile linked to Gmail and Grok, with a shine running along the connection
Logo Cluster – Your mark on a white disc in the middle – company logos bounce out of it and settle around it
Model Wheel – AI model names on a turning drum – the rows bend away at the edges and each model lands on a soft gray fill
Outreach Branches – Lines branching out to Gmail, Slack and Notion with colored pulses flowing down
Project Flow – Animated scene of a client task branching into subtasks, notes and assigned roles
Side Folder – Glassy blue folder on its side, documents sliding out to the right as the pocket swings open on hover
Tab Overload – Overlapping browser windows where the highlight follows the hovered tab
Team Invite – Connected teammates – a cursor drags a new one into the empty slot, the line turns solid and they go online
Voice Orb – The face of a voice assistant – a sphere of dots that breathes, catches sound, collapses into a spinning ring while thinking and ripples when it speaks
World Map Continental – World map with one highlighted continent and a pastel band along its coastline, switchable between all six

Motion

Blur Crossfade – Swaps content with a soft blur while the box glides smoothly to the size of what comes next
Gradient Floor – A blurred colour gradient that glows up from the bottom edge – two layers that drift and morph
Gradient Text – Letters cut from a liquid, ever-flowing gradient – the color sweeps across the word the first time it's seen
Grid Background – A fine line grid that drifts slowly behind your content and fades out towards the edges
Number Ticker – Odometer-style numbers – every digit rolls to its new value and counts in from zero when it scrolls into view
Shimmer Loader – Skeleton blocks that share one soft light sweep, plus shimmering text for “Thinking…” states
Text Reveal – Text that arrives word by word or letter by letter – each piece rises out of a soft blur as it scrolls into view
Tilt Card – A card that tilts in 3D towards the pointer, with a soft glare that follows it and a smooth spring back