# @cruk/chakra-components

> Chakra UI v2 based components for CRUK applications

Latest version **3.26.1** (published 2026-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cruk/chakra-components
pnpm add @cruk/chakra-components
yarn add @cruk/chakra-components
bun add @cruk/chakra-components
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.26.1 |
| Published | 2026-08-11 |
| First published | 2023-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | peteainsworth, dev-elliot, elliewintram, cruk-ui, eardenercruk, joncanceruk |

## Links

- npm: https://www.npmjs.com/package/@cruk/chakra-components
- Repository: https://github.com/CRUKorg/cruk-chakra-components
- Homepage: https://github.com/CRUKorg/cruk-chakra-components#readme
- Issues: https://github.com/CRUKorg/cruk-chakra-components/issues
- npm.io page: https://npm.io/package/@cruk/chakra-components

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^19.2.5
- [slugify](https://npm.io/package/slugify.md) ^1.6.9
- [react-dom](https://npm.io/package/react-dom.md) ^19.2.5
- [framer-motion](https://npm.io/package/framer-motion.md) ^12.38.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [react-dropzone](https://npm.io/package/react-dropzone.md) ^14.3.8
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.14.1
- [@chakra-ui/icons](https://npm.io/package/@chakra-ui/icons.md) ^2.2.4
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^2.10.9

## Recent versions

- 3.26.1 (latest) — 2026-08-11
- 4.0.0-dev.43 (dev) — 2026-07-30
- 4.0.0-compat.3 (compat) — 2026-07-22
- 1.0.6-alpha.0 (alpha) — 2025-02-10
- 3.26.0 — 2026-08-06
- 4.0.0-dev.42 — 2026-07-28
- 4.0.0-compat.2 — 2026-07-17
- 4.0.0-compat.1 — 2026-07-17
- 3.25.1 — 2026-07-14
- 3.25.0 — 2026-07-07
- 4.0.0-dev.41 — 2026-06-17
- 3.24.1 — 2026-06-09
- 3.24.0 — 2026-06-04
- 4.0.0-dev.40 — 2026-06-03
- 3.23.0 — 2026-05-18
- … 127 more at https://npm.io/package/@cruk/chakra-components/versions

## README

![Logo](.github/assets/logo.png)

# CRUK Chakra Components 🎨

A [Chakra UI v2](https://v2.chakra-ui.com/docs/) based component library that provides styled components following the [Cancer Research UK Helix design system](https://zeroheight.com/721bd94bd/p/074a6c-helix-design-system---cancer-research-uk) 🧬

[![NPM Version](https://img.shields.io/npm/v/@cruk/chakra-components)](https://www.npmjs.com/package/@cruk/chakra-components)

## 📚 Quick Links & Documentation

- [Component Documentation (Storybook)](https://helix-components.cms.app.crnet.org)
- [Full Documentation (Style guide, Theming, Testing and more)](https://super-succotash-wg8qmo1.pages.github.io/)

## Using the Library

### Quick Start

Depending on your project, you might install the library in the project root directory, or in `client`:

```bash
# Install the package
npm install @cruk/chakra-components

# Install peer dependencies (if you don't already have them)
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

**NOTE:** Not all projects use `npm` as their package managers, use whichever is appropriate for your project.

The package publishes both ES module and CommonJS builds, so consumers can use either `import` or `require`.

### Basic Setup

Once added to the project, you can use the `ChakraBaseProvider` to wrap your application and provide styled based on the `crukBrand` theme.

```typescript
import type { AppProps } from "next/app";
import { ChakraBaseProvider, crukBrand } from "@cruk/chakra-components";

const App = ({ Component, pageProps }: AppProps) => (
  <ChakraBaseProvider theme={crukBrand}>
    <Component {...pageProps} />
  </ChakraBaseProvider>
);

export default App;
```

- 📖 [Styling documentation](https://super-succotash-wg8qmo1.pages.github.io/styling)
- 📖 [Theming documentation](https://super-succotash-wg8qmo1.pages.github.io/theming)

## Contributing 🛠️

### Development Setup

After cloning the repository, install the dependencies:

```bash
# Clone and setup
git clone https://github.com/CRUKorg/cruk-chakra-components
cd cruk-chakra-components
npm ci

# Start Storybook
npm run storybook
```

### Quick Test

```bash
npm run test     # Unit tests
npm run test-ct  # Component tests
```

## Deployment and Releases 🚀

### Release Process

This library uses [semantic-release](https://github.com/semantic-release/semantic-release) with **GitHub PR labels** to automate versioning and package publishing.

#### Branch Strategy

- `dev` branch: Configured as a prerelease branch with the `dev` prerelease tag
- `main` branch: Configured as a regular release branch

#### Release Requirements

**Important:** Only pull requests with the `release` label will trigger a release. The version type is determined by additional labels.

#### Creating a Release

1. **Create your pull request and add labels:**

   **Required label:**
   - `release` - Must be present to trigger any release

   **Version labels (choose one):**
   - `breaking` or `major` - Major release (v1.0.0 → v2.0.0)
   - `minor` - Minor release (v1.0.0 → v1.1.0)
   - `patch` - Patch release (v1.0.0 → v1.0.1)

   **Optional label:**
   - `force` - Forces a release even when semantic-release detects no changes

   If only the `release` label is present, it defaults to a patch release.

2. **For main branch releases: Obtain ServiceNow approval**

   **Important:** All releases to the `main` branch require an approved ServiceNow change request before merging. This is mandatory for production deployments.

3. **Merge your PR** to the appropriate branch:

   **Important:** When merging, do NOT modify the merge commit message. The PR label analyzer requires the default message format "Merge pull request #XXX from..." to extract the PR number. Changing this message will prevent the release from being triggered.
   - Merge to `dev` for prerelease versions (no ServiceNow required)
   - Merge to `main` for standard releases (ServiceNow approval required)

4. The semantic-release system will automatically:
   - Read the PR labels
   - Determine the appropriate version bump
   - Generate release notes
   - Publish to npm
   - Create a GitHub release

#### Examples

✅ **Will trigger a minor release:**

- Labels: `release`, `minor`

✅ **Will trigger a patch release:**

- Labels: `release`, `patch`
- Labels: `release` (defaults to patch)

✅ **Will trigger a major release:**

- Labels: `release`, `breaking`

✅ **Will force a release (even with no detected changes):**

- Labels: `release`, `force`, `minor`
- Labels: `release`, `force`, `patch`

❌ **Will NOT trigger any release:**

- No `release` label present

#### Manual Release

If needed, you can manually trigger a release:

```bash
npm run release
```

## Resources 📖

- [Component Examples (Storybook)](https://helix-components.cms.app.crnet.org)
- [Full Documentation (Style guide, Theming, Testing and more)](https://super-succotash-wg8qmo1.pages.github.io/)
- [Need help? Message us on Slack](https://cruk.slack.com/archives/C07BNR9FY4E)
- [svg to chakra component converter](https://codesandbox.io/p/sandbox/convert-svg-to-chakra-icon-ztgt5m)- converts svgs into format needed for tsx files in `static/icons`

## 📄 Licence

MIT © Cancer Research UK

---
_Source: https://npm.io/package/@cruk/chakra-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._