Park UI

Usage

Shift + Alt

size: md

import { Kbd, type KbdProps } from '~/components/ui/kbd'

export const Demo = (props: KbdProps) => {
  return <Kbd {...props}>Shift + Alt</Kbd>
}

Installation

Insert code snippet into your project. Update import paths as needed.

import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
import { forwardRef } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'

export interface KbdProps extends KbdVariantProps, HTMLArkProps<'kbd'> {}

export const Kbd = forwardRef<HTMLElement, KbdProps>((props, ref) => {
  const { size, className, ...rest } = props
  return <ark.kbd className={styles({ size, className })} ref={ref} {...rest} />
})

Kbd.displayName = 'Kbd'

type KbdVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'kbd',
    defaultVariants: { size: 'md' },
    variants: { size: { sm: 'kbd--size_sm', md: 'kbd--size_md', lg: 'kbd--size_lg' } },
  },
  { twMerge: false },
)

import { type HTMLArkProps, ark } from '@ark-ui/solid'
import { splitProps } from 'solid-js'
import { type VariantProps, tv } from 'tailwind-variants'

export interface KbdProps extends KbdVariantProps, HTMLArkProps<'kbd'> {}

export const Kbd = (props: KbdProps) => {
  const [variantProps, kbdProps] = splitProps(props, ['class', 'size'])
  return <ark.kbd class={styles(variantProps)} {...kbdProps} />
}

type KbdVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'kbd',
    defaultVariants: { size: 'md' },
    variants: { size: { sm: 'kbd--size_sm', md: 'kbd--size_md', lg: 'kbd--size_lg' } },
  },
  { twMerge: false },
)

Not yet available