Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Kbd

Kbd is a typography component for rendering keyboard shortcuts and key combinations.

​
Import

import { Kbd } from 'radix-native-ui';

​
Usage

import { Text, Kbd } from 'radix-native-ui';

<Text>
  Press <Kbd>Cmd + C</Kbd> to copy.
</Text>

​
Props

​
Examples

​
Single Key

<Text>
  Press <Kbd>Enter</Kbd> to submit.
</Text>

​
Key Combinations

<Text>
  <Kbd>Cmd + S</Kbd> to save
</Text>

<Text>
  <Kbd>Ctrl + Shift + P</Kbd> to open command palette
</Text>

<Flex direction="column" gap={2}>
  <Text><Kbd>↑</Kbd> Move up</Text>
  <Text><Kbd>↓</Kbd> Move down</Text>
  <Text><Kbd>←</Kbd> Move left</Text>
  <Text><Kbd>→</Kbd> Move right</Text>
</Flex>

​
Sizes

<Flex direction="column" gap={3}>
  <Kbd size={1}>Cmd + M</Kbd>
  <Kbd size={2}>Cmd + M</Kbd>
  <Kbd size={3}>Cmd + M</Kbd>
  <Kbd size={4}>Cmd + M</Kbd>
  <Kbd size={5}>Cmd + M</Kbd>
  <Kbd size={6}>Cmd + M</Kbd>
  <Kbd size={7}>Cmd + M</Kbd>
  <Kbd size={8}>Cmd + M</Kbd>
  <Kbd size={9}>Cmd + M</Kbd>
</Flex>

​
Shortcuts List

<Card>
  <Flex direction="column" gap={2}>
    <Heading size={3}>Keyboard Shortcuts</Heading>
    <Flex justify="between">
      <Text>Copy</Text>
      <Kbd>Cmd + C</Kbd>
    </Flex>
    <Flex justify="between">
      <Text>Paste</Text>
      <Kbd>Cmd + V</Kbd>
    </Flex>
    <Flex justify="between">
      <Text>Undo</Text>
      <Kbd>Cmd + Z</Kbd>
    </Flex>
  </Flex>
</Card>
  • Text - Text component
  • Code - Inline code styling