Typography@knitui/components
Kbd
Kbd renders a semantic keyboard key (<kbd>). Monospace bold text on a tinted surface with a thicker bottom border gives the pressed-key look. size scales the whole keycap — font, padding (height), and corner radius; theme recolors the surface and border via the palette ramp.
import { Kbd } from "@knitui/components";Playground
Loading playground…
<Kbd
size="sm"
>
Ctrl
</Kbd>Examples
Sizes
The seven sizes side by side, from xxs to xxl.
Loading example…
Common Keys
Common single-key labels shown at the default size.
Loading example…
Shortcut
Keyboard shortcuts composed of multiple Kbd keys separated by a plus sign.
Loading example…
Themed
The palette ramp follows the active theme — same component, different accent.
Loading example…
Special Keys
Larger key labels such as function keys and navigation keys.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | Specifies the disabled state of the text view for testing purposes. |
size system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefinedxxs · xs · sm · md · lg · xl · xxl | sm | Scales the keycap — font, padding (height), and corner radius. |
theme system | ThemeName | null | undefinedunset · blue · red · green · yellow · pink · gray | — | Active theme accent — recolors the key surface and border via the palette ramp. |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiTextElement> | undefined |
Plus 507 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.