SaaS · React
Password manager
Dark product site for a password manager with a vault mock, sharing features, family plans and FAQ.
What you get
A dark, privacy-focused product site for a password manager: a vault health mock, features, an encryption explainer split, three steps, monthly pricing for individuals, families and teams, 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": "Keyward", "nav": [ { "label": "Features", "href": "#features" }, { "label": "Encryption", "href": "#encryption" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Get Keyward", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "center", "eyebrow": "Password manager", "title": "One strong password to remember. Keyward keeps the rest.", "text": "Generate unique passwords, fill them in a click, and share logins with family without texting them. Your vault is encrypted on your device before it syncs.", "primary": { "label": "Create your vault", "href": "#start" }, "secondary": { "label": "How encryption works", "href": "#encryption" }, "visual": { "type": "mock", "title": "Vault health", "rows": [ { "label": "Logins stored", "value": "214", "tone": "#34d399" }, { "label": "Reused passwords", "value": "7 to fix", "tone": "#fbbf24" }, { "label": "Weak passwords", "value": "3 to fix", "tone": "#fbbf24" }, { "label": "Found in a known breach", "value": "1 urgent", "tone": "#f87171" }, { "label": "Two-factor codes stored", "value": "38", "tone": "#34d399" } ], "footer": "Last synced 2 minutes ago · 3 devices" } }, { "kind": "features", "id": "features", "eyebrow": "Features", "title": "Everyday security without the friction", "columns": 3, "items": [ { "title": "Autofill everywhere", "text": "Browser extensions and mobile apps fill logins, cards and addresses.", "icon": "bolt" }, { "title": "Password generator", "text": "Long random passwords or memorable passphrases, set per site.", "icon": "lock" }, { "title": "Secure sharing", "text": "Share one login or a whole folder, and revoke access in one click.", "icon": "users" }, { "title": "Breach alerts", "text": "Checks your stored logins against known breach lists without sending the passwords.", "icon": "shield" }, { "title": "Two-factor codes", "text": "Store time-based codes next to the login they belong to.", "icon": "clock" }, { "title": "Emergency access", "text": "Name a trusted person who can request access after a waiting period you choose.", "icon": "heart" } ] }, { "kind": "split", "id": "encryption", "eyebrow": "Encryption", "title": "We can't read your vault, by design", "text": "Your master password never leaves your device. It derives the key that encrypts your vault locally; we only store and sync the encrypted result.", "bullets": [ "AES-256 encryption with a key derived on your device", "Master password never sent or stored by us", "Lose it and we can't reset it, so set up a recovery kit" ], "visual": { "type": "card", "tone": "#064e3b", "title": "What our servers see", "lines": [ "Encrypted vault blob", "Your email address", "Device list, no contents" ] }, "reverse": true }, { "kind": "steps", "eyebrow": "Getting started", "title": "Moving in takes a few minutes", "items": [ { "title": "Create your vault", "text": "Choose a long master password and save your recovery kit somewhere safe." }, { "title": "Import from your browser", "text": "Bring over saved passwords from your browser or another manager via CSV." }, { "title": "Fix the weak ones", "text": "Vault health lists reused and weak passwords in order of importance." } ] }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Plans for one, a household, or a team", "text": "Billed monthly. Every plan syncs across unlimited devices.", "plans": [ { "name": "Personal", "price": "$3", "period": "/month", "text": "For one person.", "features": [ "Unlimited logins and devices", "Breach alerts", "Two-factor codes" ], "cta": { "label": "Start Personal", "href": "#start" } }, { "name": "Family", "price": "$6", "period": "/month", "text": "Up to 6 people.", "features": [ "Everything in Personal", "Shared family folders", "Emergency access", "Parent recovery for kids" ], "featured": true, "cta": { "label": "Start Family", "href": "#start" } }, { "name": "Team", "price": "$5", "period": "/user/month", "text": "For small businesses.", "features": [ "Shared team vaults", "Admin console", "Access by group", "Activity log" ], "cta": { "label": "Start Team", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "People using Keyward", "title": "Fewer sticky notes, fewer resets", "items": [ { "quote": "My parents use it now. I haven't had a 'what's the Netflix password' call in months.", "name": "Daniel R.", "role": "Family plan" }, { "quote": "Breach alerts caught an old shopping login I'd reused in four places.", "name": "Yasmin K.", "role": "Personal plan" }, { "quote": "Offboarding someone used to mean changing ten passwords. Now it's removing one person.", "name": "Theo G.", "role": "Office manager" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Security questions", "items": [ { "q": "What if I forget my master password?", "a": "We can't recover it. Use the recovery kit you saved at setup, or emergency access if you set it up." }, { "q": "Does Keyward work offline?", "a": "Yes. A copy of your encrypted vault is kept on each device and syncs when you're back online." }, { "q": "Can I export my vault?", "a": "Yes. Export everything as an encrypted file or a plain CSV, after re-entering your master password." } ] }, { "kind": "cta", "id": "start", "title": "Start with the passwords you reuse most", "text": "Create a vault, import from your browser, and fix the first few today.", "primary": { "label": "Choose a plan", "href": "#pricing" }, "secondary": { "label": "Read about encryption", "href": "#encryption" } } ], "footer": { "text": "Password manager for individuals, families and small teams.", "columns": [ { "title": "Product", "links": [ "Apps and extensions", "Families", "Teams" ] }, { "title": "Trust", "links": [ "Encryption overview", "Report a vulnerability" ] } ], "legal": "© Keyward. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Password manager's files. The box is already started for you: finish “Start from Password manager 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 Password manager
Create a free account, start from this template, and ask the AI agent to turn it into your app.