All components
Command
Keyboard shortcut groups that space and mute a row of key hints.
⌘K
12345678910111213import * as stylex from "@stylexjs/stylex";import { Command } from "#components/ui/ark-ui/command.tsx";import { kbdSizes, kbdStyles, kbdVariants } from "@stylexblocks/ui/recipes/kbd.ts";
export function Example() { return ( // the size prop resolves through the StyleX recipe; composition via asChild <Command size="sm"> <kbd {...stylex.props(kbdStyles.base, kbdSizes.sm, kbdVariants.raised)}>⌘</kbd> <kbd {...stylex.props(kbdStyles.base, kbdSizes.sm, kbdVariants.raised)}>K</kbd> </Command> );}Sizes
⌘Kxs
⌘Ksm
⌘Kmd
⌘Klg
Install
1npx stylexblocks add commandSource
components/ui/ark-ui/command.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const commandStyles = stylex.create({ base: { display: 'inline-flex', gap: spacing._1, color: semanticColors.fgMuted, },})
const commandSizes = stylex.create({ xs: { fontSize: fontSizes._2xs, }, sm: { fontSize: fontSizes.xs, }, md: { fontSize: fontSizes.sm, }, lg: { fontSize: fontSizes.md, },})
export type CommandSize = keyof typeof commandSizes
/** * Command — a keyboard-shortcut group that spaces and mutes a row of key * hints (usually `<Kbd>` children). The size prop resolves mechanically from * the recipe's size map. Composition via `asChild`. */const commandRecipe = defineRecipe({ styles: commandStyles, axes: { size: commandSizes }, defaultVariants: { size: "sm" },});
export const Command = createComponent("span", commandRecipe, "Command");
export type CommandProps = React.ComponentProps<typeof Command>;