ProductClient Svelte Components

Svelte 5 components for documentation sites. The package provides composable documentation primitives with TypeScript types and a compiled stylesheet.

Requirements

• Svelte 5.57 or newer
• Node.js 20 or newer, or Bun
• Tailwind CSS 4 when extending the component styles with application utilities

Installation

npm install components-svelte

The package can also be installed with pnpm, yarn, or Bun.

Setup

Import the compiled stylesheet once from your application entrypoint or global stylesheet:

@import "components-svelte/styles.css";

The stylesheet includes the component design tokens, base styles, utilities, and code-block styles. Import it before application overrides so local styles can take precedence.

Theme tokens

Components use the consuming site's accent and surface tokens when they are available. Define --primary, --primary-light, --primary-dark, and --background on the host document to customize the package. If those tokens are not defined, the package falls back to a neutral palette.

Usage

Components are native Svelte 5 components. They are not React wrappers.

<script lang="ts">
  import { Callout, CodeBlock } from "components-svelte";
</script>

<Callout variant="info" title="Getting started">
  {#snippet children()}
    <p>Install the package and import the stylesheet once.</p>
  {/snippet}
</Callout>

<CodeBlock language="typescript">
  {#snippet children()}const ready = true;{/snippet}
</CodeBlock>

Svelte snippets are used for component content where a component accepts children or named slots:

<script lang="ts">
  import { Card } from "components-svelte";
</script>

<Card title="ProductClient">
  {#snippet children()}
    <p>Documentation primitives for your product.</p>
  {/snippet}
</Card>

Component families

• Accordion
• Badge
• Callout
• Card
• Code Block
• Code Group
• Color
• Columns
• Expandable
• Frame
• Icon
• Mermaid
• Panel
• Property
• Search
• Steps
• Tabs
• Tile
• Tooltip
• Tree
• Update
• View

Compound APIs are exported from the main entrypoint, including Accordion.Group, Color.Row, Color.Item, Steps.Item, Tabs.Item, Tree.File, and Tree.Folder.

Development

bun install
bun run check
bun run build:package
bun run storybook

bun run build:package generates the typed component package in dist and the public styles.css export. The Vite app build remains available through bun run build.

License

MIT