Docs Starter
A documentation layout: collapsible nav, callouts, steps, copyable code and a scroll-spy table of contents with progress.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The right-hand table of contents follows your reading position with a gliding dot and a progress rail. Its semantic sections also make it a good reference for an AI generating more pages.
Installation
$ npx shadcn@latest add https://guetix.com/r/docs-starter.json
Uses the shadcn CLI. It creates components/guetix/docs-starter.tsx and installs nothing else.
Usage
example.tsx
import { DocsStarter } from "@/components/guetix/docs-starter";
export default function Example() {
return <DocsStarter />;
}
Product docsInternal handbooksAPI guides
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | — | Docs title. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Semantic sections with labelled headings, notes with role=note, pagination nav.