Ecommerce · React
Skincare shop
Calm skincare storefront with a routine builder, ingredient FAQ, delivery details and a product catalog.
What you get
A shop for a small skincare label: a centred hero with a sample routine, a catalog of cleansers, serums and moisturisers, a three-step routine guide, delivery and returns, reviews and an ingredient FAQ. 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": "Fern & Field", "nav": [ { "label": "Shop", "href": "#shop" }, { "label": "Routine", "href": "#routine" }, { "label": "Delivery", "href": "#delivery" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Shop skincare", "href": "#shop" }, "sections": [ { "kind": "hero", "variant": "center", "eyebrow": "Small-batch skincare · Made in Bristol", "title": "Fewer products, chosen for your skin.", "text": "Gentle cleansers, a handful of well-studied actives and moisturisers that sink in. Fragrance-free unless the label says otherwise.", "primary": { "label": "Shop the range", "href": "#shop" }, "secondary": { "label": "Build a routine", "href": "#routine" }, "visual": { "type": "mock", "title": "Morning routine · dry, sensitive skin", "rows": [ { "label": "1. Oat Milk Cleanser", "value": "£18", "tone": "#9f1239" }, { "label": "2. 10% Niacinamide Serum", "value": "£21", "tone": "#7c4a3a" }, { "label": "3. Barrier Repair Cream", "value": "£28", "tone": "#6b4f3a" }, { "label": "4. Daily Mineral SPF 30", "value": "£26", "tone": "#a16207" } ], "footer": "Routine total £93 · lasts about 10 weeks" } }, { "kind": "products", "id": "shop", "eyebrow": "Shop", "title": "The full range", "text": "Every formula lists its full ingredients and its pH on the box.", "currency": "£", "items": [ { "name": "Oat Milk Cleanser", "price": 18, "category": "Cleanse", "tone": "#8c5a4f", "text": "Low-foam gel for dry and sensitive skin, 150 ml.", "badge": "Bestseller" }, { "name": "Green Clay Cleansing Balm", "price": 24, "category": "Cleanse", "tone": "#5f6b4e", "text": "Melts sunscreen and make-up, rinses clean." }, { "name": "Cleanser refill pouch", "price": 16, "category": "Cleanse", "tone": "#78716c", "text": "250 ml refill for the Oat Milk Cleanser." }, { "name": "Rosehip Facial Oil", "price": 32, "category": "Treat", "tone": "#9f1239", "text": "Cold-pressed rosehip and squalane, 30 ml." }, { "name": "10% Niacinamide Serum", "price": 21, "category": "Treat", "tone": "#7c4a3a", "text": "For oil, redness and uneven tone, 30 ml.", "badge": "New" }, { "name": "Barrier Repair Cream", "price": 28, "category": "Moisturise", "tone": "#6b4f3a", "text": "Ceramides and cholesterol, 50 ml.", "badge": "Bestseller" }, { "name": "Daily Mineral SPF 30", "price": 26, "category": "Moisturise", "tone": "#a16207", "text": "Zinc oxide only, light tint, 50 ml.", "badge": "Low stock" }, { "name": "Overnight Recovery Mask", "price": 30, "category": "Moisturise", "tone": "#57534e", "text": "Thick sleeping mask for winter skin." }, { "name": "Hand & Nail Balm", "price": 14, "category": "Body", "tone": "#854d0e", "text": "Shea and calendula in a 40 g tin." }, { "name": "Body Oil · Fig & Cedar", "price": 27, "category": "Body", "tone": "#4a3f35", "text": "Lightly scented, absorbs in a minute." } ] }, { "kind": "steps", "id": "routine", "eyebrow": "Build a routine", "title": "Three steps is usually enough", "items": [ { "title": "Cleanse", "text": "Once at night, or twice if you wear sunscreen or make-up. Skip harsh scrubs." }, { "title": "Treat", "text": "Pick one active for your main concern and give it eight weeks before you judge it." }, { "title": "Moisturise and protect", "text": "Moisturiser at night, SPF every morning, even when it is grey outside." } ] }, { "kind": "features", "id": "delivery", "eyebrow": "Delivery & returns", "title": "Delivery, returns and refills", "columns": 2, "items": [ { "title": "Free UK delivery over £35", "text": "Royal Mail Tracked 48 for £3.50 below that. Orders before 1 pm leave the same day.", "icon": "truck" }, { "title": "Returns within 30 days", "text": "Unopened products come back free. If an opened product disagrees with your skin, tell us and we will sort it out.", "icon": "heart" }, { "title": "Refills and recycling", "text": "Send back five empty bottles with our free label and we take 15% off your next order.", "icon": "leaf" }, { "title": "Ask before you buy", "text": "Our team replies to skin questions within one working day, Monday to Friday.", "icon": "mail" } ] }, { "kind": "quotes", "eyebrow": "Reviews", "title": "What customers notice first", "items": [ { "quote": "The first cleanser that doesn't leave my cheeks tight. I've stopped buying anything else.", "name": "Hannah W.", "role": "Dry, sensitive skin" }, { "quote": "I liked that they talked me out of buying three serums at once. One was plenty.", "name": "Aisha M.", "role": "First order" }, { "quote": "The SPF actually works under make-up without pilling. That alone keeps me coming back.", "name": "Chloe P.", "role": "Daily SPF user" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions about ingredients", "items": [ { "q": "Should I patch test?", "a": "Yes, especially with actives. Apply a small amount behind the ear for two evenings before using it on your face." }, { "q": "Are the products vegan?", "a": "Everything except the Hand & Nail Balm, which contains beeswax. The full ingredient list is on each product." }, { "q": "How long does a bottle last?", "a": "Used daily, a 30 ml serum lasts about two months and a 150 ml cleanser about three." }, { "q": "Can I use niacinamide with the rosehip oil?", "a": "Yes. Apply the serum first, wait a minute, then press in two or three drops of oil." } ] }, { "kind": "cta", "title": "Skin notes, once a month", "text": "Restock dates, new formulas before launch and honest advice on what not to buy. Subscribers get 10% off their first order.", "primary": { "label": "Join the list", "href": "#contact" }, "secondary": { "label": "Back to the shop", "href": "#shop" } }, { "kind": "contact", "eyebrow": "Newsletter", "title": "Join the Fern & Field list", "text": "One email a month. You can unsubscribe from any email in one click.", "fields": [ "name", "email" ], "button": "Subscribe" } ], "footer": { "text": "Small-batch skincare, made and packed in Bristol.", "columns": [ { "title": "Shop", "links": [ "Cleanse", "Treat", "Moisturise", "Body" ] }, { "title": "Help", "links": [ "Delivery", "Returns", "Refill scheme", "Contact" ] } ], "legal": "© Fern & Field. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Skincare shop's files. The box is already started for you: finish “Start from Skincare 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 Skincare shop
Create a free account, start from this template, and ask the AI agent to turn it into your app.