DocsBlog

  • 1.0.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Release - November 2, 2026

Cerberus v1 Release

CBAuthor's profile picture

Casey Baggz

Cerberus Admin

This release adds new features, packages, and improvements to our entire ecosystem.

Overview

Welcome to Cerberus v1! This is a massive release and we have a lot to cover, so here is a brief overview of what's new:

  • Easy Installation - get started faster than ever
  • React Features - new primitive APIs and general updates
  • Panda Preset - recipe and condition updates
  • Data Grid - a new compositional component API

Easy Installation

When we first launched Cerberus, the goal was to provide a low-level API that would give complete control to our users. Since then, we've learned that most of the teams using Cerberus prefer a more opinionated approach that is more baked into the framework like a UI library.

Thus, we have simiplified the installation dramatically by adding Carbon Icons as the default icon library.

This means you no longer need to setup a custom config for the CerberusProvider unless you want to customize the icon set.

The result is a more streamlined installation experience that gets you up and running faster than ever before.

View the new installation guide for more details.

React Features

In this release, we have quite a few improvements and additions to our React library.

Let's start with a bang...

Breaking Changes

We have had some deprecated APIs hanging around for close to a year now. In this release, we have removed and/or replaced them with more modern APIs.

Changes

  • All APIs that were marked as deprecated have been removed
  • @dnd-kit has been removed as a dependency as a whole

This shouldn't affect anyone unless you have been ignoring the deprecation warnings for a very long time. 👀

Now let's get to the good stuff...

Group

Sometimes you want to group elements together in different ways. We've added the Group component to help with this.

From different orientations to gap options, we've got you covered. Here is an example of using it to attach elements together:


Checkout the Group documentation for more details.

Pagination

We've added a Pagination component to help streamline pagination in your app. Fully accessible and customizable, it provides the flexibility you need regardless of your chosen pagination strategy.

In this demo, we show how you can use the Pagination API to manage and slice your data efficiently.


Checkout the Pagination documentation for more details.

EnforceNoProperties type

Sometimes you need a type that should strictly enforce the usage of some properties and not others depending on the context. We do this often with our component APIs.

Thus, we have added a EnforceNoProperties type that allows you easily achieve this.

pinning?: (boolean & EnforceNoProperties<PinnedOptions>) | PinnedOptions

This type will convert the Record passed into it to have a values of never. The result is a more strict and reliable type environment.

Other Improvements

  • Fix: React build no longer leaks internal dependencies
  • Fix: React-related builds are overall smaller
  • Fix: Some menus and buttons no longer trigger random focus outlines
  • Fix: Button and Text autocomplete style props correctly
  • Feat: Expose MenuSelectionDetails type
  • Feat: Allow ReactNode descriptions for destructive Prompt modals

Panda Preset

Our core preset plugin got a little boost as well with a new button recipe and conditions.

New Button Variant

Buttons now include a outlined-subtle variant that provides a less prominent stroke style.


Checkout the Button documentation for more details.

New Conditions

Along with our new Data Grid API, we have added some new conditions to help with conditional styling:

ConditionValue
_pinned'&:is([data-pinned], [data-state=pinned])'
_leftPinned'&:is([data-pinned=left])'
_rightPinned'&:is([data-pinned=right])'

The Year of Cerberus

Cerberus has always aimed for the long-term goal of creating an entire platform of high performant components and tools that help streamline web development.

In our first year, we focused on the foundation: a plugin-based architecture that worked seamlessly with React components.

This year we are building on that foundation to create a landmark powerhouse that is more than just a collection of components.

We will achieve that by adding two more players in the ecosystem:

  • Compositional components: Fully-baked feature packed React components
  • Signals: An external Signal-based state management library for React

This release, introduces our first compositional component: The Data Grid

Data Grid

The Data Grid is a React component built to provide a drop-in solution for displaying data-heavy tables with features like filtering, sorting, pagination, and more. Our execution is inspired by the ideaology of MUI's DataGrid component with the performance enhancements of TanStack Table.


