InstallCommand
The install line a docs page prints for its packages, spelled by each package manager in a synced set of code tabs.
View code
<InstallCommand
packages={["@sdxc/ui", "@sdxc/u", "@sdxc/icons"]}
title="Terminal"
aria-label="Package manager"
labels={{ copy: "Copy code", copied: "Copied" }}
/>
<InstallCommand
packages={["vite-plus", "@cloudflare/vite-plugin"]}
dev
title="Terminal"
aria-label="Package manager"
labels={{ copy: "Copy code", copied: "Copied" }}
/>Demo docs sites
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
- Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
- API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
- Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { InstallCommand } from "@sdxc/ui/docs";Renders one terminal block per manager inside a synced CodeTabs.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
packages | readonly string[] | Yes | Package specifiers to install, such as ["@sdxc/ui", "remix@3.1.0"]. |
dev | boolean | No | Installs them as development dependencies. |
syncKey | string | No | Defaults to package-manager, so every install line on the site follows one choice. |
persist | CodeTabsPersistence | No | Where the choice is remembered; see CodeTabs. Defaults to local. |
selected | string | No | The manager to render selected, such as the one a cookie remembered. |
managers | readonly Manager[] | No | The managers to offer, in order. Defaults to npm, pnpm, yarn and bun. |
title | string | No | The header each block reads as, such as "Terminal". |
labels | CodeBlock.Labels | Yes | |
"aria-label" | string | Yes | Names the strip for assistive technology, such as "Package manager". |
Also accepts everything in Omit<TagProps<"form">, "children" | "aria-label" | "title">.
Types
| Name | Values | What it decides |
|---|---|---|
Manager | "npm" | "pnpm" | "yarn" | "bun" | A package manager the strip offers, which is also the value its sync key stores. |
Also exported
Other components this module publishes.
installLine