DocsBlog

  • 1.0.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupNewLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPaginationNewPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

Cerberus Context

Register custom options for interal component usage.

  • npm
  • source
import { CerberusProvider, makeSystemConfig, defineIcons } from '@cerberus/react'

Usage

The Cerberus Context provides the ability to register custom options for internal component usage.

Config

The Cerberus Context configuration is passed to the config property of the CerberusProvider via the makeSystemConfig helper.

Registering Custom Icons

To register a different set of icons for your application, you can use the defineIcons function and pass it to the icons prop of the CerberusProvider config property.

Icon overrides

Here is the exhaustive list of icon overrides you can configure:

NameDescription
accordionIndicatorThe arrow indicator used in accordion components.
avatarThe fallback icon used when no avatar is available.
calendarThe calendar icon used in date picker components.
calendarPrevThe prev month trigger icon used in date picker components.
calendarNextThe next month trigger icon used in date picker components.
caretDownThe caret down icon used in dropdown components.
checkboxThe checkbox icon used in checkbox components.
closeThe close icon used in closeable components.
confirmModalThe header icon used in confirm modals.
decrementThe icon used for decrement triggers.
deleteThe icon used for delete triggers.
dangerNotificationThe icon used for danger notifications.
fileUploaderThe icon used for file uploader components.
indeterminateThe icon used for indeterminate states.
incrementThe icon used for increment triggers.
infoNotificationThe icon used for info notifications.
invalidThe icon used for invalid states.
invalidAltThe icon used for alternative invalid states.
moreVerticalThe icon used for more options triggers.
pinLeftThe icon used for pin left triggers.
pinLeftFilledThe icon used for pin left triggers with a filled style.
pinRightThe icon used for pin right triggers.
pinRightFilledThe icon used for pin right triggers with a filled style.
promptModalThe icon used for prompt modal triggers.
redoThe icon used for redo triggers.
selectArrowThe icon used for select menu triggers.
selectCheckedThe icon used for the checked state of a select menu item.
sortAscThe icon used for ascending sort triggers.
sortDescThe icon used for descending sort triggers.
successNotificationThe icon used for success notifications.
toggleCheckedThe icon used for toggle checked triggers.
waitingFileUploaderThe icon used for a loading state in the File Uploader.
warningNotificationThe icon used for warning notifications.

Config Options

NameDescription
iconsCustom icons to register for all component usage.

On this page

  • Edit this page on Github
Cerberus Design System | Docs
'use client'

import { CerberusProvider } from '@cerberus/react'
import { type PropsWithChildren } from 'react'

export function CerberusConfig(props: PropsWithChildren) {
  return <CerberusProvider>{props.children}</CerberusProvider>
}

'use client'

import { CerberusProvider, makeSystemConfig } from '@cerberus/react'
import { PropsWithChildren } from 'react'

const config = makeSystemConfig()

export function ConfigDemo(props: PropsWithChildren) {
  return <CerberusProvider config={config}>{props.children}</CerberusProvider>
}

'use client'

import {
  CerberusProvider,
  defineIcons,
  makeSystemConfig,
} from '@cerberus/react'
import { ChevronDown } from '@carbon/icons-react'
import type { PropsWithChildren } from 'react'

const icons = defineIcons({
  // Add a different icon for the accordion indicator
  accordionIndicator: ChevronDown,
})

const config = makeSystemConfig({
  icons,
})

export default function CerberusConfig(props: PropsWithChildren<{}>) {
  return <CerberusProvider config={config}>{props.children}</CerberusProvider>
}