All components
Kbd
Keyboard shortcut hints with raised, outline, subtle, and plain treatments.
⌘K
123456789101112131415import { Kbd } from "#components/ui/ark-ui/kbd.tsx";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe */} <Kbd variant="raised" size="md">⌘K</Kbd>
{/* composition: asChild forwards everything onto your element */} <Kbd asChild variant="outline"> <abbr title="Command">⌘</abbr> </Kbd> </> );}Variants
⌘Kraised
⌘Koutline
⌘Ksubtle
⌘Kplain
Sizes
⌘Kxs
⌘Ksm
⌘Kmd
⌘Klg
Install
1npx stylexblocks add kbdSource
components/ui/ark-ui/kbd.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { fonts } from '@stylexblocks/ui/tokens/fonts.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'import { textStyles } from '@stylexblocks/ui/text-styles.ts'
const kbdStyles = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', fontWeight: fontWeights.medium, fontFamily: fonts.body, flexShrink: 0, whiteSpace: 'nowrap', wordSpacing: '-0.5em', userSelect: 'none', paddingInline: spacing._1, borderRadius: semanticRadii.indicatorMd, },})
const kbdVariants = stylex.create({ raised: { backgroundColor: colorPalette.subtle, color: colorPalette.fg, borderWidth: '1px', borderBottomWidth: '2px', borderColor: colorPalette.muted, }, outline: { borderWidth: '1px', color: colorPalette.fg, }, subtle: { backgroundColor: colorPalette.subtle, color: colorPalette.fg, }, plain: { color: colorPalette.fg, },})
const kbdSizes = stylex.create({ xs: { height: 'calc(3.75 * 0.25rem * var(--scale-factor, 1))', }, sm: { height: sizes._4, }, md: { height: sizes._4_5, }, lg: { height: sizes._5, },})
const kbdTextStyles = { xs: textStyles._2xs, sm: textStyles.xs, md: textStyles.sm, lg: textStyles.sm,} as const
export type KbdVariant = keyof typeof kbdVariants
export type KbdSize = keyof typeof kbdSizes
/** * Kbd — recipe and component colocated in one file. Variant/size props * resolve mechanically from the axis maps; `extend` carries the per-size * text styles. Composition via `asChild`. */const kbdRecipe = defineRecipe({ styles: kbdStyles, axes: { variant: kbdVariants, size: kbdSizes }, defaultVariants: { variant: "subtle", size: "md" }, extend: (v) => [kbdTextStyles[v.size]],});
export const Kbd = createComponent("kbd", kbdRecipe, "Kbd");
export type KbdProps = React.ComponentProps<typeof Kbd>;