Command

import { Command, type CommandGroup } from "@grassroot/ui-react";
 
const groups: CommandGroup[] = [
  { heading: "Actions", items: [{ label: "Deploy to prod", shortcut: "⌘R" }] },
];
 
const [open, setOpen] = React.useState(false);
 
<Command groups={groups} open={open} onOpenChange={setOpen} />

<script setup lang="ts">
import { ref } from "vue";
import { Command } from "@grassroot/ui-vue";
 
const groups: CommandGroup[] = [
  { heading: "Actions", items: [{ label: "Deploy to prod", shortcut: "⌘R" }] },
];
 
const open = ref(false);
</script>
 
<template>
  <Command :groups="groups" :open="open" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootCommand } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCommand],
  template: `
    <grassroot-command [groups]="groups" [open]="open()" (openChange)="open.set($event)" />
  `,
})
export class ExampleComponent {
  readonly groups: CommandGroup[] = [
    { heading: "Actions", items: [{ label: "Deploy to prod", shortcut: "⌘R" }] },
  ];
  readonly open = signal(false);
}

<script lang="ts">
  import { Command } from "@grassroot/ui-svelte";
 
  const groups: CommandGroup[] = [
    { heading: "Actions", items: [{ label: "Deploy to prod", shortcut: "⌘R" }] },
  ];
 
  let open = $state(false);
</script>
 
<Command groups={groups} open={open} onOpenChange={(next) => (open = next)} />

import { createSignal } from "solid-js";
import { Command } from "@grassroot/ui-solid";
 
const groups: CommandGroup[] = [
  { heading: "Actions", items: [{ label: "Deploy to prod", shortcut: "⌘R" }] },
];
 
export function Example() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <>
      <Command groups={groups} open={open()} onOpenChange={setOpen} />
    </>
  );
}