DS | Adila.co
Componentes

Command

Componente command do design system adila.co.

Instalação

bun add @adila-sh/ui

Uso

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@adila-sh/ui';
import { CalendarIcon, SearchIcon, SettingsIcon } from 'lucide-react';

export function Example() {
  return (
    <Command className="w-80 rounded-md border shadow-md">
      <CommandInput placeholder="Digite um comando..." />
      <CommandList>
        <CommandEmpty>Nenhum resultado.</CommandEmpty>
        <CommandGroup heading="Sugestões">
          <CommandItem>
            <CalendarIcon />
            Agenda
          </CommandItem>
          <CommandItem>
            <SearchIcon />
            Buscar
            <CommandShortcut>⌘K</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Config">
          <CommandItem>
            <SettingsIcon />
            Preferências
            <CommandShortcut>⌘,</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Dependências

  • cmdk
  • lucide-react

Componentes relacionados

Nesta página