@zurich/web-components

About

@zurich/web-components provides a collection of reusable Web Components built with Lit for the Zurich Design System (ZDS). These components work with any JavaScript framework or vanilla HTML/CSS.

Features

• Framework agnostic: Works with React, Vue, Angular, or plain HTML
• Standalone mode: No external CDN required - all assets embedded (v0.8.0+)
• TypeScript support: Full type definitions included
• Accessible: Built with accessibility in mind
• Themeable: Supports light and dark themes

Installation

npm install @zurich/web-components

Available Components

The package includes 100+ components organized into categories:

• Atoms: Button, Icon, Badge, Tag, Shape, Image, Loader, etc.
• Inputs: TextInput, Select, Checkbox, Switch, DateInput, NumberInput, etc.
• Molecules: Card, Alert, Modal, Tooltip, Avatar, Breadcrumbs, etc.
• Layouts: Accordion, Tabs, Table, Carousel, Sidebar, etc.
• Data: Charts (Bar, Line, Pie, Donut, etc.), KPI displays
• Organisms: Navigation, Footer, CookiesConsent, etc.

All React wrappers use the Zr prefix (e.g., ZrButton, ZrTextInput).

ZDS Ecosystem

This package is part of the Zurich Design System (ZDS) NPM packages:

• @zurich/design-tokens - Design tokens, CSS variables, icons, and fonts
• @zurich/css-components - CSS-only component styles with React/Vue helpers
• @zurich/web-components - Web Components (Lit-based)
• @zurich/angular-components - Angular component wrappers
• @zurich/dev-utils - Development utilities and tooling

License

Made with 💙 by Pablo Pérez Chueca and Traian Constantin Dida for Zurich Insurance Company.