Shortcut
Shortcut (also known as Keyboard or KBD) support ensures smooth navigation via the keyboard. It's essential for users who rely on keyboard-only interaction and appreciated by power users for quick, efficient access to features.
This component serves as a foundational building block for many other UI components. Because it functions at the parent level, you won’t find many standalone examples here. Instead, you’ll see it used in context within the components that rely on it. For practical usage and visual examples, please refer to the child components that make use of it.
Example
Related components
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add shortcutAnatomy
import { Shortcut } from "@/components/ui/core/shortcut";<Shortcut keys="Ctrl+S" />
<Shortcut keys={["Ctrl", "Alt", "Delete"]} />
<Shortcut>⌘ + C</Shortcut>Props
Loading types…
Text Field
A text field allows users to input plain text, commonly used for names, emails, search queries, and other short-form data.
Card
A versatile container component designed to organize and present content in a structured card layout, typically composed of distinct header, body, and footer sections. It provides a clean and consistent way to group related information within a unified visual block.