SaaS · React
Team chat app
Friendly site for a calm team chat app with a channel mock, features, pricing, quotes and an FAQ.
What you get
A product site for a team messaging app built around threads and quiet hours: a channel list mock, features, a focus-time split, three steps, monthly per-seat 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": "Porchlight", "nav": [ { "label": "Features", "href": "#features" }, { "label": "Quiet hours", "href": "#focus" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Start a workspace", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "center", "eyebrow": "Team chat, at a calmer pace", "title": "A team chat that respects the end of the day.", "text": "Threads by default, a daily digest instead of a hundred pings, and quiet hours that everyone can see. Talk when it matters, catch up when it suits you.", "primary": { "label": "Start a free workspace", "href": "#start" }, "secondary": { "label": "How quiet hours work", "href": "#focus" }, "visual": { "type": "mock", "title": "Riverbend Design · Channels", "rows": [ { "label": "# general", "value": "2 new threads", "tone": "#c2410c" }, { "label": "# client-harlow-rebrand", "value": "Decision needed", "tone": "#b45309" }, { "label": "# product-launch-june", "value": "5 unread", "tone": "#c2410c" }, { "label": "@ Nadia Osei", "value": "Quiet until 9:00", "tone": "#a8a29e" }, { "label": "# random", "value": "Up to date", "tone": "#047857" } ], "footer": "Your digest is ready: 3 threads mention you" } }, { "kind": "features", "id": "features", "eyebrow": "Features", "title": "Built for teams that write things down", "columns": 3, "items": [ { "title": "Threads first", "text": "Every message starts a thread, so a channel reads like a list of topics, not a river.", "icon": "book" }, { "title": "Decisions", "text": "Mark a reply as the decision. It's pinned to the thread and searchable later.", "icon": "check" }, { "title": "Daily digest", "text": "One summary each morning of the threads you follow, in the order they need you.", "icon": "mail" }, { "title": "Voice huddles", "text": "Drop into a quick call from any thread. Notes stay attached afterwards.", "icon": "phone" }, { "title": "Guests", "text": "Invite clients to a single channel without giving them the whole workspace.", "icon": "users" }, { "title": "Search that finds things", "text": "Filter by person, channel, file type or decision. Results show the whole thread.", "icon": "globe" } ] }, { "kind": "split", "id": "focus", "eyebrow": "Quiet hours", "title": "Everyone's working hours, visible to everyone", "text": "Set your hours once. Messages sent while you're offline wait for the morning, and senders can see why you haven't answered yet.", "bullets": [ "Urgent override that has to be justified", "Hours shown next to every name", "Weekend mode for the whole team" ], "visual": { "type": "card", "tone": "#7c2d12", "title": "Nadia is offline", "lines": [ "Back at 9:00 Lisbon time", "Your message will wait", "Mark as urgent only if it can't" ] } }, { "kind": "steps", "eyebrow": "Getting started", "title": "Moving over is quick", "items": [ { "title": "Create a workspace", "text": "Name it, pick your channels, set default quiet hours." }, { "title": "Import your history", "text": "Bring channels and files across from a standard chat export file." }, { "title": "Invite the team", "text": "Send a link or add everyone at once with your email domain." } ] }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Per person, per month", "text": "Guests are free on every plan.", "plans": [ { "name": "Free", "price": "$0", "period": "/month", "text": "For small teams getting started.", "features": [ "Up to 10 members", "90 days of history", "1:1 huddles" ], "cta": { "label": "Start free", "href": "#start" } }, { "name": "Team", "price": "$6", "period": "/user/month", "text": "For teams that live in chat.", "features": [ "Unlimited history", "Decisions and digests", "Group huddles", "Guest channels" ], "featured": true, "cta": { "label": "Try Team for 30 days", "href": "#start" } }, { "name": "Organisation", "price": "$11", "period": "/user/month", "text": "For several teams and admins.", "features": [ "Everything in Team", "Single sign-on", "Retention policies", "Data export for admins" ], "cta": { "label": "Talk to us", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "Teams on Porchlight", "title": "What changed for them", "items": [ { "quote": "I stopped checking chat at dinner. The digest tells me what I missed in two minutes.", "name": "Ana F.", "role": "Studio director" }, { "quote": "Decisions are the feature. We stopped re-arguing things from three weeks ago.", "name": "Kwame A.", "role": "Product lead" }, { "quote": "Half our team is in Lisbon, half in Toronto. Quiet hours made that workable.", "name": "Elise R.", "role": "Operations manager" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Good to know", "items": [ { "q": "Can we import from another chat app?", "a": "Yes, from any tool that exports standard JSON or CSV. Channels, messages and files come across." }, { "q": "Are there mobile apps?", "a": "Yes, for iOS and Android, with the same quiet hours and digest." }, { "q": "Who can see private channels?", "a": "Only their members. Workspace admins can't read them unless your plan's retention policy says so and members are told." } ] }, { "kind": "cta", "id": "start", "title": "Give your team a quieter place to talk", "text": "Free for up to ten people, no time limit.", "primary": { "label": "Create a workspace", "href": "#pricing" }, "secondary": { "label": "Read the FAQ", "href": "#faq" } } ], "footer": { "text": "Calm team chat with threads, decisions and quiet hours.", "columns": [ { "title": "Product", "links": [ "Features", "Pricing", "Mobile apps" ] }, { "title": "Company", "links": [ "About", "Careers", "Contact" ] } ], "legal": "© Porchlight. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Team chat app's files. The box is already started for you: finish “Start from Team chat app 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 Team chat app
Create a free account, start from this template, and ask the AI agent to turn it into your app.