Kbd

A keyboard key. Splits on "+" so a chord can be written as one string.

src/components/ui/kbd.tsx

About

From the component's own source, where it was written.

A keyboard key. Splits on + so a chord can be written as one string.

Install

npx astralyx-ui add kbd

Usage

import { Kbd } from '@/components/ui/kbd'

<Kbd keys="⌘+K" />

Composer

Change the props and the source below follows.

⌘K
Props
tsx
<Kbd keys="⌘+K" />

Examples

Chords

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

Kbd

A keyboard key. Splits on + so a chord can be written as one string.

Extends ComponentProps<'kbd'>.

PropTypeDefaultDescription
keysstring—Chord written as one string, split on "+".
childrenReactNode—Used instead of keys when you want full control.