shadcn.io is not affiliated with official shadcn/ui
Property Listings Carousel Block for Ark UI
Ten drawn homes on a hairline track beside a price range slider and a bedrooms choice that filter it live, each with a line-drawn front, address, price, bedrooms, bathrooms and area, and an empty state when nothing matches.
Installation
Overview
Let people narrow homes by price and bedrooms while the track follows, with this property listings carousel for React with Ark UI. Latchlane, a home-search app, lists ten homes in one ruled panel. A filter cell at the start holds a two-thumb Slider for price, from $200,000 to $900,000 in $10,000 steps, read out in words, and a Toggle Group for bedrooms: Any, 1, 2 and 3+. Each hairline cell has a line-drawn front of the home in your theme's foreground weights (a cottage, a bungalow, a townhouse row, an apartment block or a detached house), the address, the price in tabular figures, "3 bed, 2 bath, 1,450 sq ft" and a type tag. Moving a thumb or choosing a bedroom count filters live, goes back to the first home and keeps the foot honest ("6 of 10 homes match"); a range with no match shows an Empty state in the same frame. Two homes and a bit of a third show from the small breakpoint, one with the next peeking on a phone, where the filters sit above the track. A foot holds the counter, a window of dots and Previous and Next. The homes, addresses and prices are made up.
FAQ
How do I use my own listings?
Edit HOMES: an id, an address, a price in whole dollars, beds, baths, sqft, and a look and seed for the drawing. The slider's bounds are PRICE_MIN, PRICE_MAX and PRICE_STEP; the counts in the foot and the readout come from the list and the filter. With real photographs, replace Elevation with an img using object-cover, as the comment says.
How do the filters work?
A home shows when its price is within the slider's range and its bedrooms match the choice: Any, exactly 1, exactly 2, or 3 and more. Each change rebuilds the track and goes back to the first home. If nothing matches, the track is hidden but keeps its height, an empty state takes its place, and Previous and Next go quiet.
The track follows the filters through the Carousel's slideCount and a controlled page.
Is the slider accessible?
Its two thumbs are named "Minimum price" and "Maximum price" and each reads its value as dollars; the arrow keys move a thumb by one step, Home and End go to the ends, and the range is also printed in words above the slider. The foot is the block's one polite live region, so a screen reader hears "Homes 1–2 of 6, 6 of 10 homes match" as you filter.
How does it work with a keyboard?
Tab reaches each slider thumb, the bedroom choices, Previous, the dots and Next. With focus inside the track, the arrow keys move it by one home (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Homes that are out of view are hidden from the tab order and from screen readers.