#What is affectUI?

affectUI is a modern React component library built for developers creating AI-powered applications, SaaS dashboards, and interactive web interfaces. It provides 74 reusable components covering AI agent workflows, chat experiences, input controls, data visualization, navigation, and feedback. With customizable styling, animated interactions, and shadcn CLI support, affectUI helps developers build polished product interfaces without designing every component from scratch.

#Features ⚡

• AI Agent Components: Visualize agent workflows, execution steps, task queues, approvals, and monitoring.

• AI Chat Interfaces: Build interactive chat experiences with prompt composers, model selectors, and streaming answers.

• Animated UI Elements: Smooth transitions, loading states, interactive cards, and visual feedback.

• Data Visualization: KPI charts, breakdown charts, editable tables, and usage meters.

• Customizable Themes: CSS-variable-based styling with dark mode support.

• Developer-Friendly Installation: Add components through the shadcn CLI or copy source files directly.

• Accessibility: Keyboard interactions, focus handling, and reduced-motion considerations.

• AI Development Support: MCP server, documentation, and AI-friendly component discovery.

#Pro and cons

Pro ✅:

• Specialized components for AI and agent-based applications.

• Modern interactive designs with polished animations.

• Reusable React components that save development time.

• Source-code access and customization.

• Free components available without registration.

• One-time premium pricing with lifetime updates.

Cons ⚠️:

• Primarily focused on React development.

• Some components require a paid license.

• Advanced interactions may need additional application logic.

• AI-specific components may be unnecessary for basic websites.

• Customizing complex animations can require React experience.

#Included Components/Templates

affectUI provides 74 React components across eight main categories.

• AI Agent Components: Agent Graph, Agent Monitor, Agent Queue, Agent Fleet, Agent Tree, Agent Inbox, Agent Plan, and Agent Handoff.

• AI Chat Components: Chat Composer, AI Answer, Cited Answer, Model Picker, Thinking State, and Writing Assistant.

• Input Components: Combobox, OTP Input, Date Range Picker, Dropzone, and Stepper Form.

• Data Display Components: Data Table, KPI Chart, Breakdown Chart, Usage Meter, and Change Summary.

• Navigation Components: Command Menu, Profile Menu, and Segmented Control.

• Feedback Components: Toaster, Notification Stack, Thinking Loader, and Progress Tracker.

• Card Components: Project Card, Experiment Card, Approval Card, and Smart Recommendation.

• Button Components: Customizable buttons with multiple variants, sizes, icons, and loading states.

#Pricing 💸

affectUI follows a freemium model with one-time premium purchases.

#Integrations 🧰

• React: Primary framework for building component-based applications.

• shadcn CLI: Install components directly into projects.

• CSS Variables: Customize colors and themes.

• MCP: AI-assisted component discovery and development.

• AI Coding Assistants: Integration guidance through MCP, prompts, and llms.txt.

• JavaScript Ecosystem: Suitable for React-based AI products and SaaS interfaces.