@cerberus-design/react

Cerberus React

This is the React component library for the Cerberus Design System.

Installation

pnpm add @cerberus/react

Usage

import { Button } from '@cerberus/react'

function BasicExample() {
  return (
    <form>
      <Button type="submit">Submit</Button>
    </form>
  )
}

Basic Customization

import { Button } from '@cerberus/react'

function BasicExample() {
  return (
    <form>
      <Button palette="danger" usage="outline" type="button">Cancel</Button>
    </form>
  )
}

Advanced Customization

You can use Panda-CSS to customize the styles of the components.

import { Button } from '@cerberus/react'
import { css } from '../styled-system/css'

function CustomButton() {
  return (
    <Button
      className={css({
          backgroundColor: 'yellow',
          color: 'black',
          borderRadius: '0.5rem',
          '&:hover': {
            backgroundColor: 'black',
            color: 'yellow'
          },
        })}
    >
      Wu-Tang Forever
    </Button>
  )
}

Copyright (c) 2024 Digital University, All Rights Reserved