Ecommerce · React
Loose-leaf tea shop
Estate tea storefront with Darjeeling, Assam and Nilgiri teas, a brewing guide, delivery terms and a letter.
What you get
A storefront for a loose-leaf tea company: a split hero announcing the first flush, black, green, oolong and herbal teas with prices, a brewing guide, delivery and returns, customer quotes and a tasting-notes newsletter. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Dhara Tea Co.", "nav": [ { "label": "Teas", "href": "#teas" }, { "label": "Brewing", "href": "#brew" }, { "label": "Delivery", "href": "#delivery" }, { "label": "Newsletter", "href": "#contact" } ], "navCta": { "label": "Shop teas", "href": "#teas" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Loose-leaf tea from small Indian gardens", "title": "Tea bought from the garden, not the auction.", "text": "We buy directly from nine gardens in Darjeeling, Assam, the Nilgiris and Kangra, and pack every tea in Siliguri within weeks of plucking.", "primary": { "label": "Shop teas", "href": "#teas" }, "secondary": { "label": "Brewing guide", "href": "#brew" }, "visual": { "type": "card", "tone": "#3f5212", "title": "First flush 2026 has arrived", "lines": [ "Plucked in March and April", "Only 120 kg this season", "Packed in nitrogen-flushed tins" ] }, "note": "Free shipping across India on orders over ₹1,200." }, { "kind": "stats", "items": [ { "value": "9", "label": "Gardens we buy from directly" }, { "value": "4", "label": "Weeks from plucking to packing" }, { "value": "100 g", "label": "Makes about 40 cups" }, { "value": "2017", "label": "Year we packed our first tin" } ] }, { "kind": "products", "id": "teas", "eyebrow": "Shop", "title": "This season's teas", "text": "Prices are for a 100 g tin. Refill pouches cost ₹60 less.", "currency": "₹", "items": [ { "name": "Darjeeling First Flush 2026", "price": 780, "category": "Black", "tone": "#6b5a1e", "text": "Muscat grape, spring flowers, light body.", "badge": "New" }, { "name": "Darjeeling Second Flush", "price": 690, "category": "Black", "tone": "#7c2d12", "text": "Ripe fruit and the classic muscatel note.", "badge": "Bestseller" }, { "name": "Assam Breakfast", "price": 420, "category": "Black", "tone": "#5c2b16", "text": "Malty and brisk, takes milk well." }, { "name": "Nilgiri Frost", "price": 520, "category": "Black", "tone": "#854d0e", "text": "Winter harvest, bright and clean.", "badge": "Low stock" }, { "name": "Masala Chai", "price": 380, "category": "Black", "tone": "#9a3412", "text": "Assam with cardamom, ginger and clove.", "badge": "Bestseller" }, { "name": "Kangra Green", "price": 480, "category": "Green", "tone": "#4d7c0f", "text": "Sweet, grassy, slightly nutty." }, { "name": "Sikkim Green Pearls", "price": 560, "category": "Green", "tone": "#3f6212", "text": "Hand-rolled, unfurl in the cup." }, { "name": "Darjeeling Oolong", "price": 840, "category": "Oolong", "tone": "#713f12", "text": "Honey, stone fruit, a long finish." }, { "name": "Himalayan Ruby Oolong", "price": 920, "category": "Oolong", "tone": "#7c2d12", "text": "Deeply oxidised, cocoa and raisin." }, { "name": "Tulsi Ginger", "price": 340, "category": "Herbal", "tone": "#365314", "text": "Caffeine-free, warming, good after dinner." } ] }, { "kind": "steps", "id": "brew", "eyebrow": "Brewing guide", "title": "How to brew loose leaf without fuss", "items": [ { "title": "Measure", "text": "One heaped teaspoon, about 2.5 g, per 200 ml cup." }, { "title": "Heat the water", "text": "Just off the boil for black tea, 80°C for green, 90°C for oolong." }, { "title": "Steep and taste", "text": "3 minutes for black, 2 for green, 3 to 4 for oolong. Taste and adjust next time." }, { "title": "Brew again", "text": "Oolong and green leaves give two or three good infusions. Add 30 seconds each time." } ] }, { "kind": "features", "id": "delivery", "eyebrow": "Delivery & returns", "title": "Shipping across India", "columns": 2, "items": [ { "title": "Free over ₹1,200", "text": "₹70 below that. Metro cities in 2 to 4 days, elsewhere in 4 to 7 days.", "icon": "truck" }, { "title": "Sealed for freshness", "text": "Tins are nitrogen-flushed and sealed. Best within 12 months of packing.", "icon": "leaf" }, { "title": "Didn't enjoy it?", "text": "Tell us within 15 days and we'll send a different tea of the same price, once per order.", "icon": "cup" }, { "title": "Damaged tins", "text": "Send a photo within 7 days of delivery and we'll replace it free.", "icon": "box" } ] }, { "kind": "quotes", "eyebrow": "Customers", "title": "Cups worth writing about", "items": [ { "quote": "The first flush tastes like the hills the morning after rain. I ration it till the next season.", "name": "Ananya G.", "role": "Kolkata" }, { "quote": "Their Assam is the only one strong enough for my father's chai. He has stopped buying the supermarket box.", "name": "Rohit V.", "role": "Pune" }, { "quote": "I emailed asking which green to start with and got a thoughtful reply from someone who clearly drinks it.", "name": "Meghna D.", "role": "Bengaluru" } ] }, { "kind": "cta", "title": "Tasting notes, once a month", "text": "When each flush arrives, a note from the garden and how we brew it. Subscribers get first access to small lots.", "primary": { "label": "Subscribe", "href": "#contact" }, "secondary": { "label": "Shop teas", "href": "#teas" } }, { "kind": "contact", "eyebrow": "Newsletter", "title": "Join the tasting notes", "text": "One email a month. Wholesale and café enquiries are welcome too.", "fields": [ "name", "email", "message" ], "button": "Subscribe" } ], "footer": { "text": "Loose-leaf tea bought directly from Indian gardens, packed in Siliguri.", "columns": [ { "title": "Teas", "links": [ "Black", "Green", "Oolong", "Herbal" ] }, { "title": "Help", "links": [ "Delivery", "Brewing guide", "Wholesale" ] } ], "legal": "© Dhara Tea Co.. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Loose-leaf tea shop's files. The box is already started for you: finish “Start from Loose-leaf tea shop and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Coffee roaster shop
Dark storefront for a specialty roaster with single origins, a subscription, brew gear and shipping info.
- Featured
Ecommerce storefront
A product catalog with category filters and search, product detail view, and a cart kept in local state.
Sneaker store
Dark sneaker storefront with a filterable catalog, a resole service, drop sign-ups and a working cart.
Build on Loose-leaf tea shop
Create a free account, start from this template, and ask the AI agent to turn it into your app.