Skip to main content

​
Component Library Overview

The Proton WebClients component library provides a comprehensive set of reusable UI components for building consistent, accessible web applications across the Proton ecosystem.

​
Architecture

The component library is located in packages/components/ and includes:
  • Components: Core UI components in components/
  • Containers: Higher-level composed components in containers/
  • Hooks: Reusable React hooks in hooks/
  • Helpers: Utility functions in helpers/

​
Key Features

​
TypeScript Support

All components are written in TypeScript with full type definitions, providing excellent developer experience with autocompletion and type safety.

​
Accessibility

Components follow WAI-ARIA guidelines and include:
  • Proper ARIA attributes
  • Keyboard navigation support
  • Screen reader compatibility
  • Focus management

​
Theming

Components use CSS custom properties and utility classes for consistent theming across the Proton design system.

​
Responsive Design

Components are built with responsive design in mind, adapting to different screen sizes and devices.

​
Component Categories

​
Basic Components

  • Buttons - Various button types and button groups
  • Inputs - Form inputs, checkboxes, radio buttons
  • Forms - Form components and validation

​
Complex Components

  • Modals - Dialog and modal windows
  • Dropdowns - Dropdown menus and selects
  • Tables - Data tables with sorting

​
Layout Components

​
Specialized Components

  • Calendar - Calendar-specific components
  • Mail - Mail-specific components
  • Editor - Rich text editor

​
Installation

The component library is installed as part of the Proton WebClients monorepo: 
npm install

​
Usage

Import components from the components package: 
import { Button } from '@proton/components';
import Input from '@proton/components/components/input/Input';
import Modal from '@proton/components/components/modalTwo/Modal';

​
Best Practices

​
Component Selection

  • Use newer “Two” variants when available (e.g., ModalTwo, SelectTwo)
  • Check deprecation notices in component files
  • Prefer components from @proton/atoms for basic elements

​
Styling

  • Use utility classes for spacing and layout
  • Use clsx for conditional class names
  • Avoid inline styles when possible

​
Performance

  • Use React.memo() for expensive components
  • Implement proper key props for lists
  • Avoid unnecessary re-renders

​
Development

​
Testing

Components include Jest tests: 
npm test

​
Linting

Code is linted with ESLint: 
npm run lint

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us