Product and manufacturing company
A multi-page site for a 15 to 60 person product or manufacturing company: home, products, one product in detail with specifications, references, about with history and people, careers, and a quote request. Neutral copy with variables, built only from blocks Canvas can edit.
npx shadcn add @klarhimmel/template-manufacturing
Install
npx shadcn add @klarhimmel/template-manufacturingPages in this template
Each opens its live demo; links between the pages work inside it.
Page 1 of 7
Home (/)
home. 10 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/split | Components built to last, delivered on time |
#customers | logo-cloud/row | Supplier to industry across the region |
#ranges | features/grid | What we make |
#why | features/alternating | Three things our customers rely on |
#facts | stats/row | The company in numbers |
#references | logo-cloud/results | What customers have achieved with us |
#quote | testimonials/quote | [client quote] |
#cta | cta/split | Send us your drawing |
#footer | footer/link-columns | Nordic Components AB |
Page 2 of 7
Products (/products/)
services. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/minimal | A range for most needs, and production for the rest |
#families | features/grid | Six families |
#compare | pricing/comparison | Choose a series |
#faq | faq/accordion | Ordering |
#cta | cta/banner | Not sure which product you need? |
#footer | footer/link-columns | Nordic Components AB |
Page 3 of 7
Product (/products/product-name/)
service-detail. 8 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/split | [product name] |
#features | features/list | Built for the long run |
#specs | docs/table | Specifications |
#gallery | gallery/strip | Where it is used |
#faq | faq/accordion | About this product |
#cta | cta/card | Ask for a quote on this product |
#footer | footer/link-columns | Nordic Components AB |
Page 4 of 7
References (/references/)
cases. 8 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/minimal | Who we make things for |
#case | case-study/metrics | A part redesigned for half the cost |
#more | case-study/card | Other work |
#sectors | logo-cloud/grouped | Across industries |
#voices | testimonials/split | In their words |
#cta | cta/banner | Be our next reference |
#footer | footer/link-columns | Nordic Components AB |
Page 5 of 7
About us (/about/)
about. 8 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/minimal | A factory in Jönköping |
#story | content/columns | Why we still make things here |
#facts | stats/split | The factory |
#history | content/timeline | Our history in short |
#people | team/departments | Who you will meet |
#cta | cta/card | Come and see the factory |
#footer | footer/link-columns | Nordic Components AB |
Page 6 of 7
Careers (/careers/)
careers. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/minimal | Make things that matter |
#why | features/grid | What it is like here |
#roles | blog/list | Join us |
#process | steps/timeline | How we hire |
#cta | cta/card | Send an open application |
#footer | footer/link-columns | Nordic Components AB |
Page 7 of 7
Contact (/contact/)
contact. 6 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/utility | Nordic Components AB |
#hero | hero/minimal | Request a quote |
#message | contact/form | Tell us what you need |
#channels | contact/channels | Talk to a person |
#visit | contact/map | The factory |
#footer | footer/link-columns | Nordic Components AB |
Install
CLI
npx shadcn add @klarhimmel/template-manufacturingpnpm
pnpm dlx shadcn@latest add @klarhimmel/template-manufacturing- 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.
Copy
Every string is neutral placeholder text, and the company name, city and contact details are placeholders too. Replace them with the company's own.
Links
Links to the template's own pages (`/services/`, `/contact/`) are plain paths: point them at your router. Links to https://example.com are placeholders.
Forms
Set `action` on the contact form and the booking panel (it is `/replace-with-your-endpoint` now). With `method: 'post'` they submit natively, with no JavaScript. The live demo never submits.
Images
Image slots are empty and carry a description (alt text): add photographs of the company's own work, people and premises.
Style
Uses the default Klarhimmel palette, Geist fonts, radius and spacing. Import theme.css after Tailwind.