Skip to content
Zurich Design System
Main Navigation
Release notes
Glossary

Learn to use it

Basic concepts
How it works

Packages

@zurich/dev-utils
@zurich/design-tokens
@zurich/css-components
@zurich/web-components
@zurich/angular-components
@zurich/react-native

Integrations

CSS
Web
React
Angular
Vue
Breakpoints

Primitive tokens

Spacers
Colors
Shadows
Typography

Layouts

Flex
Grid
Themes
Rebranding
Semantic tokens

Assets

Images
Icons
Pictograms

Media

Zurich Images
Accessibility
Localization

Atoms

Badge
Button
Chip
Currency
Date
Icon
Image
Link
Loader
Logo
Number
Pictogram
Profile
ProgressBar
SafeSpace
ScrollIndicator
Shape
Skeleton
SmilingZ
SocialMediaIcon
Tag
Time
Toast
Tooltip
ZurichImage

Inputs

BooleanIcon
Calendar
Checkbox
CheckboxGroup
CheckboxSelect
ChipsSet
DateInput
NumberInput
Pagination
PasswordInput
ProgressTracker
RadioSelect
Rating
SegmentedControl
Select
SelectionTag
Slider
Stepper
Switch
TextInput
Textarea
TimeInput
VerticalStepper

Layouts

Accordion
ActionMenu
ButtonGroup
Card
Carousel
Fieldset
Figure
FloatingBanner
Form
InputGroup
Modal
Sidebar
Table
Tabs

Molecules

ActionCard
Alert
ArticleCard
Avatar
AvatarList
Breadcrumbs
EmptyState
Promo
Quote
Stage
StageBanner

Functionalities

Request
Resizer

Organisms

Footer
Navigation
Dashboard

Libraries

ZDS Components Library
ZDS Components Library V2
ZDS Data Library

Training

ZDS Training
ZDS Training tasks
0.5.22
0.5.1
0.5.2
0.5.3
0.5.4
0.5.5
0.5.6
0.5.7
0.5.8
0.5.9
0.5.10
0.5.11
0.5.12
0.5.13
0.5.14
0.5.15
0.5.16
0.5.17
0.5.18
0.5.19
0.5.20
0.5.21
0.5.22
0.4.5
0.3.10
⚙
Sidebar Navigation

Release notes

Resources

Glossary

Components status

Getting started

About

Introduction

Processes

How to start

Introduction

How it works

Basic concepts

Packages

Overview

@zurich/dev-utils

@zurich/design-tokens

@zurich/css-components

@zurich/web-components

@zurich/angular-components

@zurich/react-native

Integrations

CSS

Web

Angular

React

Vue

Next.js

Platforms

Sitecore

Salesforce

Mendix

Code examples

Welcome page

Log in

Landing page

Secondary page

Multi-step form

Support

FAQs

Foundations

Introduction

Breakpoints

Spacers

Colors

Intro

Palettes

Shadows

Typography

Intro

Text styles

Layouts

Flex

Grid

Assets

Icons

Pictograms

Images

Themes

Index

Rebranding

Semantic tokens

Zurich media

Images

Accessibility

Intro

Localization

Atoms

Introduction

Badge 🧪

Web Component

CSS Component

Figma

Button 🧪

Web Component

CSS Component

Figma

Chip 🧪📱

Web Component

CSS Component

Currency 🧪📱

Web Component

Date 🧪📱

Web Component

Icon 🧪📱

Web Component

CSS Component

Figma

Image 🧪

Web Component

CSS Component

Figma

Link 🧪

Web Component

CSS Component

Loader 🧪

Web Component

CSS Component

Figma

Logo 🧪📱

Web Component

CSS Component

Figma

Number 🧪📱

Web Component

Pictogram 🧪📱

Web Component

CSS Component

Figma

Profile 🧪

Web Component

CSS Component

ProgressBar 🧪

Web Component

