Install Section
Split-layout install section with multiple copyable commands and package manager tabs.
Preview
Import
import { InstallSection } from "@sigil-ui/components";Usage
<InstallSection
label="Install"
title="Get started"
description="Add Sigil to your project in seconds."
note="Requires React 18+ and Tailwind CSS v4."
commands={[
{ label: "npm", command: "npm install @sigil-ui/components" },
{ label: "pnpm", command: "pnpm add @sigil-ui/components" },
{ label: "yarn", command: "yarn add @sigil-ui/components" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Uppercase mono label |
title | string | "Get started" | Section heading |
description | string | — | Supporting text |
note | string | — | Small mono footnote below description |
commands | InstallCommand[] | required | Array of { label, command } |
className | string | — | Additional CSS classes |
Each command block includes a copy-to-clipboard button. Plus all standard <section> HTML attributes.