SaaS · React
Customer support inbox
Product site for a shared support inbox with a ticket queue mock, features, setup steps, pricing and FAQ.
What you get
An editorial product site for a shared customer support inbox: a ticket queue mock, features, a saved replies split, three steps, monthly per-agent pricing, quotes and an 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": "Quayside", "nav": [ { "label": "Features", "href": "#features" }, { "label": "Saved replies", "href": "#replies" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Try Quayside", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "editorial", "eyebrow": "Shared support inbox", "title": "Every customer email, answered once, by the right person.", "text": "Quayside turns support@ into a shared queue. Assign conversations, see who's replying, and keep customer history next to every message.", "primary": { "label": "Start a free trial", "href": "#start" }, "secondary": { "label": "See pricing", "href": "#pricing" }, "visual": { "type": "mock", "title": "Support · Open (14)", "rows": [ { "label": "Refund for order #20418 · Jess Moreau", "value": "Waiting 2 h", "tone": "#b91c1c" }, { "label": "Can I change my delivery address?", "value": "Assigned to Omar", "tone": "#0369a1" }, { "label": "Bulk pricing for 40 units", "value": "Sales · tagged", "tone": "#0369a1" }, { "label": "Login link not arriving", "value": "Lucia is replying…", "tone": "#b45309" }, { "label": "Thanks, all sorted!", "value": "Closed", "tone": "#047857" } ], "footer": "Median first reply today: 38 min" } }, { "kind": "features", "id": "features", "eyebrow": "Features", "title": "Shared inbox basics, done properly", "columns": 3, "items": [ { "title": "Assignment and ownership", "text": "Assign manually or round-robin. Every conversation has exactly one owner.", "icon": "users" }, { "title": "Collision detection", "text": "See when a teammate is viewing or typing, so customers never get two answers.", "icon": "bolt" }, { "title": "Internal notes", "text": "Mention a colleague inside a conversation without the customer seeing it.", "icon": "book" }, { "title": "Customer history", "text": "Past conversations and order details from your store, beside every message.", "icon": "home" }, { "title": "Email, chat and forms", "text": "Connect your support address, a website chat widget and contact forms.", "icon": "mail" }, { "title": "Reports that help", "text": "First reply time, resolution time and volume by tag, per week or per person.", "icon": "chart" } ] }, { "kind": "split", "id": "replies", "eyebrow": "Saved replies", "title": "Answer common questions in seconds, still in your own voice", "text": "Write a reply once, insert it with a shortcut, and personalise it before sending. Placeholders fill in names and order numbers.", "bullets": [ "Shared library with folders and search", "Usage counts show which answers need a help article", "Suggested replies based on tags" ], "visual": { "type": "card", "tone": "#0c4a6e", "title": "/refund-started", "lines": [ "Hi {first_name}, your refund for", "order {order_id} is on its way", "Used 212 times this month" ] } }, { "kind": "steps", "eyebrow": "Getting started", "title": "Set up in an afternoon", "items": [ { "title": "Forward your support address", "text": "Point support@ at Quayside. Your customers won't notice a thing." }, { "title": "Invite your team", "text": "Add agents, set working hours and decide how conversations are assigned." }, { "title": "Connect your store", "text": "Show orders and customer details next to each conversation." } ] }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Per agent, per month", "text": "Billed monthly. Viewers who only read and leave notes are free.", "plans": [ { "name": "Basic", "price": "$15", "period": "/agent/month", "text": "One inbox, small team.", "features": [ "1 shared inbox", "Assignment and notes", "Saved replies" ], "cta": { "label": "Start Basic", "href": "#start" } }, { "name": "Standard", "price": "$29", "period": "/agent/month", "text": "For most support teams.", "features": [ "5 inboxes", "Chat widget", "Store integration", "Reports" ], "featured": true, "cta": { "label": "Try Standard for 14 days", "href": "#start" } }, { "name": "Plus", "price": "$45", "period": "/agent/month", "text": "For larger or multi-brand teams.", "features": [ "Unlimited inboxes", "Workflow rules", "Service-level targets", "API access" ], "cta": { "label": "Start Plus", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "Support teams", "title": "What changed after the switch", "items": [ { "quote": "We used to have three people answering the same email. That stopped on day one.", "name": "Fiona C.", "role": "Head of customer care" }, { "quote": "Seeing the order next to the message saves me a tab and a minute on every ticket.", "name": "Omar S.", "role": "Support agent" }, { "quote": "The saved reply counts told us which help articles to write first.", "name": "Greta N.", "role": "Support lead" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions from support leads", "items": [ { "q": "Do customers see a different address?", "a": "No. Replies go out from your own support address with your signature." }, { "q": "Can we import old conversations?", "a": "Yes, from your current mailbox or another help desk's CSV export." }, { "q": "Is there a limit on conversations?", "a": "No. Pricing is per agent, not per ticket." } ] }, { "kind": "cta", "id": "start", "title": "Give support@ a proper home", "text": "14-day free trial, then pick a plan. Bring your whole team in on the first day.", "primary": { "label": "Choose a plan", "href": "#pricing" }, "secondary": { "label": "See saved replies", "href": "#replies" } } ], "footer": { "text": "Shared inbox and help desk for small support teams.", "columns": [ { "title": "Product", "links": [ "Shared inbox", "Chat widget", "Reports" ] }, { "title": "Company", "links": [ "About", "Contact", "Status" ] } ], "legal": "© Quayside. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Customer support inbox's files. The box is already started for you: finish “Start from Customer support inbox 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
Error monitoring
Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.
Product analytics
Crisp site for a product analytics tool with a funnel mock, retention features, event pricing and FAQ.
- Featured
SaaS starter
Marketing pages, sign-in and sign-up screens, and an authenticated app area with a mocked session you replace with real auth.
Build on Customer support inbox
Create a free account, start from this template, and ask the AI agent to turn it into your app.