CSS Component

Figma

SafeSpace 🧪📱

Web Component

CSS Component

Figma

ScrollIndicator 🧪

Web Component

Shape 🪲📱

Web Component

CSS Component

Figma

Skeleton 🧪

Web Component

CSS Component

SmilingZ 🧪📱

Web Component

CSS Component

Figma

SocialMediaIcon 🧪

Web Component

CSS Component

Tag 🧪📱

Web Component

CSS Component

Figma

Time 🧪📱

Web Component

Toast 🧪

Web Component

CSS Component

Figma

Tooltip 🧪

Web Component

CSS Component

Figma

ZurichImage 🧪

Web Component

Inputs

Introduction

CSS inputs

Web inputs

BooleanIcon 🧪

Web Component

CSS Component

Calendar 🧪

Web Component

Figma

Checkbox 🧪

Web Component

CSS Component

Figma

CheckboxGroup 🧪

Web Component

CheckboxSelect 🧪

Web Component

ChipsSet 🧪

Web Component

DateInput 🧪

Web Component

CSS Component

NumberInput 🧪

Web Component

CSS Component

Pagination 🧪

Web Component

Figma

PasswordInput 🧪

Web Component

CSS Component

ProgressTracker 🧪

Web Component

Figma

RadioSelect 🧪

Web Component

CSS Component

Figma

Rating 🧪

Web Component

CSS Component

SegmentedControl 🧪

Web Component

CSS Component

Figma

Select 🧪

Web Component

SelectionTag 🧪

Web Component

CSS Component

Figma

Slider 🧪

Web Component

Figma

Stepper 🧪

Web Component

Figma

Switch 🧪

Web Component

CSS Component

Figma

TextInput 🧪

Web Component

CSS Component

Figma

Textarea 🧪

Web Component

CSS Component

Figma

TimeInput 🧪

Web Component

CSS Component

VerticalStepper 🧪

Web Component

Figma

Layouts

Introduction

Accordion 🧪

Web Component

CSS Component

Figma

ActionMenu 🧪

Web Component

CSS Component

Figma

ButtonGroup 🧪

Web Component

CSS Component

Figma

Card 🧪

Web Component

CSS Component

Figma

Carousel 🧪

Web Component

Figma

Fieldset 🧪

Web Component

CSS Component

Figure 🧪

Web Component

CSS Component

FloatingBanner 🧪

Web Component

CSS Component

Figma

Form 🧪

Web Component

CSS Component

InputGroup 🧪

Web Component

CSS Component

Figma

Modal 🧪

Web Component

CSS Component

Figma

Sidebar 🧪

Web Component

CSS Component

Figma

Table ⛔

Web Component

CSS Component

Figma

Tabs 🧪

Web Component

CSS Component

Figma

Molecules

Introduction

ActionCard 🧪

Web Component

CSS Component

Figma

Alert 🧪

Web Component

CSS Component

Figma

ArticleCard 🧪

Web Component

CSS Component

Figma

Avatar 🪲

Web Component

CSS Component

Figma

AvatarList 🧪

Web Component

CSS Component

Figma

Breadcrumbs 🧪

Web Component

CSS Component

Figma

EmptyState 🧪

Web Component

CSS Component

Figma

Promo 🧪

Web Component

CSS Component

Figma

Quote 🧪

Web Component

CSS Component

Figma

Stage 🧪

Web Component

CSS Component

Figma

StageBanner 🧪

Web Component

CSS Component

Figma

Functionalities

Introduction

Request 🧪

Web Component

Resizer 🧪

Web Component

Organisms

Introduction

Footer 🧪

Web Component

CSS Component

Figma

Navigation 🧪

Web Component

CSS Component

Figma

Figma plugin

Introduction

Development

Introduction

Documentation

Figma

Dev utils

Overview

Helpers

VS Code

Troubleshooting

Index

Last updated:

Pager
Next pageRelease notes