Website · Browse components · Docs · Install · Pro

affectUI is a library of handcrafted React components, illustrations and motion effects for AI products and modern SaaS apps. Every item is **one `.tsx` file with its styles inside**: no Tailwind, no CSS setup, no animation library. Install it with the shadcn CLI or copy the file, and it is source you own. ## Showcase A few favorites, recorded live from [affectui.com](https://www.affectui.com). Items marked ^Pro are part of [affectUI Pro](https://www.affectui.com/pricing) and are not in this repository; everything else installs from here for free.

Agent Team _{A prompt types itself and branches out into three agents, each with a role and overlapping tool logos}	Reaction Bar _{Like, comment, repost and share in one pill – icons pop and fill, counts roll in digit by digit}
Team Invite _{Connected teammates – a cursor drags a new one into the empty slot, the line turns solid and they go online}	Command Menu ^Pro _{Search and run anything from one field – tool actions with logos and ⌘1–⌘5, everyday commands with icons}
Progress Tracker _{Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play}	KPI Chart ^Pro _{Metric card with a multi-line chart and a tooltip that follows the pointer}
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}	Logo Cluster _{Your mark on a white disc in the middle – company logos bounce out of it and settle around it}

## Contents - [Why affectUI](#why-affectui) - [Install](#install) - [Usage](#usage) - [Use it with AI tools](#use-it-with-ai-tools) - [Components](#components) - [Blocks](#blocks) - [Illustrations](#illustrations) - [Motion](#motion) - [affectUI Pro](#affectui-pro) - [Contributing](#contributing) - [License](#license) ## Why affectUI - **One file each.** Every component is a single `.tsx` file with its styles inside. Nothing to configure, no CSS framework required. - **Motion that feels finished.** Morphs, staggered reveals, rolling numbers and smooth state changes, and all of it respects `prefers-reduced-motion`. - **Dark mode built in.** Each item switches when an ancestor has the class `dark` or `data-theme="dark"`. - **Accessible by default.** Real buttons, labels, keyboard support and live regions where they matter. - **Responsive.** Container queries, so items adapt to the space they get, not just the window. ## Install ### Requirements - **React 19**, with or without TypeScript - Any React setup: Next.js, Vite, Remix or plain React - The `@/*` import alias if you use the shadcn CLI (Next.js and shadcn set it up by default) ### With the shadcn CLI Every item has its own registry URL. Run the command from its page on [affectui.com](https://www.affectui.com) or from the tables below: ```bash npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json ``` The file lands in `components/ui`, ready to import. Prefer short names? Register the namespace once in `components.json`: ```json { "registries": { "@affectui": "https://www.affectui.com/r/{name}.json" } } ``` ```bash npx shadcn@latest add @affectui/reaction-bar ``` ### Copy and paste Open the item's folder in this repository (`components/`, `illustrations/` or `motion/`), copy the file into your project and import it. That's all it takes. ## Usage ```tsx import { ReactionBar } from "@/components/ui/reaction-bar"; export function PostActions({ post }) { return ( api.react(post.id, key, state.active)} /> ); } ``` Props, keyboard support and accessibility notes for every item are on its page, e.g. [Reaction Bar](https://www.affectui.com/components/reaction-bar). ## Use it with AI tools affectUI is agent-ready. Connect the **MCP server** once and Claude Code, Cursor, VS Code or Codex can search every item, read its docs and add it for you: ```bash claude mcp add --transport http affectui https://www.affectui.com/api/mcp ``` Other clients: add `{ "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } }` to their MCP config. Without any setup, point your assistant at [`llms.txt`](https://www.affectui.com/llms.txt) or [`llms-full.txt`](https://www.affectui.com/llms-full.txt). Every page on affectui.com also has a **Copy prompt** bar for Claude, ChatGPT / Codex, Cursor and v0. Setup details: [Using with AI](https://www.affectui.com/docs/ai). ## Components | Name | What it is | Install | | --- | --- | --- | | [Button](https://www.affectui.com/components/button) | Primary, secondary, ghost and destructive buttons with icons, sizes and a shimmering loading state | `npx shadcn@latest add https://www.affectui.com/r/button.json` | | [Button (Clean)](https://www.affectui.com/components/button-clean) | Primary, secondary, ghost and destructive buttons with icons, sizes and a shimmering loading state | `npx shadcn@latest add https://www.affectui.com/r/button-clean.json` | | [Change Summary](https://www.affectui.com/components/change-summary) | What moved since last time – one metric per row with a colored trend | `npx shadcn@latest add https://www.affectui.com/r/change-summary.json` | | [Change Summary (Clean)](https://www.affectui.com/components/change-summary-clean) | What moved since last time – one metric per row with a colored trend | `npx shadcn@latest add https://www.affectui.com/r/change-summary-clean.json` | | [Comment Thread](https://www.affectui.com/components/comment-thread) | One comment with replies – an assistant reports what it did, folds open details and answers @mentions | `npx shadcn@latest add https://www.affectui.com/r/comment-thread.json` | | [Comment Thread (Clean)](https://www.affectui.com/components/comment-thread-clean) | One comment with replies – an assistant reports what it did, folds open details and answers @mentions | `npx shadcn@latest add https://www.affectui.com/r/comment-thread-clean.json` | | [Decision Inbox](https://www.affectui.com/components/decision-inbox) | Open decisions with two quick answers each – answered ones confirm and fold away | `npx shadcn@latest add https://www.affectui.com/r/decision-inbox.json` | | [Decision Inbox (Clean)](https://www.affectui.com/components/decision-inbox-clean) | Open decisions with two quick answers each – answered ones confirm and fold away | `npx shadcn@latest add https://www.affectui.com/r/decision-inbox-clean.json` | | [Email Draft](https://www.affectui.com/components/email-draft) | Agent-written email for review – switch recipient and tone, edit inline, remove the attachment, send or discard with undo | `npx shadcn@latest add https://www.affectui.com/r/email-draft.json` | | [Email Draft (Clean)](https://www.affectui.com/components/email-draft-clean) | Agent-written email for review – switch recipient and tone, edit inline, remove the attachment, send or discard with undo | `npx shadcn@latest add https://www.affectui.com/r/email-draft-clean.json` | | [Filter Menu](https://www.affectui.com/components/filter-menu) | Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control | `npx shadcn@latest add https://www.affectui.com/r/filter-menu.json` | | [Filter Menu (Clean)](https://www.affectui.com/components/filter-menu-clean) | Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control | `npx shadcn@latest add https://www.affectui.com/r/filter-menu-clean.json` | | [Message Actions](https://www.affectui.com/components/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 | `npx shadcn@latest add https://www.affectui.com/r/message-actions.json` | | [Message Actions (Clean)](https://www.affectui.com/components/message-actions-clean) | 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 | `npx shadcn@latest add https://www.affectui.com/r/message-actions-clean.json` | | [Notification Stack](https://www.affectui.com/components/notification-stack) | Notice cards stacked behind each other – dismiss the front one to reveal the next | `npx shadcn@latest add https://www.affectui.com/r/notification-stack.json` | | [Notification Stack (Clean)](https://www.affectui.com/components/notification-stack-clean) | Notice cards stacked behind each other – dismiss the front one to reveal the next | `npx shadcn@latest add https://www.affectui.com/r/notification-stack-clean.json` | | [OTP Input](https://www.affectui.com/components/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 | `npx shadcn@latest add https://www.affectui.com/r/otp-input.json` | | [OTP Input (Clean)](https://www.affectui.com/components/otp-input-clean) | The verification code field done right – a gliding focus ring, paste and SMS autofill, a calm shake on errors and a morph into Verified | `npx shadcn@latest add https://www.affectui.com/r/otp-input-clean.json` | | [Profile Menu](https://www.affectui.com/components/profile-menu) | Account card with the signed-in user, menu actions and profile setup progress | `npx shadcn@latest add https://www.affectui.com/r/profile-menu.json` | | [Profile Menu (Clean)](https://www.affectui.com/components/profile-menu-clean) | Account card with the signed-in user, menu actions and profile setup progress | `npx shadcn@latest add https://www.affectui.com/r/profile-menu-clean.json` | | [Progress Tracker](https://www.affectui.com/components/progress-tracker) | Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play | `npx shadcn@latest add https://www.affectui.com/r/progress-tracker.json` | | [Progress Tracker (Clean)](https://www.affectui.com/components/progress-tracker-clean) | Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play | `npx shadcn@latest add https://www.affectui.com/r/progress-tracker-clean.json` | | [Reaction Bar](https://www.affectui.com/components/reaction-bar) | Like, comment, repost and share in one pill – icons pop and fill, counts roll in digit by digit | `npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json` | | [Reaction Bar (Clean)](https://www.affectui.com/components/reaction-bar-clean) | Like, comment, repost and share in one pill – icons pop and fill, counts roll in digit by digit | `npx shadcn@latest add https://www.affectui.com/r/reaction-bar-clean.json` | | [Segmented Control](https://www.affectui.com/components/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 | `npx shadcn@latest add https://www.affectui.com/r/segmented-control.json` | | [Segmented Control (Clean)](https://www.affectui.com/components/segmented-control-clean) | 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 | `npx shadcn@latest add https://www.affectui.com/r/segmented-control-clean.json` | | [Smart Recommendation](https://www.affectui.com/components/smart-recommendation) | Suggestion card with a confidence signal, alternatives to switch to and accept with undo | `npx shadcn@latest add https://www.affectui.com/r/smart-recommendation.json` | | [Smart Recommendation (Clean)](https://www.affectui.com/components/smart-recommendation-clean) | Suggestion card with a confidence signal, alternatives to switch to and accept with undo | `npx shadcn@latest add https://www.affectui.com/r/smart-recommendation-clean.json` | | [Thinking Loader](https://www.affectui.com/components/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 | `npx shadcn@latest add https://www.affectui.com/r/thinking-loader.json` | | [Thinking Loader (Clean)](https://www.affectui.com/components/thinking-loader-clean) | A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check | `npx shadcn@latest add https://www.affectui.com/r/thinking-loader-clean.json` | | [Tips Panel](https://www.affectui.com/components/tips-panel) | Grid of short tips with one action each – taken tips turn into a done state | `npx shadcn@latest add https://www.affectui.com/r/tips-panel.json` | | [Tips Panel (Clean)](https://www.affectui.com/components/tips-panel-clean) | Grid of short tips with one action each – taken tips turn into a done state | `npx shadcn@latest add https://www.affectui.com/r/tips-panel-clean.json` | | [Tool Call Card](https://www.affectui.com/components/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 | `npx shadcn@latest add https://www.affectui.com/r/tool-call-card.json` | | [Tool Call Card (Clean)](https://www.affectui.com/components/tool-call-card-clean) | 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 | `npx shadcn@latest add https://www.affectui.com/r/tool-call-card-clean.json` | ## Blocks | Name | What it is | Install | | --- | --- | --- | | [Logo Marquee](https://www.affectui.com/blocks/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 | `npx shadcn@latest add https://www.affectui.com/r/logo-marquee.json` | | [Testimonial Wall](https://www.affectui.com/blocks/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 | `npx shadcn@latest add https://www.affectui.com/r/testimonial-wall.json` | ## Illustrations | Name | What it is | Install | | --- | --- | --- | | [Agent Team](https://www.affectui.com/illustrations/agent-team) | A prompt types itself and branches out into three agents, each with a role and overlapping tool logos | `npx shadcn@latest add https://www.affectui.com/r/agent-team.json` | | [Cover Flow](https://www.affectui.com/illustrations/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 | `npx shadcn@latest add https://www.affectui.com/r/cover-flow.json` | | [DACH Region](https://www.affectui.com/illustrations/region-dach) | DACH map with fading neighbours and a pastel band along the border, switchable to the US, China, India, Brazil or Japan | `npx shadcn@latest add https://www.affectui.com/r/region-dach.json` | | [Empty Calendar](https://www.affectui.com/illustrations/empty-calendar) | Stack of calendar cards marked empty, fanning out on hover | `npx shadcn@latest add https://www.affectui.com/r/empty-calendar.json` | | [Enrichment Orbit](https://www.affectui.com/illustrations/enrichment-orbit) | Grok tile inside two rings with comets and data nodes orbiting around it | `npx shadcn@latest add https://www.affectui.com/r/enrichment-orbit.json` | | [Frost Cloud](https://www.affectui.com/illustrations/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 | `npx shadcn@latest add https://www.affectui.com/r/frost-cloud.json` | | [Ghosted Chat](https://www.affectui.com/illustrations/ghosted-chat) | Unanswered chat messages marked as read, with a thumbs-down reply on hover | `npx shadcn@latest add https://www.affectui.com/r/ghosted-chat.json` | | [Glow Cloud](https://www.affectui.com/illustrations/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 | `npx shadcn@latest add https://www.affectui.com/r/glow-cloud.json` | | [Integration Beam](https://www.affectui.com/illustrations/integration-beam) | Your product between the tools it connects – light pulses flow along curved beams, hover to focus a tool, click to pause it | `npx shadcn@latest add https://www.affectui.com/r/integration-beam.json` | | [Integration Grid](https://www.affectui.com/illustrations/integration-grid) | Honeycomb-like wall of integration logos around a bright centre tile with your product mark, fading out toward the edges | `npx shadcn@latest add https://www.affectui.com/r/integration-grid.json` | | [Layer Stack](https://www.affectui.com/illustrations/layer-stack) | Isometric stack of five layers with a list beside it – the chosen entry lifts its layer out in color | `npx shadcn@latest add https://www.affectui.com/r/layer-stack.json` | | [Lead Sourcing](https://www.affectui.com/illustrations/lead-sourcing) | ChatGPT tile linked to Gmail and Grok, with a shine running along the connection | `npx shadcn@latest add https://www.affectui.com/r/lead-sourcing.json` | | [Logo Cluster](https://www.affectui.com/illustrations/logo-cluster) | Your mark on a white disc in the middle – company logos bounce out of it and settle around it | `npx shadcn@latest add https://www.affectui.com/r/logo-cluster.json` | | [Model Wheel](https://www.affectui.com/illustrations/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 | `npx shadcn@latest add https://www.affectui.com/r/model-wheel.json` | | [Side Folder](https://www.affectui.com/illustrations/side-folder) | Glassy blue folder on its side, documents sliding out to the right as the pocket swings open on hover | `npx shadcn@latest add https://www.affectui.com/r/side-folder.json` | | [Tab Overload](https://www.affectui.com/illustrations/tab-overload) | Overlapping browser windows where the highlight follows the hovered tab | `npx shadcn@latest add https://www.affectui.com/r/tab-overload.json` | | [Team Invite](https://www.affectui.com/illustrations/team-invite) | Connected teammates – a cursor drags a new one into the empty slot, the line turns solid and they go online | `npx shadcn@latest add https://www.affectui.com/r/team-invite.json` | ## Motion | Name | What it is | Install | | --- | --- | --- | | [Grid Background](https://www.affectui.com/motion/grid-background) | A fine line grid that drifts slowly behind your content and fades out towards the edges | `npx shadcn@latest add https://www.affectui.com/r/grid-background.json` | | [Number Ticker](https://www.affectui.com/motion/number-ticker) | Odometer-style numbers – every digit rolls to its new value and counts in from zero when it scrolls into view | `npx shadcn@latest add https://www.affectui.com/r/number-ticker.json` | | [Shimmer Loader](https://www.affectui.com/motion/shimmer-loader) | Skeleton blocks that share one soft light sweep, plus shimmering text for “Thinking…” states | `npx shadcn@latest add https://www.affectui.com/r/shimmer-loader.json` | | [Text Reveal](https://www.affectui.com/motion/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 | `npx shadcn@latest add https://www.affectui.com/r/text-reveal.json` | ## affectUI Pro 132 more components, screens, blocks and illustrations, including the Command Menu, the Chat Composer, the KPI Chart, the Pricing Plans block and full app screens, are part of [affectUI Pro](https://www.affectui.com/pricing): a one-time purchase with lifetime updates. Their source is not in this repository. ## Contributing Found a bug or missing a component? [Open an issue](https://github.com/flohoeller/affectui/issues/new/choose). The files here are synced from the affectUI source on every release, so fixes land through issues rather than pull requests. See [CONTRIBUTING.md](./CONTRIBUTING.md). ## License Everything in this repository is released under the [MIT license](./LICENSE). Use it in personal and commercial projects. Logos shown in previews belong to their owners and are only sample content. ---

If affectUI saves you time, a ⭐ helps others find it. Made by [Flo](https://x.com/flohoeller)