Sistine

Kbd

Component
View in Storybook

A keyboard key cap for shortcuts and key combinations, drawn in the theme's text colour with the material's hairline edge.

Installation
Install this component using the shadcn CLI with your preferred package manager
bunx shadcn@latest add @sistine/kbd
Usage
Example code for using this component
⌘K

Press Esc to close, or ⇧ + Tab to go back.

Props
Component props and variants

This component supports the following variants:

  • default - Standard styling
  • glass - Glassmorphism effect (default)