@deriv-web-design/ui

React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.

Installation

npm install @deriv-web-design/ui

Setup

Import styles and tokens once in your app entry file (e.g. main.tsx):

import "@deriv-web-design/ui/styles.css";
import "@deriv-web-design/ui/tokens.css";

Usage

import { Button, TextField, Chip, Tag } from "@deriv-web-design/ui";

export default function App() {
  return (
    <div>
      <Button variant="primary">Submit</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="danger">Delete</Button>

      <TextField label="Email" placeholder="[email protected]" />
      <TextField label="Password" type="password" helperText="Min 8 characters" />

      <Chip label="Active" selected />
      <Tag label="New" />
    </div>
  );
}

Components

| Component | Description | | -------------- | --------------------------------------------------------- | | Button | Primary, secondary, ghost, and danger variants | | Accordion | Expandable/collapsible content sections | | Breadcrumb | Navigation breadcrumb trail | | Chip | Compact selection or filter element with selected state | | ChipDropdown | Chip that opens a dropdown list for selection | | Link | Styled anchor — coral, black, and white schemes | | Pagination | Page navigation with previous/next and numbered pages | | SearchField | Text input with built-in search icon | | Tag | Fill or outline label for status and categories | | TextField | Text input with label, helper text, and validation states | | Card | Content card container |

Design Tokens

All components use Deriv semantic tokens. Tokens are included in tokens.css and cover:

• Colors — core palette (slate, coral, emerald, yellow, blue) + semantic tokens per component
• Spacing — 8-point scale from --spacing-2 (2px) to --spacing-112 (112px)
• Typography — Inter font, sizes xs–5xl, responsive at tablet/desktop breakpoints
• Border Radius — --radius-xs through --radius-full
• Shadows — --shadow-xs through --shadow-xl

See @deriv-web-design/tokens for the full token reference.

TypeScript

Full TypeScript definitions are included — no @types package needed.

Requirements

• React 18 or 19
• Node.js 18+