@zurich/css-components

About

@zurich/css-components provides CSS-only component styles with optional React and Vue helper components for the Zurich Design System (ZDS). Use this package when you want lightweight, CSS-based styling without the overhead of Web Components.

Features

• CSS-only styling: Use custom HTML attributes for component styling
• React components: Pre-built React components with full TypeScript support
• Vue components: Pre-built Vue 3 components
• Standalone mode: No external CDN required (v0.8.0+)
• Lightweight: Smaller bundle than web-components for simpler use cases

Installation

npm install @zurich/css-components

Usage

HTML (CSS-only with attributes)

<!-- Use z-* attributes for styling -->
<button z-button>Click me</button>
<button z-button="secondary">Secondary</button>
<span z-badge="info">New</span>

React

import { ReactButton, ReactBadge, ReactCard } from '@zurich/css-components/react';

function App() {
  return (
    <ReactCard header="Welcome">
      <ReactButton onClick={() => alert('Clicked!')}>Click me</ReactButton>
      <ReactBadge config="info">New</ReactBadge>
    </ReactCard>
  );
}

Vue

<script setup>
import { VueButton, VueBadge, VueCard } from '@zurich/css-components/vue';
</script>

<template>
  <VueCard header="Welcome">
    <VueButton @click="handleClick">Click me</VueButton>
    <VueBadge config="info">New</VueBadge>
  </VueCard>
</template>

Available Components

Components available as CSS classes and React/Vue components:

• Atoms: Button, Badge, Tag, Icon, Link, Image, Loader, etc.
• Inputs: TextInput, Checkbox, Switch, Rating, NumberInput, etc.
• Molecules: Card, Alert, Avatar, Tooltip, Breadcrumbs, etc.
• Layouts: Accordion, Tabs, Table, Modal, Sidebar, etc.
• Data: Charts (Bar, Line, Pie, Donut, etc.), KPI displays

React components use the React prefix (e.g., ReactButton). Vue components use the Vue prefix (e.g., VueButton).

ZDS Ecosystem

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

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

License

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