Keyhaven: Estate agent template
Homes, neighbourhoods and the people who know them.
For estate agents and property firms: a home-search hero, neighbourhood accordion, agent team grid, market counters, a valuation contact form and a big footer.
About the Keyhaven template
Keyhaven is for property firms. A home-search hero, a neighbourhood accordion with average prices, local agents, market counters and a valuation contact form make a firm feel rooted in its streets.
Homes, neighbourhoods and the people who know them. It is a complete estate agent landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Keyhaven is for
- Estate agents.
- Letting agents.
- New-build developers.
- Property management firms.
What is inside
7 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
- Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
- Team Grid: Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Stats Counters: Four big numbers that roll into place when they enter view.
- Contact Form: Contact form with topic pills, inline validation and a success state, beside your details.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.
How it is built
The search hero's examples and categories match your listings. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Keyhaven
npx shadcn@latest add @charcoal/keyhavenTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Keyhaven for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Keyhaven a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
- Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
- Team Grid: Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Stats Counters: Four big numbers that roll into place when they enter view.
- Contact Form: Contact form with topic pills, inline validation and a success state, beside your details.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.