Keyboard Shortcuts Help
Displays available keyboard shortcuts to the user. Install Keyboard Shortcuts Help from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
2 storiesView componentSearch Dialog
Full-screen search dialog with keyboard navigation. Install Search Dialog from the VLLNT UI registry with the shadcn CLI. React Native source for Search Dialog is included in VLLNT UI 0.4.0 for iOS and Android. It is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Search Dialog is a command-palette search built on the Command component. A trigger button and a Cmd/Ctrl+K shortcut open a modal where users type to filter items, with matching text highlighted and results sorted by title. Supply an async docsSearch function to enable Components, Docs, and Everything scope tabs with loading and empty states, and onSelect callbacks handle navigation. Use it for site-wide search, docs lookup, or in-app navigation.
LearningPreview
Switch between light and dark to inspect the embedded Storybook preview.
Full-screen search dialog with keyboard navigation. Part of the learning family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Search Dialog to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
# React Native is source-only; copy the React Native source aboveSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Search Dialog?
- Search Dialog is a React command-palette component from VLLNT UI. It opens a modal search over a list of items, highlights matches, and supports optional asynchronous documentation search across scoped tabs.
- How do I add Search Dialog?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/search-dialog.json` to install Search Dialog via the shadcn CLI. The component and its types are copied into your project so you can wire it to your data.
- Does Search Dialog support a keyboard shortcut?
- Yes. It listens for Cmd+K (or Ctrl+K) to toggle open and shows a shortcut badge on the trigger button. The shortcut is ignored while typing in inputs, and you can turn it off with the enableKeyboardShortcut prop.