Coffee Roastery
Speciality coffee roaster: bean list, roasting philosophy, flavour wheel, subscription delivery.
Install
npx shadcn@latest add "https://webberui.com/r/coffee-roastery.json?t=<install token>"The whole page lands in app/templates/coffee-roastery/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Nav and Hero
A dark-roast palette nav bar over an origin-story hero and this month's featured bean bag card, with a roasting info bar beneath.
hero - 2
This Month's Bean List
Four coffee bean cards side by side, marking origin, process, altitude, a roast-level dot and price.
product - 3
Roasting Philosophy
Four numbered passages on roasting principles, closing on a pull-quote card from the head roaster.
features - 4
Flavour Map
An interactive five-axis flavour bar chart you can switch between beans, alongside the suggested brewing parameters.
stats - 5
Subscription Plans
Three monthly subscription cards — light, daily and devoted — with the middle tier styled as the recommendation.
pricing - 6
Shop Information
Shop address, opening hours and contact details, paired with a hand-drawn neighbourhood map illustration.
contact - 7
Footer
A dark footer with the brand tagline, three columns of links and the copyright and company details.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →