Design-system Packages

CSS19 - React CSS tokens

CSS19 - React CSS system-ui

CSS19 - React CSS system-ui tokens

🖌️ A beautiful, customizable, and simple to use component library with Tailwind CSS for Nuxt.js

A controlled text input component for multi-line strings with validation states and a label.

A controlled input component for numbers with validation states and a label.

A controlled rich text input component for rich text with validation states.

A controlled search text input component for single-line strings with validation states.

Secondary Icon Buttons are "icon-only" buttons and a restricted version of the `<IconButton>`. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.

Tokens used in the Compassion Design System.

Compassion International's Global Design System

The Compassion Design System includes a streamlined set of React components for fast, accessible development of apps and static sites.

A RadioInput represents a group of options where only one option can be selected at a time.

A progress bar component used to visualize the progression of an extended operation

The `QuickFilters` component displays filter controls.

An inset spacing component provides a consistent padding to the inner component.

A controlled selectable search input component for single-line strings with validation states.

ViewSwitchers allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.

The foundation of cube: colors, typography, and shadows

Cube component styles