Kbd
Represents a keyboard input or hotkey.
Usage
Shift + Alt
import { Kbd, type KbdProps } from '~/components/ui'
export const Demo = (props: KbdProps) => {
return <Kbd {...props}>Shift + Alt</Kbd>
}
Installation
npx @park-ui/cli components add kbd1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/kbd.tsx
import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { kbd } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type KbdProps = ComponentProps<typeof Kbd>
export const Kbd = styled(ark.kbd, kbd)
import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { kbd } from 'styled-system/recipes'
export type KbdProps = ComponentProps<typeof Kbd>
export const Kbd = styled(ark.kbd, kbd)
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export { Kbd, type KbdProps } from './kbd'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 kbd = defineRecipe({
className: 'kbd',
base: {
alignItems: 'center',
bg: 'bg.subtle',
borderRadius: 'l2',
boxShadow:
'0 -2px 0 0 inset var(--colors-border-muted), 0 0 0 1px inset var(--colors-border-muted)',
color: 'fg.default',
display: 'inline-flex',
fontFamily: 'var(--fonts-code)',
fontWeight: 'medium',
whiteSpace: 'pre',
},
defaultVariants: {
size: 'md',
},
variants: {
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',
},
},
},
})