@canonical/react-ds-global

Universal React components for the Pragma design system. This package provides foundational UI elements that apply across all Canonical web applications: buttons, badges, cards, tooltips, and more.

Prerequisites

• React 19 or higher

Installation

bun add @canonical/react-ds-global

The package depends on @canonical/styles for CSS.

Usage

Import components by name:

import { Button, Badge, Card, Tooltip } from "@canonical/react-ds-global";

function Example() {
  return (
    <Card>
      <Badge>New</Badge>
      <Tooltip content="Click to submit">
        <Button appearance="positive">Submit</Button>
      </Tooltip>
    </Card>
  );
}

Components accept standard HTML attributes for their underlying elements. A Button accepts all ButtonHTMLAttributes, a Link accepts all AnchorHTMLAttributes, and so on.

Modifier Families

Several components accept appearance props that correspond to modifier families from @canonical/ds-types:

<Button appearance="positive">Confirm</Button>
<Button appearance="negative">Delete</Button>
<Button appearance="caution">Proceed with caution</Button>

The modifier classes integrate with CSS custom properties defined in @canonical/styles.

Styles

Import the main styles package in your application entry point:

import "@canonical/styles";

Storybook

Each component includes Storybook stories demonstrating usage patterns and variants:

cd packages/react/ds-global
bun run storybook

Component Specifications

Component specifications are defined in the Design System Ontology.