The concept is simple:

  1. Define your columns (and opt-in to features)
  2. Pass your columns and data to the grid

Supported Features:

  • Virtualization
  • Sorting (and multi-column sorting)
  • Pinning
  • Pagination
  • Access to state context
  • Custom Toolbars
  • Signal-driven state management for enhanced performance

Dependencies:

The Data Grid is a "pure" Cerberus component that only uses two dependencies:

  • Cerberus React
  • Cerberus Signals

Checkout the Data Grid documentation for more details.

Signals Early Preview

The Data Grid "soft launches" a new signal-based state management system for React. This is the state management that React should have had from the beginning and still doesn't provide.

We will dive deeper into signals in our next release when we launch it publicly.

If you are interested in an early preview of signals, you can install it today:

Terminal
Copy
npm install @cerberus/signals@npm:@cerberus-design/signals
Terminal
Copy
pnpm add @cerberus/signals@npm:@cerberus-design/signals
Terminal
Copy
deno add npm:@cerberus/signals@npm:@cerberus-design/signals
Terminal
Copy
bun add @cerberus/signals@npm:@cerberus-design/signals

Thanks!

This is a monumental release and one of the most significant updates to Cerberus since its inception.

A special thanks to everyone who has helped validate and shape the APIs and docs for this release.

Upgrading

To upgrade to this release, you can install the latest version of Cerberus React:

Terminal
Copy
npm run up:cerberus
Terminal
Copy
pnpm run up:cerberus
Terminal
Copy
deno run npm:up:cerberus
Terminal
Copy
bun run up:cerberus
Cerberus Design System
Copy
import { VStack } from 'styled-system/jsx'
import { Button, Group, Tag } from '@cerberus/react'

export function AttachedDemo() {
  return (
    <VStack gap="md" w="3/4">
      <Group layout="attached">
        <Button usage="outlined">Item 1</Button>
        <Button usage="outlined">Item 2</Button>
      </Group>

      <Group layout="attached">
        <Tag usage="filled">Commit status</Tag>
        <Tag usage="filled" palette="success">
          90+
        </Tag>
      </Group>
    </VStack>
  )
}
Copy
'use client'

import {
  Group,
  Pagination,
  Text,
  usePaginationContext,
} from '@cerberus/react'
import { HStack, VStack } from 'styled-system/jsx'
import { users } from './users'

export function SliceDemo() {
  return (
    <VStack textAlign="center" w="3/4">
      <Pagination count={users.length} pageSize={5}>
        <UserList />
      </Pagination>
    </VStack>
  )
}

function UserList() {
  const pagination = usePaginationContext()
  return (
    <Group orientation="vertical" pb="lg" w="full">
      {pagination.slice(users).map((user) => (
        <HStack
          key={user.id}
          bgColor="page.bg.100"
          gap="md"
          p="md"
          rounded="sm"
          w="full"
        >
          <Text color="page.text.initial" textStyle="body-md">
            {user.name}
          </Text>
          <Text as="small" color="page.text.100" textStyle="label-sm">
            {user.email}
          </Text>
        </HStack>
      ))}
    </Group>
  )
}
Copy
import { Button } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

export function UsageDemo() {
  return (
    <HStack>
      <Button usage="filled">Filled</Button>
      <Button usage="outlined">Outlined</Button>
      <Button usage="outlined-subtle">Outlined Subtle</Button>
      <Button usage="ghost">Ghost</Button>
    </HStack>
  )
}
Copy
'use client'

import { DataGrid } from '@cerberus/data-grid'
import { HStack } from 'styled-system/jsx'
import { columns } from './columns.demo'
import { useFakeQuery } from './data'

export function BasicDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = useFakeQuery(1000)

  return (
    <HStack h="20rem" w="3/4">
      <DataGrid columns={columns} data={data} />
    </HStack>
  )
}
Commit status90+

Emma Wilson

emma@example.com

Liam Johnson

liam@example.com

Olivia Brown

olivia@example.com

Noah Davis

noah@example.com

Ava Martinez

ava@example.com