Docs

Molecules

Command

Fast command palette popup with fuzzy filtering and shortcuts.

5 examplesInteractive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui cmdk
Import
import { Command } from "@quinkit/ui";

Required packages

Powers Command and Combobox. Add these packages before using this component:

  • @quinkit/ui
  • cmdk

Install command is shown above. Without the peer package, imports will fail at build time.

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic Filtered List

Type to filter items instantly.

Basic Filtered List rendered preview

Grouped with Icons

Organize items into labelled groups.

Grouped with Icons rendered preview

With Shortcuts

Show keyboard shortcuts next to items.

With Shortcuts rendered preview

Command Palette (⌘K)

A full command palette inside a dialog.

Command Palette (⌘K) rendered preview

Empty Search State

Custom empty feedback when search yields zero results.

Empty Search State rendered preview

No matching results found for nonexistent-search-term.

Overview

Command is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Installation

bash
pnpm add @quinkit/ui cmdk

cmdk is a required peer dependency for Command (and Combobox).

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

Command adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/command.json