/

Product Carousel

The row of products an assistant answers a shopping question with. Product Cards snap card by card with the next one peeking, a small header carries the count, the source and the arrows, and results still streaming in hold their place as skeletons.

Find me stoneware bowls for everyday use, under $60.

Here are six that hold up to daily use. East Fork's speckled set is the safest bet, and Food52's celadon bowls are on sale this week.

6 results from 6 storeseastfork.com+5

Two speckled white stoneware bowls stacked on a dark table

Best seller

East Fork

Speckled Cereal Bowls, Set of 2

$48

Three pale green glazed bowls seen from above on marble

-20%

Food52

Celadon Pasta Bowls, Set of 4

Now $52, was $65

A deep dark teal stoneware bowl against a pink wall

Heath Ceramics

Ash Glaze Serving Bowl

$58

A stack of matte white bowls on a white shelf

Crate & Barrel

Nesting Bowls, Set of 3

$39.95

A cream glazed bowl with a pale green pool in the center

Handmade

Etsy

Handthrown Cream Bowl

$34

A pale grey shallow bowl with a brown rim on white linen

Year & Day

Pebble Shallow Bowl

$28

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add product-carousel

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Have a license? Unlock it here

Anatomy#

A header with the title and the arrows, then the content row of items, each holding one Product Card. The header is optional: without it the row still drags, swipes and answers the arrow keys.

import {
  ProductCarousel,
  ProductCarouselHeader,
  ProductCarouselTitle,
  ProductCarouselControls,
  ProductCarouselContent,
  ProductCarouselItem,
} from "@/components/ui/product-carousel"

<ProductCarousel>
  <ProductCarouselHeader>
    <ProductCarouselTitle />
    <ProductCarouselControls />
  </ProductCarouselHeader>
  <ProductCarouselContent>
    <ProductCarouselItem>
      <ProductCard />
    </ProductCarouselItem>
  </ProductCarouselContent>
</ProductCarousel>

Default#

The row starts flush with the reply's text and the next card always peeks past the edge, so it reads as more to see. Each arrow moves one card and stops at the last one instead of leaving a gap; a drag moves with the pointer and a fling skips several cards. Tabbing into a card that is out of view slides it in.

6 results from 6 stores

Two speckled white stoneware bowls stacked on a dark table

Best seller

East Fork

Speckled Cereal Bowls, Set of 2

$48

Three pale green glazed bowls seen from above on marble

-20%

Food52

Celadon Pasta Bowls, Set of 4

Now $52, was $65

A deep dark teal stoneware bowl against a pink wall

Heath Ceramics

Ash Glaze Serving Bowl

$58

A stack of matte white bowls on a white shelf

Crate & Barrel

Nesting Bowls, Set of 3

$39.95

A cream glazed bowl with a pale green pool in the center

Handmade

Etsy

Handthrown Cream Bowl

$34

A pale grey shallow bowl with a brown rim on white linen

Year & Day

Pebble Shallow Bowl

$28

Streaming results#

Render the row as soon as you know how many results are coming and mark the ones still on their way loading. Each holds its slot as a skeleton the shape of a card, and resolves in place from a blur when its data lands, so nothing in the row moves while it fills.

Searching stores, 0 found

Few results#

When every card fits, there is nothing to page through: the arrows step out of the header and the row stays put, with the cards keeping the width they have in a full row.

2 results from 2 stores

Three pale green glazed bowls seen from above on marble

-20%

Food52

Celadon Pasta Bowls, Set of 4

Now $52, was $65

A deep dark teal stoneware bowl against a pink wall

Heath Ceramics

Ash Glaze Serving Bowl

$58

On a phone#

Cards size to the row through a container query, not the viewport, so the same carousel shows about one and a half cards in a 343px reply and three and a half in a wide one. Swipe to move it; the page still scrolls vertically under the thumb.

6 results from 6 stores

Two speckled white stoneware bowls stacked on a dark table

Best seller

East Fork

Speckled Cereal Bowls, Set of 2

$48

Three pale green glazed bowls seen from above on marble

-20%

Food52

Celadon Pasta Bowls, Set of 4

Now $52, was $65

A deep dark teal stoneware bowl against a pink wall

Heath Ceramics

Ash Glaze Serving Bowl

$58

A stack of matte white bowls on a white shelf

Crate & Barrel

Nesting Bowls, Set of 3

$39.95

A cream glazed bowl with a pale green pool in the center

Handmade

Etsy

Handthrown Cream Bowl

$34

A pale grey shallow bowl with a brown rim on white linen

Year & Day

Pebble Shallow Bowl

$28

API reference#

ProductCarousel

The row and its state. A Carousel root, so it forwards Carousel props (index, defaultIndex, onIndexChange, loop). The arrow keys move it while focus is inside. Every part accepts className, merged last.

Prop	Type	Default	Description
label	string	"Products"	The row's accessible name. Say what was searched for.

Data attribute	Description
data-slot	`carousel`, like the Carousel it is.

ProductCarouselHeader

The small bar over the row: the title on the start, the arrows on the end. Droppable. Forwards native <div> props.

ProductCarouselTitle

What the row is: a count and where it came from. Muted, with <strong> stepping the count up to full ink in tabular figures. Put a Citation inside to link the sources. Forwards native <p> props.

ProductCarouselControls

The previous and next arrows, as small outline icon buttons. They disable at either end, and the pair disappears when every card already fits. Forwards native <div> props.

Prop	Type	Default	Description
previousLabel	string	"Previous products"	The previous arrow's accessible name.
nextLabel	string	"Next products"	The next arrow's accessible name.
previousProps	CarouselArrowProps	-	Props for the previous `CarouselPrevious`.
nextProps	CarouselArrowProps	-	Props for the next `CarouselNext`.
children	React.ReactNode	-	Your own controls instead of the pair.

ProductCarouselContent

The row itself: a CarouselContent set to peek and align="start". Cards size to the row, not the screen (about 1.5 visible on a phone, 3.5 on a wide reply), so the next one always peeks. It snaps a card at a time, drags and swipes, a fling skips several, and it never runs past the last card. Forwards CarouselContent props (draggable).

ProductCarouselItem

One slot in the row, holding a Product Card at the row's height. A CarouselSlide, so it forwards its props.

Prop	Type	Default	Description
loading	boolean	false	Show a `ProductCardSkeleton` while the result streams in. When it turns false the card resolves into place from a blur.

Data attribute	Description
data-loading	Present while `loading`.
data-fresh	Present once a loading slot has resolved: its card plays the entrance on arrival.

FAQ#

It is a Carousel, set up for results. The row aligns to the start instead of centering a slide, shows as many cards as fit with the next one peeking, stops at the last card instead of leaving a gap, and its arrows live in a small header rather than over the content. Drag, swipe, keyboard and the controlled index all come from Carousel.