Event
A page for a one-day conference (Småstad Summit 2027): date and tickets up front, last year in numbers, speakers, the programme, three ticket types, the venue and the practical questions. Bold violet, rounded.
npx shadcn add @klarhimmel/template-event
Install
npx shadcn add @klarhimmel/template-eventThe page
11 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 |
|---|---|---|
(none) | banner/announcement | Early-bird tickets end on 31 January. |
#top | header/simple | Småstad Summit |
#hero | hero/frame | One day for people who build things in small towns |
#numbers | stats/row | Last year in numbers |
#speakers | team/list | Four of the twelve speakers |
#programme | steps/timeline | The day, hour by hour |
#tickets | pricing/tiers | Pick a ticket |
#venue | contact/offices | Where to find us |
#faq | faq/accordion | Before you buy |
#join | cta/banner | Join us in Jönköping |
(none) | footer/link-columns | Småstad Summit |
Install
CLI
npx shadcn add @klarhimmel/template-eventpnpm
pnpm dlx shadcn@latest add @klarhimmel/template-event- 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/event/). They are artwork, not photographs: replace the `media.src` values with your own photos.
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.