Charcoal UI

Timberline: Cabin rentals template

Cabins within three hours of the city.

For rentals and stays: a prompt-style search hero over a landscape, listings beside a map, a destination accordion, reviews, FAQs and a landscape CTA.

About the Timberline template

Timberline is for rentals and stays. A prompt-style search hero over a forest, listings beside a map with linked price pins, a region accordion, guest reviews, booking FAQs and a landscape CTA with a first-stay code.

Cabins within three hours of the city. It is a complete cabin rentals landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.

Who Timberline is for

  • Cabin and holiday rentals.
  • Boutique hotels.
  • Glamping and campsites.
  • Retreat venues.

What is inside

8 sections, top to bottom:

  • Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Landscape: A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
  • Listings Stays: Rental listings beside a stylised map where hovering a card lifts its price pin, and back again.
  • Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
  • Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
  • FAQ Split: Heading and contact link on the left, a springy accordion on the right.
  • CTA Landscape: A moonlit photo card with a silver metal headline and a liquid-metal button.
  • Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.

How it is built

Listings take a price unit, so nightly, weekly or monthly all work. 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 Timberline

npx shadcn@latest add @charcoal/timberline

Templates 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 Timberline for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Timberline 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 Landscape: A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
  • Listings Stays: Rental listings beside a stylised map where hovering a card lifts its price pin, and back again.
  • Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
  • Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
  • FAQ Split: Heading and contact link on the left, a springy accordion on the right.
  • CTA Landscape: A moonlit photo card with a silver metal headline and a liquid-metal button.
  • Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.

Timberline as Markdown