Apollo v.4 Design System

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

Table of Contents

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

✨ Features

• 🎨 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

📦 Package Dependency Graph

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

    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
    style Icons fill:#4c1d95,stroke:#a78bfa,stroke-width:3px,color:#fff

📁 Repository Structure

apollo-ui/
├── packages/              # Core + framework packages
│   ├── apollo-core/       # 🎨 Design tokens, fonts
│   ├── apollo-ui-icons/   # 🖼️ SVG icon set
│   ├── apollo-react/      # ⚛️ Canvas components, chat, icons, MUI theme
│   ├── apollo-vertex/     # 🌟 Vertex shadcn registry components (private)
│   └── apollo-wind/       # 🎐 Tailwind + shadcn/ui
│
├── web-packages/          # Cross-framework web components
│   └── ap-chat/           # 💬 Chat web component
│
└── apps/                  # Demo & development applications
    ├── apollo-vertex/     # 🌟 Vertex documentation site and registry
    └── storybook/         # 📚 Component documentation

📥 Installation

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

For External Users (npm - Recommended)

No special configuration needed. Just install packages directly:

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

For Internal UiPath Users (GitHub Package Registry)

If you have .npmrc configured with:

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

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

Testing PR Previews

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.

---

📦 Packages

Core Foundation

Package	Version	Downloads
@uipath/apollo-core
@uipath/apollo-ui-icons

• apollo-core: design tokens and fonts. Framework-agnostic foundation for the design system.
• apollo-ui-icons: 1300+ SVG icons. @uipath/apollo-core/icons still re-exports these but is deprecated.

---

Framework Implementations

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)

---

Web Components

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.

---

🎨 Live Demos

Explore our components in interactive Storybook environments. The sites are hosted as UiPath Coded Apps on the staging environment:

• Apollo Vertex - Complete design system showcase
• Apollo Docs - Central documentation site
• Canvas Components - Tailwind CSS components & Workflow and canvas demos
• Landing - Apollo landing page
• React Playground - Material UI components, design tokens, CSS vars, icons, and chat component

📚 Documentation

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

🚀 Contributing

Prerequisites

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

Setup

# 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:dev

Development Commands

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

Component Guidelines

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.

License

MIT © UiPath