Code
A component to display inline code snippets.
Usage
@park-ui/panda-presetoutline
ghost
import { Code, type CodeProps } from '~/components/ui'
export const Demo = (props: CodeProps) => {
return <Code {...props}>@park-ui/panda-preset</Code>
}
Installation
npx @park-ui/cli components add code1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/code.tsx
import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { code } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type CodeProps = ComponentProps<typeof Code>
export const Code = styled(ark.code, code)
import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
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)
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export { Code, type CodeProps } from './code'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { defineRecipe } from '@pandacss/dev'
export const code = defineRecipe({
className: 'code',
base: {
alignItems: 'center',
bg: 'bg.subtle',
borderRadius: 'l2',
color: 'fg.default',
display: 'inline-flex',
fontWeight: 'medium!',
fontFamily: 'var(--fonts-code)',
whiteSpace: 'pre',
},
defaultVariants: {
size: 'md',
variant: 'outline',
},
variants: {
variant: {
outline: {
borderWidth: '1px',
},
ghost: {},
},
size: {
sm: {
minHeight: '5',
px: '0.5',
textStyle: 'xs',
},
md: {
minHeight: '6',
textStyle: 'sm',
px: '1',
py: '1px',
},
lg: {
minHeight: '7',
px: '1.5',
py: '1px',
textStyle: 'md',
},
},
},
})