Apollo v.4 is UiPath's open-source design system for building consistent user experiences across all UiPath products.

• ✨ Features
• 📦 Package Dependency Graph
• 📁 Repository Structure
• 📦 Packages
  • Core Foundation
  • Framework Implementations
  • Web Components
• 🎨 Live Demos
• 📚 Documentation
• 🚀 Contributing
• License

• 🎨 Design Tokens - 1300+ icons, comprehensive color system, typography, spacing
• ⚛️ React Components - Built on Material UI with Apollo theming
• 🎐 Tailwind CSS - Modern utility-first styling with shadcn/ui
• 🌐 Web Components - Cross-framework components for maximum flexibility
• 📘 TypeScript - Full type safety across all packages
• 📚 Storybook - Interactive component documentation
• 🚀 Monorepo - Efficient development with Turborepo and pnpm

graph RL
    React["@uipath/apollo-react<br/>React + Material UI"] -->|requires| Core["@uipath/apollo-core<br/>Design Tokens, Icons, Fonts"]
    Wind["@uipath/apollo-wind<br/>Tailwind + shadcn/ui"] -->|requires| Core
    React -->|requires| Wind
    Chat["@uipath/ap-chat<br/>Chat Web Component"] -->|requires| React

    style Core fill:#374151,stroke:#ef4444,stroke-width:3px,color:#fff
    style React fill:#1e3a8a,stroke:#3b82f6,stroke-width:3px,color:#fff
    style Wind fill:#164e63,stroke:#06b6d4,stroke-width:3px,color:#fff
    style Chat fill:#064e3b,stroke:#10b981,stroke-width:3px,color:#fff

apollo-ui/
├── packages/              # Core + framework packages
│   ├── apollo-core/       # 🎨 Design tokens, icons, fonts
│   ├── apollo-react/      # ⚛️ Canvas components, chat, icons, MUI theme
│   └── apollo-wind/       # 🎐 Tailwind + shadcn/ui
│
├── web-packages/          # Cross-framework web components
│   └── ap-chat/           # 💬 Chat web component
│
└── apps/                  # Demo & development applications
    ├── apollo-vertex/     # 🌟 Main Storybook hub
    ├── storybook/         # 📚 Component documentation
    └── react-playground/  # 🔬 React testing environment

All Apollo packages are published to both npm and GitHub Package Registry for maximum accessibility.

No special configuration needed. Just install packages directly:

npm install @uipath/apollo-react
# or
npm install @uipath/apollo-core @uipath/apollo-wind

If you have .npmrc configured with:

@uipath:registry=https://npm.pkg.github.com

Packages will automatically install from GitHub Package Registry. No changes needed!

To test a feature from an open PR before it's merged:

# Install latest PR preview
npm install @uipath/apollo-react@dev

# Or install specific PR version (from PR comment)
npm install @uipath/[email protected]

Preview versions are published when the dev-packages label is added to a PR. Remove the label to stop publishing on new commits. Packages are deprecated on npm and cleaned up from GitHub Package Registry after the PR is closed or merged.

Package	Version	Downloads
@uipath/apollo-core

Design tokens, 1300+ icons, and fonts. Framework-agnostic foundation for the design system.

Package	Version	Downloads
@uipath/apollo-react
@uipath/apollo-wind

• apollo-react: Canvas/workflow components, ApChat, icons, Material UI themes (Material UI in maintenance mode)
• apollo-wind: Modern Tailwind CSS + shadcn/ui components (recommended for new development)

Package	Version	Downloads
@uipath/ap-chat

Framework-agnostic AI chat interface web component for vanilla JS, Vue, Angular, etc.

Note: React users should import ApChat from @uipath/apollo-react instead.

Explore our components in interactive Storybook environments:

• Apollo Vertex - Complete design system showcase
• Canvas Components - Workflow and canvas demos
• React Playground - Material UI components, design tokens, CSS vars, icons, and chat component
• Wind Components - Tailwind CSS components

• @uipath/apollo-core - Design tokens, icons, fonts
• @uipath/apollo-react - React components and canvas
• @uipath/apollo-wind - Tailwind components
• @uipath/ap-chat - Chat web component
• Contributing Guide - How to contribute

• Node.js >= 22
• pnpm >= 10

# Clone and setup
git clone https://github.com/UiPath/apollo-ui.git
cd apollo-ui
pnpm install

# Build packages
pnpm build

# Run Storybook
pnpm storybook

pnpm dev              # Watch mode for all packages
pnpm build            # Build all packages
pnpm lint             # Lint all packages
pnpm test             # Run tests

When contributing components:

• ✅ Follow package naming conventions
• ✅ Use design tokens from @uipath/apollo-core
• ✅ Include TypeScript types
• ✅ Add Storybook stories
• ✅ Write unit tests
• ✅ Update package README

See CONTRIBUTING.md for detailed guidelines.

MIT © UiPath