# @cerberus-design/react

> The Cerberus Design React component library.

Latest version **1.8.0** (published 2026-08-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cerberus-design/react
pnpm add @cerberus-design/react
yarn add @cerberus-design/react
bun add @cerberus-design/react
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.8.0 |
| Published | 2026-08-18 |
| First published | 2024-05-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 34 |
| Author | developers@omnifederal.com |
| Maintainers | bahull, caseybaggz-og, leighton-tidwell, pcleveland |
| Keywords | css, design-system, digital university, du design system, omni-federal, panda-css, panda-css react, react, ui, ui library |

## Links

- npm: https://www.npmjs.com/package/@cerberus-design/react
- Repository: https://github.com/omnifed/cerberus
- npm.io page: https://npm.io/package/@cerberus-design/react

## Dependencies (2)

- [@ark-ui/react](https://npm.io/package/@ark-ui/react.md) ^5.37.2
- [@carbon/icons-react](https://npm.io/package/@carbon/icons-react.md) ^11.85.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.8.0 (latest) — 2026-08-18
- 1.8.1-next.1788975568936.a846890 (next) — 2026-09-09
- 1.8.1-next.1788900796351.cfdcc0b — 2026-09-08
- 1.8.1-next.1788533416455.f117dd1 — 2026-09-04
- 1.8.1-next.1788471739664.f3e80f5 — 2026-09-03
- 1.8.1-next.1788455828500.1a2fa37 — 2026-09-03
- 1.8.1-next.1788292801171.56c234a — 2026-09-01
- 1.8.1-next.1788274897367.1a26f05 — 2026-09-01
- 1.8.1-next.1788205895419.6d85e2b — 2026-08-31
- 1.8.1-next.1788196832413.4d2af73 — 2026-08-31
- 1.8.1-next.1787328771932.4470fe2 — 2026-08-21
- 1.8.1-next.1787254537493.770f2d8 — 2026-08-20
- 1.8.0-next.1787069949618.79aede8 — 2026-08-18
- 1.7.1 — 2026-08-18
- 1.7.1-next.1787067958575.53c8530 — 2026-08-18
- … 508 more at https://npm.io/package/@cerberus-design/react/versions

## README

# Cerberus React

This is the React component library for the Cerberus Design System.

## Installation

```bash
pnpm add @cerberus/react
```

## Usage

```typescript
import { Button } from '@cerberus/react'

function BasicExample() {
  return (
    <form>
      <Button type="submit">Submit</Button>
    </form>
  )
}
```

### Basic Customization

```typescript
import { Button } from '@cerberus/react'

function BasicExample() {
  return (
    <form>
      <Button palette="danger" usage="outline" type="button">Cancel</Button>
    </form>
  )
}
```

### Advanced Customization

You can use [Panda-CSS](https://panda-css.com/) to customize the styles of the components.

```typescript
import { Button } from '@cerberus/react'
import { css } from '../styled-system/css'

function CustomButton() {
  return (
    <Button
      className={css({
          backgroundColor: 'yellow',
          color: 'black',
          borderRadius: '0.5rem',
          '&:hover': {
            backgroundColor: 'black',
            color: 'yellow'
          },
        })}
    >
      Wu-Tang Forever
    </Button>
  )
}
```

---

_Copyright (c) 2024 Digital University, All Rights Reserved_

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