Command

Command palette with keyboard navigation for search and quick actions.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview
No results found.
Components
Button⌘B
Card
Avatar
Navigation
Breadcrumbs
Tabs

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
} from "@payglocal_ui/flux-ui";

Example

<Command className="rounded-xl border border-border shadow-md">
  <CommandInput placeholder="Search components..." />
  <CommandList>
    <CommandGroup heading="Components">
      <CommandItem>Button</CommandItem>
      <CommandItem>Card</CommandItem>
      <CommandItem>Dialog</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>