import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Command, }

{metadata.title}

A component that renders an unhighlighted code block, useful for one-liners or API routes.

In this guide, you'll learn how to use the Command component.

Usage

tsx

import { Command } from "@medusajs/ui"

tsx

<Command>
  <code>yarn add @medusajs/ui</code>
</Command>

API Reference

Usage Outside Medusa Admin

If you're using the Command component in a project other than the Medusa Admin, make sure to include the TooltipProvider somewhere up in your component tree, as the Command.Copy component uses a Tooltip:

tsx

<TooltipProvider>
  <Command>
    <code>yarn add @medusajs/ui</code>
    <Command.Copy
      content="yarn add @medusajs/ui"
      className="ml-auto"
    />
  </Command>
</TooltipProvider>