Mischief

09 / Docs

Install Command

The install line for a library, switchable between package managers, with the runner and the installer kept apart.

Live previewSource
npx shadcn@latest add Tinkerers-Labs/mischief-ui/hold-button

Running a package and adding one are different verbs, so they come from different tables.

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/install-command
import { InstallCommand } from "mischief-ui/install-command"

Usage

export function Install() {
  return (
    <InstallCommand
      run="shadcn@latest add tabs"
      add="my-lib"
      prompt="Read the docs, then add Tabs to this project."
    />
  )
}

API

runstringArguments for a one-off runner, such as shadcn@latest add tabs.
addstringPackages to add as a dependency.
promptstringAn instruction to paste into a coding agent, offered beside the commands.
managers, defaultManagerPackageManager[], PackageManagerWhich package managers to offer and which leads. Defaults to npm.
packageLabel, promptLabel, notestring, string, ReactNodeCopy for the two extra options and the line beneath.

Accessibility

The options are a labelled group of toggle buttons reporting their pressed state, so the current choice is announced rather than shown only by a border. Running a package and adding a dependency are separate verbs, so they come from separate tables instead of one being derived from the other by rewriting a string. Only the options you supply are rendered, and a prompt wraps rather than scrolling sideways.

Dependencies

  • lucide-react