Haven
A real-estate template: a public website for listings and homes, and an admin dashboard for homes, tours and messages.
Best viewed on desktop for the full experience
- Category
- Real Estate
- Stack
- Vite
- shadcn/ui
- License
- Free for any project
- Routes
- 23 routesView
What is Haven?
Haven is a fictional agency selling and renting homes on Florida's Gulf Coast. People browse listings, filter for what matters, look through each home, and book a tour.
Behind the site, the agency runs everything from an admin dashboard: homes, tour requests, messages, agents, and an activity log. A change in the dashboard shows up on the website right away, even in another open tab.
All names, homes, addresses, and reviews are fictional demo data.
What is this template?
Haven is a complete frontend template for a real-estate agency. It includes:
- A public website with listings, home pages, neighborhoods, agents, and guides
- An admin dashboard to manage homes, tours, messages, and agents
Everything works in the browser out of the box. All reads and writes go through one data layer, so connecting a real backend means swapping those modules, not rewriting the UI.
Main features
Website
5- Home page with featured and latest homes, property types, service area, reviews, and guides
- Listings with filters, sorting, and saved homes, with the filters kept in the URL
- Home pages with photos, key facts, features, a mortgage calculator, move-in costs, and a tour form
- Neighborhood, agent, and guide pages
- FAQ with search, a contact form, privacy, and terms
Admin dashboard
7- Overview with today's numbers, upcoming tours, inbox, listings breakdown, and recent activity
- Properties in table and grid views, with filters, search, bulk actions, and undo
- A full property editor with live preview, photo upload and reordering, and an unsaved-changes guard
- Tours in list and week views: confirm, reschedule, complete, or cancel
- A two-pane inbox with read and unread, archive, notes, and J/K/E/U shortcuts
- Agents, with listings reassigned before an agent is deleted
- A full activity log, grouped by day
SEO
4- A unique title and description on every page, with canonical URLs
- Open Graph and Twitter cards
- JSON-LD for the agency, listings, agents, guides, the FAQ, and breadcrumbs
- A generated sitemap.xml and robots.txt
Experience
6- A ⌘K command palette and keyboard shortcuts in the dashboard
- A collapsible sidebar and a mobile drawer
- Accessible: semantic landmarks, labelled forms, keyboard support, and visible focus
- Respects reduced motion
- Demo sign-in and a reset for the demo data
- Deploys as static files to Vercel, Netlify, or Cloudflare Pages
What makes it unique
Website and dashboard in sync
Edit a home in the dashboard and the public site updates right away, even in another open tab.
SEO built in
Structured data for listings, agents, guides, and the FAQ, plus a generated sitemap and robots.txt.
Real agency workflows
Tours, messages, listings, and agents work the way a real-estate team runs them.
A keyboard-first dashboard
A ⌘K palette, shortcuts on every view, and an inbox that works with J, K, E, and U.
No backend needed to start
Everything runs in the browser. Swap the store modules for API calls when it's time.
Static and portable
Builds to static files, with configs included for Vercel, Netlify, and Cloudflare Pages.
Routes
23 routes
Public site
/- Home page
/properties- Listings with filters
/properties/:slug- Home detail
/neighborhoods- Neighborhoods
/neighborhoods/:slug- One neighborhood
/agents- Agents
/agents/:slug- Agent profile
/guides- Guides
/guides/:slug- One guide
/about- About
/contact- Contact
/faq- Questions and answers
/privacy- Privacy policy
/terms- Terms of service
Admin dashboard
/admin/login- Demo sign-in
/admin- Overview
/admin/properties- All homes
/admin/properties/new- Add a home
/admin/properties/:id/edit- Edit a home
/admin/tours- Tour requests
/admin/messages- Inbox
/admin/agents- Agents
/admin/activity- Activity log