Cerberus Factory
Learn about the Cerberus Factory, a powerful tool for managing styles and themes in the Cerberus Design System.
Overview
Cerberus factory serves as a way to create supercharged JSX component from any
HTML element to enable them receive asChild
, css
, and style props.
1import { cerberus } from "@cerberus/react"
JSX Element
With the JSX factory, you can use cerberus.<element>
syntax to create JSX elements that support css
, asChild
, and style props.
1import { cerberus } from "@cerberus/react"2
3function Example() {4 return (5 <cerberus.button6 bgColor="black"7 _hover={{8 bgColor: 'blue'9 }}10 css={{11 '&:is([data-custom])': {12 color: 'red'13 }14 }}15 >16 Click me17 </cerberus.button>18 )19}
Factory function
Use the cerberus
function to convert native element components.
1const Link = cerberus("a")2
3function Example() {4 return <Link css={{ color: 'blue' }} href="https://chakra-ui.com" />5}
Creating Primitives
You can create a Cerberus primitive with the createCerberusPrimitive
function. This is useful for creating components that have a specific recipe or style.
All primitives created with any of the higher order functions it returns will also have the factory props available.
Additionally, you may pass in any reference to an Element or a string name of a HTML element for your component.
withNoRecipe
Creates a Cerberus component with bare features and no recipe. This is identical to using the cerberus
function directly.
1import { cerberus, createCerberusPrimitive } from "@cerberus/react"2
3const { withNoRecipe } = createCerberusPrimitive()4
5const Button = withNoRecipe(cerberus.button)6
7function Example() {8 return <Button color="blue">Click me</Button>9}
withRecipe
Creates a Cerberus component with a specific recipe applied. This allows you to use the styles defined in the recipe.
1import { cerberus, createCerberusPrimitive } from "@cerberus/react"2import { button } from "styled-system/recipes"3
4const { withRecipe } = createCerberusPrimitive(button)5const Button = withRecipe('button')6
7function Example() {8 return <Button css={{ color: 'blue' }}>Click me</Button>9}
This example creates a Cerberus button component that has the button
recipe styles applied to it (along with Cerberus component features).
withSlotRecipe
Creates a Cerberus component with a specific recipe applied at the slot level. This is useful for creating components that have multiple slots with different styles.
1import { cerberus, createCerberusPrimitive } from "@cerberus/react"2import { field } from "styled-system/recipes/slots"3
4const { withSlotRecipe } = createCerberusPrimitive(field)5
6const Field = withSlotRecipe("div", "root")7const FieldLabel = withSlotRecipe("label", "label")8const FieldInput = withSlotRecipe("input", "input")9
10function Example() {11 return (12 <Field css={{ color: 'blue' }}>13 <FieldLabel>Label</FieldLabel>14 <FieldInput type="text" />15 </Field>16 )17}
In this example, we create a Cerberus field component with a root slot, label slot, and input slot. Each slot can have its own styles defined in the recipe, and utilize the Cerberus factory features when needed.
Polymorphism
Every component created with the Cerberus factory can accept the
asChild
props to change the underlying DOM element.
1<Button asChild>2 <a href="https://cerberus.digitalu.design/">Cerberus</a>3</Button>
On this page