Skip to main content
Explore the live, interactive preview at tuturuuu.com/ui/components/quick-command-center.
Category: Navigation · Import: @tuturuuu/ui/quick-command-center · Status: Live preview

​
Installation

Install the shared UI package, import global styles once, then import the component from its public subpath. 
bun add @tuturuuu/ui

import '@tuturuuu/ui/globals.css';
import { QuickCommandCenter } from '@tuturuuu/ui/quick-command-center';

​
Usage

Copy the default usage snippet and adapt labels, state, and event handlers to the product surface. 
import { QuickCommandCenter } from '@tuturuuu/ui/quick-command-center';

<QuickCommandCenter
  open={open}
  onOpenChange={setOpen}
  title="Quick actions"
  placeholder="Search..."
  emptyLabel="No commands found"
  digitShortcuts
  groups={groups}
/>

​
Examples

Examples reuse the registry snippets so the docs stay aligned with the component catalog.

​
Default

A minimal implementation using the current registry snippet. 
import { QuickCommandCenter } from '@tuturuuu/ui/quick-command-center';

<QuickCommandCenter
  open={open}
  onOpenChange={setOpen}
  title="Quick actions"
  placeholder="Search..."
  emptyLabel="No commands found"
  digitShortcuts
  groups={groups}
/>

​
Package import

Import through the public package path so workspace and external apps share the same contract. 
// Public package import
import { QuickCommandCenter } from '@tuturuuu/ui/quick-command-center';

// Workspace apps should keep importing through the package boundary.

​
API reference

The public exports currently available from this component entry.
ExportKind
QuickCommandCentercomponent

​
Customization

Common props, states, and composition points to review before using this component.
  • Groups
  • Digit shortcuts
  • Search value