Code | Park UI

console.log("Hello, world!")

Installation

npx @park-ui/cli@next add code

Add Component

Copy the code snippet below into you components folder.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { code } from 'styled-system/recipes'

export type CodeProps = ComponentProps<typeof Code>
export const Code = styled(ark.code, code)

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineRecipe } from '@pandacss/dev'

export const code = defineRecipe({
  className: 'code',
  base: {
    alignItems: 'center',
    borderRadius: 'l2',
    display: 'inline-flex',
    fontVariantNumeric: 'tabular-nums',
    fontWeight: 'medium',
    fontFamily: 'code',
    gap: '1',
    whiteSpace: 'pre-wrap',
  },
  defaultVariants: {
    size: 'md',
    variant: 'subtle',
  },
  variants: {
    variant: {
      solid: {
        bg: 'colorPalette.solid.bg',
        color: 'colorPalette.solid.fg',
      },
      surface: {
        bg: 'colorPalette.surface.bg',
        borderWidth: '1px',
        borderColor: 'colorPalette.surface.border',
        color: 'colorPalette.surface.fg',
      },
      subtle: {
        bg: 'colorPalette.subtle.bg',
        color: 'colorPalette.subtle.fg',
      },
      outline: {
        borderWidth: '1px',
        borderColor: 'colorPalette.outline.border',
        color: 'colorPalette.outline.fg',
      },
      plain: {
        color: 'colorPalette.plain.fg',
      },
    },
    size: {
      xs: {
        textStyle: '2xs',
        px: '1',
        minH: '4',
      },
      sm: {
        textStyle: 'xs',
        px: '1.5',
        minH: '5',
      },
      md: {
        textStyle: 'sm',
        px: '2',
        minH: '6',
      },
      lg: {
        textStyle: 'sm',
        px: '2.5',
        minH: '7',
      },
    },
  },
})

Usage

import { Code } from '@/components/ui'

<Code>Hello world</Code>

Examples

Sizes

Use the size prop to change the size of the code component.

console.log()console.log()console.log()

Variants

Use the variant prop to change the appearance of the code component.

console.log()console.log()console.log()console.log()console.log()

Colors

Use the colorPalette prop to change the color scheme of the component.

console.log()console.log()console.log()console.log()

Props

Prop	Default	Type
`variant`	`'subtle'`	`'solid' \| 'surface' \| 'subtle' \| 'outline' \| 'plain'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'`