Code Showcase Section
Pair a code example with supporting product context.
Preview
Import
import { CodeShowcaseSection } from "@sigil-ui/components";Usage
<CodeShowcaseSection
label="Quick start"
title="Get started in seconds"
description="Copy, paste, ship."
tabs={[
{ label: "npm", language: "bash", code: "npm install @sigil-ui/components" },
{ label: "pnpm", language: "bash", code: "pnpm add @sigil-ui/components" },
{ label: "yarn", language: "bash", code: "yarn add @sigil-ui/components" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Readable label for the component. |
title | string | — | Heading displayed in the component. |
description | string | — | Supporting text below the heading. |
tabs (required) | CodeTab[] | — | Tabs configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-py | Section py |
--s-content-max-narrow | Content max narrow |
--s-page-margin | Page margin |
--s-radius-card | Radius card |
--s-border | Border |
--s-surface | Surface |
--s-font-mono | Font mono |
--s-text | Text |
--s-primary | Primary |
--s-text-muted | Text muted |
--s-surface-sunken | Surface sunken |