UiPath Design System

A comprehensive React design system featuring dark-themed UI components, layout templates, design tokens, and utilities for building UiPath-style applications.

Features

• 🎨 Design Tokens - Consistent colors, typography, and spacing
• 🧩 Components - Pre-built, accessible React components
• 📐 Layout Templates - Ready-to-use layout patterns
• 🎯 Utilities - Helper functions and theme management
• 📱 Responsive - Mobile-first design approach
• 🌙 Dark Theme - Modern dark UI with UiPath branding
• ♿ Accessible - WCAG 2.1 compliant components

Installation

npm install @uipath/design-system

Quick Start

Using Layout Templates

import { DashboardLayout, ThemeProvider } from '@uipath/design-system';

function App() {
  return (
    <ThemeProvider>
      <DashboardLayout headerTitle="My App">
        <div>Your content here</div>
      </DashboardLayout>
    </ThemeProvider>
  );
}

Using Individual Components

import { 
  GlobalHeader, 
  NavigationPanel, 
  Toolbar 
} from '@uipath/design-system';

function MyComponent() {
  return (
    <div>
      <GlobalHeader title="My App" />
      <NavigationPanel />
      <Toolbar />
    </div>
  );
}

Using Design Tokens

import { colors, typography, spacing } from '@uipath/design-system';

// In JavaScript
const buttonStyle = {
  backgroundColor: colors.primary.main,
  color: colors.text.primary,
  fontFamily: typography.fontFamily.primary,
  padding: spacing.componentSpacing.buttonPadding,
  borderRadius: spacing.borderRadius.base
};

Or use CSS custom properties:

.my-component {
  background-color: var(--color-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  padding: var(--space-4);
  border-radius: var(--radius-base);
}

Components

Layout Components

• DashboardLayout - Full dashboard with header and navigation
• CanvasLayout - Infinite canvas layout with autopilot
• FormLayout - Centered form layout
• ListLayout - List/table-focused layout

UI Components

• GlobalHeader - Application header with branding
• NavigationPanel - Collapsible navigation sidebar
• Toolbar - Floating toolbar with tools
• AutopilotPanel - AI assistant sidebar
• BreadcrumbNavigation - Hierarchical navigation
• Modal - Full-screen modal dialogs
• InfiniteCanvasLayout - Specialized canvas layout

Design Tokens

Colors

import { colors } from '@uipath/design-system';

colors.primary.main        // #FF724C
colors.accent.cyan         // #85E9FF
colors.neutral.gray900     // #222222
colors.text.primary        // #F8F9FA
colors.background.card     // rgba(255, 255, 255, 0.05)

Typography

import { typography } from '@uipath/design-system';

typography.fontFamily.primary    // 'Noto Sans', sans-serif
typography.fontFamily.heading    // 'Poppins', sans-serif
typography.fontSize.base         // 14px
typography.textStyles.h1         // Complete heading style object

Spacing

import { spacing } from '@uipath/design-system';

spacing.spacing[4]                    // 16px
spacing.componentSpacing.cardPadding  // 24px
spacing.borderRadius.base             // 8px
spacing.shadows.card                  // Component shadow

Creating New Projects

Use the CLI tool to quickly scaffold new projects:

npx create-uipath-app my-new-app

# Or specify a template
npx create-uipath-app my-dashboard --template dashboard

Available templates:

• dashboard - Full dashboard application
• canvas - Infinite canvas application
• form - Form-focused application
• list - List/table application
• basic - Minimal setup

Customization

Custom Theme

import { ThemeProvider } from '@uipath/design-system';

const customTheme = {
  colors: {
    primary: {
      main: '#FF6B35' // Custom primary color
    }
  }
};

function App() {
  return (
    <ThemeProvider customTheme={customTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

CSS Custom Properties

The design system automatically injects CSS custom properties. You can override them:

:root {
  --color-primary: #your-color;
  --font-family-primary: 'Your Font', sans-serif;
}

Responsive Design

All components and layouts are mobile-first and responsive:

/* Breakpoints */
@media (max-width: 480px)  { /* Mobile */ }
@media (max-width: 768px)  { /* Tablet */ }
@media (max-width: 1200px) { /* Desktop */ }

Development

Building the Package

npm run build

Storybook Development

npm run storybook

Watch Mode

npm run dev

API Reference

Layout Templates

DashboardLayout

<DashboardLayout
  showNavigation={true}
  navigationWidth="258px"
  headerTitle="UiPath Studio"
  className=""
>
  {children}
</DashboardLayout>

CanvasLayout

<CanvasLayout
  showAutopilot={true}
  breadcrumbItems={[]}
  headerTitle="UiPath Studio"
  className=""
>
  {children}
</CanvasLayout>

FormLayout

<FormLayout
  title="Form Title"
  description="Form description"
  headerTitle="UiPath Studio"
  maxWidth="800px"
  className=""
>
  {children}
</FormLayout>

ListLayout

<ListLayout
  title="List Title"
  description="List description"
  actions={<>Action buttons</>}
  showSearch={true}
  headerTitle="UiPath Studio"
  className=""
>
  {children}
</ListLayout>

Utilities

classNames (cn)

import { cn } from '@uipath/design-system';

const className = cn(
  'base-class',
  {
    'conditional-class': condition,
    'another-class': anotherCondition
  },
  'always-applied'
);

useTheme

import { useTheme } from '@uipath/design-system';

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{ color: theme.colors.primary.main }}>
      Themed content
    </div>
  );
}

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and documentation
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

• Documentation
• GitHub Issues
• Design System Guidelines