Developer docs
A documentation landing page for a developer product (Lodestar, an API for maps): the install command above the fold, a real terminal session, a three-step quickstart with copyable code, the guides, the latest releases and who builds on it. Near-black and green, monospaced, dense.
npx shadcn add @klarhimmel/template-developer-docs
Install
npx shadcn add @klarhimmel/template-developer-docsThe page
9 sections, in order
Each section is one block with this template's own copy. The anchor is the id in-page links point at.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Lodestar |
#hero | hero/install | Maps, routes and places in one API |
#demo | features/terminal | From install to a route in one terminal |
#quickstart | steps/numbered | Your first request in three steps |
#guides | features/grid | Learn the parts you need |
#changelog | content/timeline | What shipped lately |
#used-by | logo-cloud/row | Built on Lodestar |
#start | cta/banner | Get a key and make your first call |
#footer | footer/link-columns | Lodestar |
Install
CLI
npx shadcn add @klarhimmel/template-developer-docspnpm
pnpm dlx shadcn@latest add @klarhimmel/template-developer-docs- Klarhimmel
- Geist / Geist
- radius 8
- Needs
- React 19, Tailwind CSS v4 and the theme import. The page and every block it uses land under components/klarhimmel/.
Before you ship
Wire these before shipping
The template is a finished page with placeholder wiring. These are yours to connect.
Links
`#section` links jump within the page. Links to https://example.com are placeholders: point them at your own pages.
Forms
Set `action` on the footer newsletter (it is `/replace-with-your-endpoint` now). With `method: 'post'` the form submits natively, with no JavaScript. The live demo never submits.
Style
Uses the default Klarhimmel palette, Geist fonts, radius and spacing. Import theme.css after Tailwind.