DocsBlog

  • 1.3.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Release - August 25, 2025

Cerberus v0.21 Release

CBAuthor's profile picture

Casey Baggz

Cerberus Admin

We're excited to announce the release of Cerberus v0.21! This update brings powerful new components, improved styling capabilities, and several important fixes to make your development experience even smoother.

Our mission continues: make Cerberus easier to use, extend, and customize for every project.

New Components

NumberInput

Introducing the new NumberInput component, designed for seamless numeric input with built-in accessibility and customization. Easily control min/max values, step increments, and styling using the familiar Cerberus API.

PinInput

The new PinInput component makes it simple to build secure PIN or code entry forms. It supports custom lengths, masking, and full style customization.

import { PinInput, Field } from '@cerberus-design/react'
import { HStack } from 'styled-system/jsx'


export function

Notifications - Subtle Variant

Cerberus Notifications now support a “subtle” variant for less intrusive alerts. Use it for gentle feedback or status updates that blend into your UI.

Just add the -subtle suffix to the toast type.

import { toaster } from '@cerberus/react/toaster'


toaster.create({
  type: 'info-subtle',
  title: 'Update Available

Factory - Universal Style Props

All Cerberus components now inherit style props via the Factory system. This means you can use any CSS style property or the css prop on any component. Customizing appearance is now faster and more consistent across your app.

This applies to all Cerberus APIs (including factory components).

import { Button } from '@cerberus/react/button';


function CustomButtonPreview() {
  return (
    <Button
      bgColor="danger.bg.initial

Minor Updates & Fixes

  • DatePicker: Recipe fixes for trigger zIndex ensure popovers display correctly above other elements.
  • Input: Recipe now includes missing placeholder styles for a more consistent look.
  • AnimationStyle: JSX elements now render as expected, making it easier to add animations to your UI.

Upgrading

To upgrade to Cerberus v0.21.1, run:

What's Next?

We're focused on expanding the Cerberus ecosystem with more components, improved customization, and even better developer experience. Stay tuned for:

  • New components
  • Improved customization options
  • Enhanced developer experience

Thank you for being part of the Cerberus community!

import { Field } from '@cerberus/react/field';
import { NumberInput } from '@cerberus/react/number-input';
import { Box
StaticPreview
()
{
return (
<HStack w="1/2">
<Field label="Enter PIN">
<PinInput />
</Field>
</HStack>
)
}
'
,
description: 'A new version of the app is available',
action: {
label: 'Refresh',
onClick: () => {
window.location.reload()
}
}
})
"
color="danger.text.initial"
rounded="md"
transform="skew(-10deg)"
_hover={{
bgColor: 'black',
color: 'yellow',
}}
css={{
'&:is([data-custom=selector])': {
bgColor: 'blue.500',
color: 'white',
}
}}
>
Cerberus Forever
</Button>
)
}
}
from
'
styled-system/jsx
'
;
function NumberInputDemo() {
return (
<Box w="1/2">
<Field label="How many?" helperText="Choose your quantity.">
<NumberInput />
</Field>
</Box>
)
}
Choose your quantity.
Copy
Copy
Copy
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