nessra uinessra ui

A command menu with search and keyboard navigation.

Loading...
import {
  Calculator,
  Calendar,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/command.json

Usage

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog

Use CommandDialog to show the command menu in a dialog (⌘K style).

Loading...
"use client"

import * as React from "react"

API Reference

Command

ComponentDescription
CommandThe root component
CommandInputThe search input
CommandListContainer for command items
CommandEmptyShown when no results
CommandGroupA group of items with heading
CommandItemA selectable item
CommandSeparatorSeparator between groups
CommandShortcutKeyboard shortcut display

CommandInput Props

PropTypeDefaultDescription
placeholderstring-Placeholder text

CommandItem Props

PropTypeDefaultDescription
onSelect() => void-Callback when item selected
disabledbooleanfalseDisable the item