Preview

Import

import { CodeTabs, CodePreview, CopyButton, TokenPreview, ThemeSwatch, ThemeSwitcher, PromptInput, ChatMessage, ChatThread, MessageComposer, ActivityTimeline, AuditLog, Changelog, VersionBadge, KeyboardKey } from "@sigil-ui/components";

Usage

<CodeTabs
    tabs={[
      { value: "npm",  label: "npm",  language: "bash", code: "npm install @sigil-ui/components" },
      { value: "pnpm", label: "pnpm", language: "bash", code: "pnpm add @sigil-ui/components" },
      { value: "yarn", label: "yarn", language: "bash", code: "yarn add @sigil-ui/components" },
    ]}
  />

Sub-components

This component includes the following parts:

<CodePreview>
<CopyButton>
<TokenPreview>
<ThemeSwatch>
<ThemeSwitcher>
<PromptInput>
<ChatMessage>
<ChatThread>
<MessageComposer>
<ActivityTimeline>
<AuditLog>
<Changelog>
<VersionBadge>
<KeyboardKey>

Props

Prop	Type	Default	Description
`tabs` (required)	`CodeTab[]`	—	Tabs configuration.
`defaultValue`	`string`	—	Initial value when the component manages its own state.

Token integration

CSS Variable	Purpose
`--s-text-muted`	Text muted
`--s-card-radius`	Card radius
`--s-border`	Border
`--s-background`	Background
`--s-radius-md`	Radius md
`--s-radius-sm`	Radius sm
`--s-text`	Text
`--s-primary`	Primary
`--s-surface`	Surface
`--s-primary-contrast`	Primary contrast
`--s-shadow-sm`	Shadow sm

Code Tabs

Preview

Import

Usage

Sub-components

Props

Token integration

On this page