Docs components

These components are available in every MDX file without an import. They're styled from the design tokens in src/design/tokens.js, work in light and dark mode, and render plain HTML, so the Markdown copy of each page keeps their text. The source is in src/components/, and the styles are in src/css/kit.css.

Use these instead of hand-written HTML, Tailwind classes, or the older components they replace. The style guide covers when to use each one in prose.

Cards and buttons

Cards link to other pages. The title is a real heading (h3 by default, set with headingLevel), so the page outline stays correct. On clickable cards, the title link covers the whole card.

Card variants

The four variants are link (the default), product, quickstart, and compact. Put cards in a <CardGrid> with cols of 1 to 4. Add breakout to widen the grid to the 896px track used by code blocks.

Link card

A title and a description. The whole card is a link.

Snowplow CDI10 min

Quickstart card

Adds a product label and a time estimate.

Product

Product card

A description, an optional snippet or other children, and a list of links.

Compact card

mdx
<CardGrid cols={2}>
  <Card title="Link card" href="/docs/fundamentals/" description="..." />
  <Card variant="quickstart" eyebrow="Snowplow CDI" time="10 min" title="..." href="..." description="..." />
  <Card variant="product" title="..." href="..." description="..." links={[{ label: '...', href: '...' }]}>
    Optional children, such as a code block
  </Card>
  <Card variant="compact" title="Compact card" href="/docs/sources/" />
</CardGrid>

<DocCardList /> renders the same cards for the pages in the current sidebar category.

Buttons

Use primary for the one main action in a region, secondary for other actions, ghost for toolbar actions, and link for an action that reads as a text link. A button with href renders a link.

Primary Secondary Ghost Link

mdx
<Button variant="primary" href="/docs/get-started/">Get started</Button>

Badges and version markers

Badges are text, not images, so they read correctly in dark mode, in screen readers, and in the Markdown copy. Group badges with <BadgeGroup>.

Badge types

Component	Use for	Example
`<TierBadge tier="..." />`	Maintenance group: `actively-maintained`, `maintained`, `early-release`, `unsupported`	Actively maintained Early release
`<VersionBadge component="..." />`	Latest version, from `src/componentVersions.js`	v4.8.0
`<LifecycleBadge stage="..." />`	`preview`, `beta`, `early-access`, `ga`, `deprecated`, `legacy`	Beta Deprecated
`<LicenseBadge license="..." />`	`scl`, `spal`, `slul`	Snowplow Community License
`<Badge>`	Anything else, with `variant`, `tone`, and `href`	Label

Support tier labels

Tracker and integration landing pages read their labels from the catalog manifests, so a page can't disagree with the tracker matrix or the destinations catalog. Change the manifest, not the page.

Component	Use for	Example
`<TrackerTier id="..." />`	A tracker's maintenance group, from `src/data/trackers.json`	Early release
`<IntegrationBadges id="..." />`	Who supports a destination, its status, type, delivery, and clouds, from `src/data/destinations.json`	Snowplow supportedPaid add-onEvent forwarderReal timeAWS, Azure, GCP

Put the label row first on the page, after any imports.

On tracker landing pages, put <TrackerFeatures id="..." /> after the label row. It shows the tracker's row from the tracker matrix as a list, from the same manifest:

Feature support Compare trackers

Supported: Page or screen views (Page and screen)
Partial: Activity tracking
Not supported: Built-in entities
Not supported: Anonymous tracking
Not supported: Media
Not supported: Ecommerce
Not supported: Consent
Not supported: Snowtype

<Availability> lists the platforms a feature is available on, with an optional note in a popover:

Cloud: available
Private Managed Cloud: available
Self-Hosted: not available
Add-on: not available

mdx
<Availability available={['cloud', 'pmc']} note="..." />

Version markers

<AppliesTo> marks the minimum version a feature needs. The versions come from src/data/feature-versions.json, which also renders the table on the versions and compatibility page. The build fails if a marker names a version newer than the latest release in src/componentVersions.js.

Applies to Enrich 6.9.0+Latest: 6.14.1

mdx
<AppliesTo feature="asn-lookup-enrichment" />
<AppliesTo component="snowbridge" since="6.0.0" />

Code and steps

Code groups and steps keep multi-part instructions readable without hand-built markup.

Code groups

<CodeGroup> shows the same example in several languages, with the tabs in the code header. The reader's choice is remembered across the site for the same groupId. Each tab is labeled with the block's title, or its language.

Browser
Android

js
import { newTracker } from '@snowplow/browser-tracker';
newTracker('sp', '{{collector_url}}', { appId: 'my-app' });

kotlin
Snowplow.createTracker(context, "sp", "{{collector_url}}")

mdx
<CodeGroup>

```js title="Browser"
...
```

```kotlin title="Android"
...
```

</CodeGroup>

Steps

<Steps> draws a numbered rail. Write each step as a ### heading inside it, so every step can be linked to, appears in the table of contents, and is kept in the Markdown copy. Don't number the headings yourself.

Install the tracker

Add the package to your project.

Create a tracker

Call newTracker with your Collector URL.

mdx
<Steps>

### Install the tracker

Add the package to your project.

### Create a tracker

Call `newTracker` with your Collector URL.

</Steps>

Tables

Both table components render plain HTML tables, so the Markdown copy keeps every row.

Parameter tables

<ParamTable> documents configuration options and function arguments. Columns with no values, such as since, are left out. Each row has an anchor, #param-<name>.

Name	Type	Required	Default	Since	Description
`appId`	`string`	Required	None		The application ID, sent as `app_id` on every event.
`eventMethod`	`'post' \| 'get'`	Optional	`post`		How the tracker sends events.
`useClientSideDetection`	`boolean`	Optional	`false`	6.10.0	Use the bot detection result sent by the tracker.

mdx
<ParamTable>
  <Param name="appId" type="string" required>
    The application ID.
  </Param>
  <Param name="eventMethod" type="'post' | 'get'" default="post" since="3.0.0">
    How the tracker sends events.
  </Param>
</ParamTable>

Feature matrices

<FeatureMatrix> renders comparison tables for catalog hubs, with optional filters that write to the query string. The tracker matrix on the sources overview reads src/data/trackers.json, and the destinations catalog reads src/data/destinations.json. Edit the manifest, not the page, to change a row.

Cell values are true, false, "partial", a string, or { "value": ..., "note": "..." }.

Page furniture

Two components appear on every doc page without being added to the MDX. Neither needs any front matter.

Page actions: the Copy page button and its menu, in the page header. The menu has View as Markdown, Download Markdown, Open in Claude, and Open in ChatGPT. Copy MCP URL appears once customFields.docsMcpUrl is set.
Feedback: "Was this page helpful?" at the end of each page under /docs/. Answers are sent as Snowplow structured events (category docs, action page_feedback), only when the reader has allowed analytics cookies.

Set layout: home in front matter for a landing page with no breadcrumbs, page actions, table of contents, or feedback. The docs home uses it.

Cards and buttons​

Card variants​

Link card

Quickstart card

Product card

Compact card

Buttons​

Badges and version markers​

Badge types​

Support tier labels​

Version markers​

Code and steps​

Code groups​

Steps​

Install the tracker​

Create a tracker​

Tables​

Parameter tables​

Feature matrices​

Page furniture​