Checkatrade Design System

A component library for building Checkatrade products. Built with React 19 and Tailwind CSS v4. Tokens and components stay aligned via @checkatrade/tokens and @checkatrade/components-web.

Guides

Introduction

Packages, consumption, and how to contribute.

Core

Colours

Semantic, brand, and ramp tokens from the package.

Typography

Headline, header, body, and label scales.

Spacing

Spacing and named scale steps.

Components

Button

Primary actions, secondary actions, and outline variants with loading and disabled states.