@zurich/css-components

src="https://img.shields.io/npm/v/@zurich/css-components?style=for-the-badge&color=yellow&label=npm%20version&logo=npm"
alt="npm package"
>

 
 

src="https://img.shields.io/npm/dm/@zurich/css-components?style=for-the-badge&color=white&label=npm%20downloads&logo=npm"
alt="npm downloads"
>

Made for:

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.

$3

- 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

``bash
npm install @zurich/css-components
`

Usage

$3

`html

Click me
Secondary
New
`

$3

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

function App() {
return (

alert('Clicked!')}>Click me
New

);
}
`

$3

`vue



`

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.