Restaurant
One page for a restaurant or café (Kolonien Kök): tonight's offer and hours up front, a short menu as a table, the room, a booking panel with times, and the address with opening hours.
npx shadcn add @klarhimmel/template-restaurant
Install
npx shadcn add @klarhimmel/template-restaurantThe 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 | Six-course tasting menu every Friday, 595 kr. |
#top | header/utility | Kolonien Kök |
#hero | hero/split | Dinner from the garden next door |
#idea | features/list | A short menu, changed every week |
#menu | docs/table | The menu |
#gallery | gallery/featured | Twenty seats and a view of the kitchen |
#press | testimonials/quote | The kind of small restaurant that makes you want to move to the neighbourhood. |
#book | contact/booking | Pick a time and we keep the table |
#visit | contact/offices | Majorna, five minutes from the tram |
#news | newsletter/inline | The menu on Monday |
(none) | footer/simple | Kolonien Kök |
Install
CLI
npx shadcn add @klarhimmel/template-restaurantpnpm
pnpm dlx shadcn@latest add @klarhimmel/template-restaurant- 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/restaurant/). They are artwork, not photographs: replace the `media.src` values with your own photos.
Forms
Set `action` on the booking panel and the 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.