caliper uidocs

Docs sidebar

Pro

Documentation navigation and an on-page outline.

Installs components/ui/docs-sidebar.tsxDepends on lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/docs-sidebar

Data grid

Overview

Documentation text that is long enough for the outline on the right to follow your reading position as you scroll. Overview explains one idea at a time, with a short example and a note on edge cases.

Keep paragraphs short, show the code, and link to related pages rather than repeating them.

Install

Documentation text that is long enough for the outline on the right to follow your reading position as you scroll. Install explains one idea at a time, with a short example and a note on edge cases.

Keep paragraphs short, show the code, and link to related pages rather than repeating them.

With npm

Documentation text that is long enough for the outline on the right to follow your reading position as you scroll. With npm explains one idea at a time, with a short example and a note on edge cases.

Keep paragraphs short, show the code, and link to related pages rather than repeating them.

With pnpm

Documentation text that is long enough for the outline on the right to follow your reading position as you scroll. With pnpm explains one idea at a time, with a short example and a note on edge cases.

Keep paragraphs short, show the code, and link to related pages rather than repeating them.

Use it

Documentation text that is long enough for the outline on the right to follow your reading position as you scroll. Use it explains one idea at a time, with a short example and a note on edge cases.

Keep paragraphs short, show the code, and link to related pages rather than repeating them.

Props

Documentation text that is long enough for the outline on the right to follow your reading position as you scroll. Props explains one idea at a time, with a short example and a note on edge cases.

Keep paragraphs short, show the code, and link to related pages rather than repeating them.

When to use #

Use it for

  • Documentation sites.

Skip it when

  • Application navigation.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/docs-sidebar

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from DocsSidebar and PageOutline.

example.tsx
import { DocsSidebar, PageOutline } from "@/components/ui/docs-sidebar"

The worked example comes with Pro

The 49-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

DocsSidebar

component
PropTypeDefault
sections *readonly DocsSection[]—
activeId *string—
onNavigate *(id: string) => void—
classNamestring—

PageOutline

component
PropTypeDefaultDescription
headings *readonly OutlineHeading[]—
scrollRootRefObject<HTMLElement | null>—The scrolling container, if the page scrolls inside one.
classNamestring—

Accessibility #

It exposes status semantics, with aria-label, aria-hidden, aria-labelledby and aria-current kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.