Skip to content

README.md

Latest commit

 

History

History
218 lines (161 loc) · 9.3 KB

README.md

File metadata and controls

218 lines (161 loc) · 9.3 KB
Raw

Apollo v.4 Design System

License: MIT pnpm Turborepo

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

Table of Contents

✨ 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"]
    React -->|re-exports| IconsReact["@uipath/apollo-ui-icons-react<br/>React Icon Components"]
    IconsReact -->|generated from| Icons
    Wind -.->|bundles the icons it uses| IconsReact
    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
    style IconsReact fill:#4c1d95,stroke:#a78bfa,stroke-width:3px,color:#fff
Loading

📁 Repository Structure

apollo-ui/
├── packages/                  # Core + framework packages
│   ├── apollo-core/           # 🎨 Design tokens, fonts
│   ├── apollo-ui-icons/       # 🖼️ SVG icon set
│   ├── apollo-ui-icons-react/ # 🧩 React icon components
│   ├── 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/apollo-react@5.6.1-pr188.4865fad

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 npm downloads
@uipath/apollo-ui-icons npm downloads
@uipath/apollo-ui-icons-react npm downloads
  • 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.
  • apollo-ui-icons-react: the same icons as React components. @uipath/apollo-react/icons re-exports them.

Framework Implementations

Package Version Downloads
@uipath/apollo-react npm downloads
@uipath/apollo-wind npm downloads
  • 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 npm downloads

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:

📚 Documentation

🚀 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