WebberUI

Recipe Collection

Recipe content site: featured recipe cards, step-page mock-up, ingredient list, category browsing.

ProContentfood6 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/recipe-collection.json?t=<install token>"

The whole page lands in app/templates/recipe-collection/. 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. 1

    Nav Bar and Recipe of the Week

    A hero pairing the top nav bar with this week's featured recipe, complete with dish info badges and a gradient plate visual.

    hero
  2. 2

    Browse by Category

    A grid of colour-gradient cards sorted by taste, guiding visitors through breakfast, home cooking, baking, and vegetarian.

    gallery
  3. 3

    Recipe Index

    A recipe card grid that filters live by category, with ratings, cook time, servings, and a save interaction.

    menu
  4. 4

    Cook Along

    A single-recipe walkthrough with a checkable ingredient list and numbered step cards on a timeline.

    content
  5. 5

    Kitchen Letter Sign-Up

    A dark newsletter block with an email form, a submitted-successfully state, and subscriber-count social proof.

    form
  6. 6

    Footer

    Brand tagline, explore and support link columns, plus copyright and social icons.

    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 →