Command Hint Bar

Installation

pnpm dlx shadcn@latest add @cleverui/command-hint-bar

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CommandHintBar } from '@/components/ui/command-hint-bar'

Exampletsx

import {
  BookOpen,
  CreditCard,
  FileText,
  LifeBuoy,
  Palette,
  Rocket,
  Settings2,
  Users,
} from 'lucide-react'
import { CommandHintBar } from '@/components/ui/command-hint-bar'

const commands = [
  {
    label: 'View pricing',
    hint: 'Page',
    href: '#pricing',
    icon: <CreditCard className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Open documentation',
    hint: 'Docs',
    href: '#docs',
    icon: <BookOpen className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Browse components',
    hint: 'Catalog',
    href: '#components',
    icon: <Palette className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Start free trial',
    hint: 'Action',
    href: '#trial',
    icon: <Rocket className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Team settings',
    hint: 'Workspace',
    href: '#settings',
    icon: <Settings2 className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Invite collaborators',
    hint: 'Team',
    href: '#invite',
    icon: <Users className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Changelog notes',
    hint: 'Updates',
    href: '#changelog',
    icon: <FileText className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
  {
    label: 'Contact support',
    hint: 'Help',
    href: '#support',
    icon: <LifeBuoy className="text-muted-foreground size-3.5" strokeWidth={1.75} />,
  },
]

export default function CommandHintBarDemo() {
  return (
    <div className="mx-auto flex min-h-[480px] max-w-lg flex-col items-center justify-center px-4 py-16 sm:px-6">
      <p className="text-muted-foreground mb-8 max-w-sm text-center text-sm leading-relaxed">
        Press ⌘K (or Ctrl+K) anywhere, or click the bar, to jump to a Meridian
        workspace action.
      </p>
      <CommandHintBar commands={commands} placeholder="Search Meridian actions…" />
    </div>
  )
}

API reference

CommandHintBar accepts the following props.

Prop	Type	Default	Description
`commands`*	`CommandHintBarCommand[]`	–	5–8 static entries, e.g. { label: 'View pricing', hint: 'Page', href: '/pricing' }
`placeholder`	`string`	`'Search actions…'`	filter input placeholder, also shown on the closed bar
`hotkeyLabel`	`string`	`'⌘K'`	kbd chip text on the bar; rendering only
`bindHotkey`	`boolean`	`true`	attach a global Meta/Ctrl+K listener post-mount to toggle the sheet

…plus everything from React.HTMLAttributes<HTMLDivElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface CommandHintBarCommand {
  label: string
  hint?: string
  href: string
  icon?: React.ReactNode
}

Related components

Beam Balance

A working two-pan beam balance for React, place mono weight chips on either pan, the beam tips with damped torque physics, and equilibrium earns the lamp. Tailwind tokens.

Centrifugal Governor

A working centrifugal governor for React, drive the power lever, flyweights rise and the valve trims the spin until it settles governed. ARIA slider semantics, Tailwind tokens.

Compare Frame

Neutral labeled compare slider for any two children, a clipped divider with true keyboard slider semantics, framed like a plate in a technical catalog.

Keystroke Cascade

A type-anything React toy, every keystroke drops a physical glyph tile onto a canvas stage to bounce and stack; Enter opens the floor. Keyboard-native, Tailwind-tokened spectacle.

Lens Lab

A playable thin-lens ray lab for React, drag the object along the axis and principal rays, image, and magnification re-solve live. ARIA slider semantics, Tailwind token ink.

Logic Gate Bench

A live logic schematic for React, flip real toggle switches and watch pulses race hairline traces through gates to the output lamp. aria-pressed switches, Tailwind tokens.

Frequently asked questions

How do I install the Command Hint Bar component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/command-hint-bar`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Command Hint Bar require?

Command Hint Bar uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Command Hint Bar to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code