DocsBlog

  • 1.1.2

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Release - January 27, 2025

Cerberus v0.23 Release

CBAuthor's profile picture

Casey Baggz

Cerberus Admin

We're excited to announce the release of Cerberus v0.23! This update brings powerful new utility components that streamline common interaction patterns, along with important bug fixes that enhance reliability and visual consistency.

This release focuses on empowering developers with essential utility components for clipboard operations and collapsible content.

New Components

Clipboard

Copy text to the clipboard with ease using the new Clipboard component. This component provides an accessible way to copy text with built-in visual feedback and customizable indicators.


The Clipboard component is completely unstyled by default, giving you full control over its appearance. You can easily compose it with buttons, text, or any other interactive elements.

Button Integration

Collapsible

Show or hide content with smooth animations using the new Collapsible component. Perfect for creating accordions, expandable sections, and progressive disclosure patterns.

Customizable Effects

Control the animation behavior with the effect prop. You can choose from smooth height transitions or fade effects, or disable animations entirely.

Bug Fixes & Improvements

SplitButton Type Safety

  • Fix: SplitButton now has correct TypeScript types, providing better IntelliSense and type checking for improved developer experience.

Dark Mode Contrast Enhancement

  • Fix: The page.backdrop.initial token for the Cerberus theme in dark mode has been updated to provide improved contrast, ensuring better readability and visual hierarchy in dark mode interfaces.

Upgrading

To upgrade to Cerberus v0.23.0, run:

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

What's Next?

We continue to enhance the Cerberus ecosystem with a focus on developer productivity and accessible design patterns. Coming up:

  • Enhanced form components
  • Additional utility components
  • Performance optimizations
  • Expanded documentation and examples

Thank you for being part of the Cerberus community! These updates are driven by your feedback and real-world usage patterns.

Copy
'use client'

import { HStack } from '@/styled-system/jsx'
import { Clipboard, IconButton, Text } from '@cerberus/react'

export function BasicDemo() {
  return (
    <Clipboard.Root value="Hello, World!">
      <Clipboard.Control asChild>
        <HStack gap="md" w="full">
          <Clipboard.Label asChild>
            <Text as="small" textStyle="label-sm">
              Hello, World!
            </Text>
          </Clipboard.Label>

          <Clipboard.Trigger asChild>
            <IconButton clipboard shape="square" size="sm" rounded="xs">
              <Clipboard.Indicator />
            </IconButton>
          </Clipboard.Trigger>
        </HStack>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}
Copy
'use client'

import { Button, Clipboard } from '@cerberus/react'

export function ButtonDemo() {
  return (
    <Clipboard.Root value="Hello, World!">
      <Clipboard.Control>
        <Clipboard.Trigger asChild>
          <Button color="action.text.initial">
            <Clipboard.CopyText color="currentColor" />
            <Clipboard.Indicator />
          </Button>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}
Copy
'use client'

import { Box, HStack } from '@/styled-system/jsx'
import { ChevronDown } from '@carbon/icons-react'
import { Collapsible } from '@cerberus/react'

export function BasicDemo() {
  return (
    <HStack h="full" w="3/4">
      <Collapsible.Root w="full">
        <Collapsible.Trigger asChild>
          <HStack gap="sm" userSelect="none">
            <Collapsible.Indicator
              transform="rotate(-90deg)"
              transition="transform 0.2s"
              _open={{ transform: 'rotate(0deg)' }}
            >
              <ChevronDown />
            </Collapsible.Indicator>
            Toggle
          </HStack>
        </Collapsible.Trigger>

        <Collapsible.Content>
          <Box
            border="1px solid"
            borderColor="page.border.initial"
            p="md"
            mt="sm"
            rounded="md"
            w="full"
          >
            Collapsible content goes here.
          </Box>
        </Collapsible.Content>
      </Collapsible.Root>
    </HStack>
  )
}
Copy
'use client'

import { Box, HStack } from '@/styled-system/jsx'
import { Collapsible } from '@cerberus/react'

export function FadeDemo() {
  return (
    <HStack h="full" w="17rem">
      <Collapsible.Root>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content effect="none">
          <Box
            border="1px solid"
            borderColor="page.border.initial"
            p="md"
            rounded="md"
            w="full"
          >
            Collapsible content goes here.
          </Box>
        </Collapsible.Content>
      </Collapsible.Root>
    </HStack>
  )
}
Hello, World!
Copy
Copy
Toggle
Collapsible content goes here.
Collapsible content goes here.