Recipe React Template – Trickly

About This Item

Trickly React is a recipe React template, made for food bloggers and recipe creators. It rebuilds the Trickly design as a React 18 app with Vite. Every page is a function component, and React Router moves between all 15 pages without a reload.

It looks exactly like the Trickly demo. Underneath, the recipe logic runs in React state. That covers the recipe submit form and the dark mode switch, and the page updates the moment a visitor changes an option.

Two Home Pages As Components

• Two home layouts.

Recipe Pages In React

• Recipes – a recipe grid and recipe pages with ingredients and steps.
• Recipe Categories – recipes grouped by category.
• Recipe Authors – author profiles for multi-contributor blogs.
• Recipe Submit – a form for visitors to send their own recipes.
• Shop – a shop, product details, cart and checkout.
• Blog – a blog grid and a post page.

Recipe React Template Features

• React 18 function components and hooks across 15 pages
• Vite for a fast dev server and an optimised production build
• React Router routes for every page, including the two home pages
• Cart and theme state shared through React Context
• Light and dark mode on one switch, remembered between visits
• Responsive from phones to wide screens
• Documentation for setup, structure and changes

Getting Started

First, install Node 18 or newer. Then run npm install and npm run dev to open the site locally. When it is ready, npm run build writes static files that any host can serve.

Looking for this recipe React template in another stack? Trickly also comes as HTML5, Vue, Angular and WordPress. You can get every format in the developer bundle at 20% off, or browse more Food & Restaurant React templates.

Built with React and Vite, with Varela Round and Noto Serif from Google Fonts.