Ecommerce · React
Bicycle shop
Bike shop storefront with gravel and city bikes, parts, service plans, workshop hours and group rides.
What you get
A site for a local bike shop: a split hero showing the workshop's week, bikes, components and accessories with a cart, service pricing, delivery and returns, rider quotes, workshop hours and a ride-list sign-up. 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": "Spoke & Gravel", "nav": [ { "label": "Shop", "href": "#shop" }, { "label": "Service", "href": "#service" }, { "label": "Workshop", "href": "#workshop" }, { "label": "Rides", "href": "#contact" } ], "navCta": { "label": "Book a service", "href": "#service" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Bike shop and workshop · Boulder, CO", "title": "Bikes for gravel, commuting and everything in between.", "text": "We sell a short list of bikes we ride ourselves, keep common parts in stock and fix most bikes within three days.", "primary": { "label": "Shop bikes", "href": "#shop" }, "secondary": { "label": "Book a service", "href": "#service" }, "visual": { "type": "mock", "title": "Workshop this week", "rows": [ { "label": "Full tune · gravel bike", "value": "Ready Tue", "tone": "#047857" }, { "label": "Wheel true + new tubeless", "value": "In progress", "tone": "#b45309" }, { "label": "Commuter hub service", "value": "In progress", "tone": "#b45309" }, { "label": "Next open slot", "value": "Thu 10:00", "tone": "#dc2626" } ], "footer": "Average turnaround: 3 working days" } }, { "kind": "products", "id": "shop", "eyebrow": "Shop", "title": "Bikes, parts and kit", "text": "Every bike is built, fitted and test-ridden in our workshop before it leaves.", "currency": "$", "items": [ { "name": "Fieldline Gravel", "price": 1890, "category": "Bikes", "tone": "#7f1d1d", "text": "Steel frame, 2x11 drivetrain, 45 mm tyre clearance.", "badge": "Bestseller" }, { "name": "Fieldline Frameset", "price": 1150, "category": "Bikes", "tone": "#44403c", "text": "Frame, fork and headset for your own build." }, { "name": "Commuter 8", "price": 1290, "category": "Bikes", "tone": "#1f2937", "text": "8-speed hub, dynamo lights, rack mounts.", "badge": "New" }, { "name": "Kids' 20\" Trail", "price": 449, "category": "Bikes", "tone": "#9a3412", "text": "Light alloy frame for ages 6 to 9." }, { "name": "Alloy gravel wheelset", "price": 520, "category": "Components", "tone": "#292524", "text": "Tubeless-ready, 1,640 g.", "badge": "Low stock" }, { "name": "700x40 gravel tyre", "price": 62, "category": "Components", "tone": "#3f3f3a", "text": "Fast centre tread, tubeless-ready." }, { "name": "Tubeless kit", "price": 48, "category": "Components", "tone": "#57534e", "text": "Tape, valves and 120 ml sealant." }, { "name": "Frame bag", "price": 85, "category": "Accessories", "tone": "#365314", "text": "Waterproof, fits most medium frames." }, { "name": "USB-C light set", "price": 65, "category": "Accessories", "tone": "#78716c", "text": "400 lumen front, 40 lumen rear.", "badge": "New" }, { "name": "Mini pump", "price": 32, "category": "Accessories", "tone": "#4a3f35", "text": "Presta and Schrader, up to 100 psi." } ] }, { "kind": "pricing", "id": "service", "eyebrow": "Workshop", "title": "Service prices, parts extra", "text": "Drop off any weekday morning or book a slot online. We call before doing any work over the quote.", "plans": [ { "name": "Safety check", "price": "$45", "text": "For bikes that just need a once-over.", "features": [ "Brake and gear adjustment", "Tyre pressure and wear check", "Bolt torque check" ], "cta": { "label": "Book a check", "href": "#contact" } }, { "name": "Full tune", "price": "$120", "text": "Our most booked service, done in 2 to 3 days.", "features": [ "Everything in Safety check", "Wheels trued, hubs adjusted", "Drivetrain cleaned and lubed", "Cables replaced if needed" ], "featured": true, "cta": { "label": "Book a full tune", "href": "#contact" } }, { "name": "Overhaul", "price": "$260", "text": "Every bearing out, cleaned and regreased.", "features": [ "Everything in Full tune", "Full strip and rebuild", "Headset and bottom bracket service", "Free safety check in 3 months" ], "cta": { "label": "Book an overhaul", "href": "#contact" } } ] }, { "kind": "features", "eyebrow": "Delivery & returns", "title": "Buying online from us", "columns": 4, "items": [ { "title": "Free pickup", "text": "Collect from the shop, built and adjusted to your fit, at no charge.", "icon": "home" }, { "title": "US shipping", "text": "Parts ship in 1 to 3 days, free over $75. Bikes ship 90% built for $95.", "icon": "truck" }, { "title": "30-day returns", "text": "Unused parts and accessories come back for a full refund within 30 days.", "icon": "box" }, { "title": "Free first check", "text": "Every bike bought here gets a free safety check within the first year.", "icon": "wrench" } ] }, { "kind": "quotes", "eyebrow": "Riders", "title": "From the Saturday ride", "items": [ { "quote": "They talked me out of a carbon bike I didn't need. The steel Fieldline is perfect for what I ride.", "name": "Kelsey M.", "role": "Fieldline owner" }, { "quote": "Dropped my commuter off Monday morning, had it back Tuesday after work. Shifting is perfect.", "name": "Andre P.", "role": "Daily commuter" }, { "quote": "The no-drop Saturday ride is the friendliest group in town. Nobody gets left behind.", "name": "Hana T.", "role": "Ride regular" } ] }, { "kind": "hours", "id": "workshop", "eyebrow": "Visit", "title": "Shop and workshop hours", "text": "Free air and a floor pump outside, any time.", "rows": [ { "day": "Monday – Friday", "time": "8:00 – 18:00" }, { "day": "Saturday", "time": "9:00 – 16:00" }, { "day": "Sunday", "time": "Closed (group ride 8:00)" } ], "address": "1840 Pearl Street, Boulder, CO", "phone": "(303) 555-0187", "email": "workshop@spokeandgravel.com" }, { "kind": "cta", "title": "Join the Saturday ride list", "text": "A free, no-drop 30-mile gravel loop every Saturday. Sign up for the weekly route email and shop news.", "primary": { "label": "Get the route email", "href": "#contact" }, "secondary": { "label": "See service prices", "href": "#service" } }, { "kind": "contact", "eyebrow": "Book or sign up", "title": "Book a service or join the ride list", "text": "Tell us what your bike needs and when you can drop it off, or just leave your email for the weekly ride route.", "fields": [ "name", "email", "phone", "date", "message" ], "button": "Send" } ], "footer": { "text": "Bikes, parts and a busy workshop on Pearl Street.", "columns": [ { "title": "Shop", "links": [ "Bikes", "Components", "Accessories" ] }, { "title": "Workshop", "links": [ "Service prices", "Bike fitting", "Saturday ride" ] } ], "legal": "© Spoke & Gravel. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Bicycle shop's files. The box is already started for you: finish “Start from Bicycle 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 Bicycle shop
Create a free account, start from this template, and ask the AI agent to turn it into your app.