What is Apollo?

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

Live Demos

Explore components in interactive environments:

Demo	Description
Apollo Core	Design system built with Material UI
Apollo Wind	Design system built with shadcn/Tailwind
Apollo React	Workflow and canvas-specific component demos
Apollo Vertex	Complete design system showcase and component registry

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


apollo-core  (Design Tokens, Icons, Fonts)
     ↑
     ├── apollo-react  (React + Material UI)
     │        ↑
     │    ap-chat  (Chat Web Component)
     │
     └── apollo-wind  (Tailwind + shadcn/ui)

apollo-core is the foundation — all other packages depend on it
apollo-react and apollo-wind each build on core independently
ap-chat is built on top of apollo-react

Repository Structure


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 components
│
├── web-packages/              # Cross-framework web components
│   └── ap-chat/               # Chat web component
│
└── apps/                      # Demo & development applications
    ├── apollo-docs/           # Central documentation site (this site)
    ├── apollo-vertex/         # Component registry & reference app
    ├── storybook/             # Component documentation
    └── react-playground/      # React testing environment

Packages

`@uipath/apollo-core`

Design tokens, 1300+ icons, and fonts. The framework-agnostic foundation for the entire design system. Both apollo-react and apollo-wind depend on this package.

`@uipath/apollo-react`

Canvas and workflow components, the ApChat component, icons, and Material UI themes. Built for workflow interfaces and automation products.

Material UI support in apollo-react is in maintenance mode. For new projects, apollo-wind is recommended.

`@uipath/apollo-wind`

Modern Tailwind CSS + shadcn/ui component library with 60+ components, page templates, and full theming support. Recommended for all new development.

`@uipath/ap-chat`

Framework-agnostic AI chat interface as a web component. Works with vanilla JS, Vue, Angular, or any framework.

React users should import ApChat directly from @uipath/apollo-react instead of this package.

Tooling

Tool	Purpose
Turborepo	Monorepo task orchestration and caching
pnpm	Package manager with workspace support
TypeScript	Type safety across all packages
Biome	Unified linter and formatter
Storybook	Component documentation and visual testing
Vitest	Unit testing
Playwright	Visual regression testing