Command

Renders a terminal command with a variant for each package manager.

npm install renoun
pnpm add renoun
yarn add renoun
bun add renoun
import { Command } from 'renoun'

export function InstallExample() {
  return <Command variant="install">renoun</Command>
}

Local Storage

The Command component uses local storage for the package manager preference and will use a small script hoisted to the root of the page to set the package manager on load. This is done to avoid any flashing from state changes when a local storage value is found.

Examples

  • Install Dev Example

    View Source
    npm install --save-dev @types/react @types/react-dom
    pnpm add --save-dev @types/react @types/react-dom
    yarn add --dev @types/react @types/react-dom
    bun add --dev @types/react @types/react-dom
    import { Command } from 'renoun'

export function InstallDevExample() {
  return <Command variant="install-dev">@types/react @types/react-dom</Command>
}

  • Run Example

    View Source
    npm run dev
    pnpm dev
    yarn dev
    bun run dev
    import { Command } from 'renoun'

export function RunExample() {
  return <Command variant="run">dev</Command>
}

  • Exec Example

    View Source
    npx create-renoun --example=docs
    pnpm dlx create-renoun --example=docs
    yarn dlx create-renoun --example=docs
    bunx create-renoun --example=docs
    import { Command } from 'renoun'

export function ExecExample() {
  return <Command variant="exec">create-renoun --example=docs</Command>
}

  • Create Example

    View Source
    npm create renoun
    pnpm create renoun
    yarn create renoun
    bun create renoun
    import { Command } from 'renoun'

export function CreateExample() {
  return <Command variant="create">renoun</Command>
}

API Reference

Last updated