DocsBlog

  • 1.7.0

  • Day

    Night

    Preview

    Switch mode

  • Cerberus

    Acheron

    Elysium

    Oceanus

Release - July 29, 2026

Cerberus v1.7 Release

CBAuthor's profile picture

Casey Baggz

Cerberus Admin

This release provides new features to the Data Grid and introduces the Slider component.

Overview

Here is a brief overview of what's new:

  • React Features - New icons and fixes
  • Data Grid Features - Initial loading and column visibility
  • General Updates - High level improvements of the ecosystem as a whole

React Features

This release introduces a new Slider component.

Slider

A Slider component that allows you to select a value from a range of values. This is commonly used for selecting a value from a range of values, such as a volume or brightness setting.

There are a ton of features available on the Slider component so here we will just show off the sizes.


Learn more about the Slider component in the Slider docs.

Data Grid Features

We upgraded the server-side pagination experience in this release which includes both deprecations and enhancements.

Pagination

To use server-side pagination, you simply add the pagination prop to the Data Grid with a count property.

This will trigger the rendering switch which will opt-out of row virtualization and instead render all the rows based on the page size.

Note

A reminder that when using server-side pagination, you are opting out of automatic pagination control. This means you must manually handle pagination state and update the grid as needed.


View the Data Grid Pagination docs

Migration Guide

Migrating from the previous server-side pagination API is very simple:

  1. Add the pagination prop to the Data Grid with a count property.
  2. Move the initState.count prop to the pagination.count prop.
  3. Remove the initState prop from the Data Grid.
  4. Move the onPageChange prop to instead be defined at pagination.onPageChange prop.

Basically, both initState and onPageChange just move to the pagination prop.

These deprecations will be removed in version 1.9

General Updates

Along with the Slider and pagination improvements, this release also includes a number of other bugfixes and performance improvements.

  • Preset Fix: select.content shadow only displays as FOUC when you click and item in the list
  • Preset Fix: Oceanus gradient token update
  • Preset NEW: Add conditions: label,dragging
  • Preset NEW: update gradient utility to support none for compatible way to switch between gradient to bgColor
  • Figma SDK Fix: Update SDK to use throws and add additional import paths for code-splitting

Thanks!

This is another great release introducing some beneficial tools and overall improvements.

A special thanks to everyone who has helped validate the APIs, docs, and submitted features or bugfixes for this release.

There is no "I" in Cerber-"US"

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
Copy
Copy
'use client'

import { DataGrid, SortDirection } from '@cerberus/data-grid'
import { PageSizeChangeDetails, type PageDetails } from '@cerberus/react'
import { useQuery } from '@cerberus/signals'
import { useState, useTransition } from 'react'
import { Stack } from 'styled-system/jsx'
import { queryPaginatedEmployees } from '../api'
import { columns } from '../quick-start/columns.demo'

// Use native React state and transitions for updates to override Suspense.
// Transitions prevent harsh reloads of the Data Grid post-initial rendering.
// This is the only time you are required to use React state over Cerberus Signals.
// React transitions require React state to work.
function useDeferredValue() {
  const [current, setCurrent] = useState<PageDetails>({
    page: 1,
    pageSize: 25,
  })
  const [pending, startTransition] = useTransition()
  return {
    current,
    setCurrent,
    pending,
    startTransition,
  }
}

export function CountDemo() {
  const { current, setCurrent, pending, startTransition } = useDeferredValue()
  const data = useQuery(queryPaginatedEmployees(current))

  function handlePageChange(details: PageDetails) {
    console.log(details)
    startTransition(() => {
      setCurrent((prev) => ({ ...prev, ...details }))
    })
  }

  function handlePageSizeChange(details: PageSizeChangeDetails) {
    console.log(details)
  }

  function handleSortChange(colId: string, direction: SortDirection, multi?: boolean) {
    console.log({ colId, direction, multi })
  }

  return (
    <Stack direction="column" h="20rem" w="3/4">
      <DataGrid
        columns={columns}
        data={data.data}
        overlays={{
          initial: 'skeleton',
          pending: 'linear',
        }}
        pagination={{
          count: data.pagination.count,
          onPageChange: handlePageChange,
          onPageSizeChange: handlePageSizeChange,
          onSortChange: handleSortChange,
        }}
        pending={pending}
      />
    </Stack>
  )
}

import { Stack } from '@/styled-system/jsx'
import { For, Slider, SliderProps } from '@cerberus/react'
import recipesSpec from 'styled-system/specs/recipes.json'
import { getSacredNumber } from './utils'

const sizes = (recipesSpec.data.find((r) => r.name === 'slider')?.variants.size ??
  []) as SliderProps['size'][]

export function SizesDemo() {
  return (
    <Stack gap="md" w="3/4">
      <For each={sizes}>
        {(size, idx) => (
          <Slider key={String(size)} defaultValue={[getSacredNumber(idx)]} size={size}>
            <Slider.Label>Slider - {size} </Slider.Label>
          </Slider>
        )}
      </For>
    </Stack>
  )
}
1-25 of 1000
Rows per page:
25
50
100
1 of 40