Does Listings Stays work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Listings Stays

Rental listings beside a stylised map where hovering a card lifts its price pin, and back again.

Type: Commerce section
Styles: Light, Minimal
Licence: Charcoal UI Pro

About Listings Stays

Listings Stays shows rentals as photo cards next to a stylised map. Hovering a card lifts its price pin on the map and hovering a pin highlights the card, with a guest filter on top.

It is a full-width commerce section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.

When to use Listings Stays

Cabin and holiday rentals.
Hotels and boutique stays.
Coworking and venue hire.
Campsites and retreats.

How it is built

Pins are positioned in percentages so you can place them on any map image, and the price unit is a prop for nightly, weekly or monthly prices.

It is composed from Like Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Listings Stays

Listings Stays is part of a full template, so you can see it in a finished page.

Timberline template: Cabins within three hours of the city.
Product Detail: A React product page with gallery, live frame preview, sizes and add to bag
Product Grid: A React shop grid with category chips, sorting, wishlist and quick add
Menu Restaurant: A printed-menu React section with serif dishes, price leaders and course tabs
Commerce Bundle: A build-your-own bundle React section with tiered discounts and a progress bar
Like Button: An animated React like button: the heart pops, sparks burst and the count rolls

Install Listings Stays

npx shadcn@latest add @charcoal/listings-stays

Listings Stays is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Listings Stays work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Like Button: The heart squashes and pops, a ring and eight sparks burst out, and the count rolls.

Listings Stays as Markdown