App launch
A pre-launch page for an app (Lumo, a reading tracker): a hero that shows the product, features, a walkthrough with a phone screen, one beta quote and the waitlist. Crisp mint green on white.
npx shadcn add @klarhimmel/template-app-launch
Install
npx shadcn add @klarhimmel/template-app-launchThe page
8 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 | Lumo |
#hero | hero/prompt | Remember every book you have ever meant to finish |
#features | features/bento | A shelf that remembers for you |
#how | steps/media | From book to remembered in a minute |
#proof | testimonials/quote | I have kept a reading diary for twenty years and Lumo is the first thing that feels like… |
#waitlist | newsletter/card | Be one of the first 500 |
#faq | faq/accordion | Before you sign up |
(none) | footer/wordmark | Lumo |
Install
CLI
npx shadcn add @klarhimmel/template-app-launchpnpm
pnpm dlx shadcn@latest add @klarhimmel/template-app-launch- 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.
Images
The illustrations ship with the template (public/klarhimmel/art/app-launch/). They are artwork, not photographs: replace the `media.src` values with your own photos.
Forms
Set `action` on the waitlist card (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.