Carousel

React v2

A package-backed headless Carousel namespace over Embla with accessible slides, controls, indicators, keyboard direction, and reduced-motion behavior.

Demo

hero
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
Component
size
Style
import { ChevronLeft, ChevronRight } from "@untitledui/icons"; import { Carousel, useCarousel } from "@parentsquare/squarekit-react-v2/carousels"; import { PaginationDot } from "@/components/application/pagination/pagination-dot"; // The demo's CarouselIndicator with the prop it drops: a name for the nav. const Dots = ({ label }: { label: string }) => { const { selectedIndex, scrollSnaps, api } = useCarousel(); return ( <PaginationDot ariaLabel={label} framed className="forced-colors:outline-1 forced-colors:-outline-offset-1" page={selectedIndex + 1} total={scrollSnaps.length} onPageChange={(page) => api?.scrollTo(page - 1)} /> ); }; <Carousel.Root aria-label="Plant gallery" className="relative aspect-[1.6] max-w-160"> <Carousel.PrevTrigger className="bg-alpha-white/90 text-fg-secondary outline-focus-ring absolute top-1/2 z-10 flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full p-2 backdrop-blur-md focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 forced-colors:outline-1 forced-colors:-outline-offset-1 forced-colors:disabled:text-[GrayText] size-9 start-4"> <ChevronLeft className="size-5" /> </Carousel.PrevTrigger> <Carousel.NextTrigger className="bg-alpha-white/90 text-fg-secondary outline-focus-ring absolute top-1/2 z-10 flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full p-2 backdrop-blur-md focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 forced-colors:outline-1 forced-colors:-outline-offset-1 forced-colors:disabled:text-[GrayText] size-9 end-4"> <ChevronRight className="size-5" /> </Carousel.NextTrigger> <div className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2"> <Dots label="Plant gallery slides" /> </div> <Carousel.Content className="gap-2"> <Carousel.Item className="overflow-hidden rounded-xl"> <img alt="Rubber plant leaves against a pale wall" src="https://www.untitledui.com/application/plants.webp" className="size-full object-cover" /> </Carousel.Item> <Carousel.Item className="overflow-hidden rounded-xl"> <img alt="A palm frond against a blue sky" src="https://images.unsplash.com/photo-1484506097116-1bcba4fa7568?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="size-full object-cover" /> </Carousel.Item> <Carousel.Item className="overflow-hidden rounded-xl"> <img alt="A single pink gerbera on a blue-gray background" src="https://images.unsplash.com/photo-1471899236350-e3016bf1e69e?q=80&w=2971&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="size-full object-cover" /> </Carousel.Item> </Carousel.Content> </Carousel.Root>

In context

in-context
View in a page

Family

family
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
Carousel.Root
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
Carousel.Content
Invite your teamAdd teammates from Settings.
Carousel.Item
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
Carousel.PrevTrigger, Carousel.NextTrigger
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
Carousel.IndicatorGroup, Carousel.Indicator
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
useCarousel, CarouselContext
Image by Unsplash
Image by Unsplash
Image by Unsplash
CarouselMd, CarouselLg
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
CarouselIndicator

Types

cells

Six ways to draw the marks.

Dot tray

Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
CarouselIndicator, framed, over the photo
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
PaginationDot, unframed, between arrows under the photo
Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
isBrand at lg, unframed, on a brand ground

Line tray

Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
PaginationLine, framed, over the photo
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
PaginationLine, unframed, between arrows under the photo

The base's marks

Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
Carousel.Indicator with dotClass, one mark per snap
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
Carousel.Indicator render prop: a pill that widens

Sizes

cells

The two demo compositions, with either tray.

Arrows and dot tray

Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
md
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
lg

Arrows and line tray

Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
md, line
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
lg, line

Layouts

cells

Orientation

Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
orientation horizontal
Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
orientation vertical, in an h-64 wrapper

Compositions

cells

The three shapes the repo's thirteen consumers build.

Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
Onboarding: Back and Next from useCarousel, tray at lg
Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
Sign-up: unframed dots between bare arrows
Invite your teamAdd teammates from Settings and they see every project you share.
Connect your toolsSlack, GitHub, and Figma sync from Integrations in under a minute.
Create your first projectStart from a template or a blank board; the layout can change later.
Marketing row: align start, narrow cards, asChild buttons

Behaviour

cells

Twelve slides

Tip 1 of 12Add teammates from Settings and they see every project you share.
Tip 2 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 3 of 12Start from a template or a blank board; the layout can change later.
Tip 4 of 12Add teammates from Settings and they see every project you share.
Tip 5 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 6 of 12Start from a template or a blank board; the layout can change later.
Tip 7 of 12Add teammates from Settings and they see every project you share.
Tip 8 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 9 of 12Start from a template or a blank board; the layout can change later.
Tip 10 of 12Add teammates from Settings and they see every project you share.
Tip 11 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 12 of 12Start from a template or a blank board; the layout can change later.
PaginationDot: a seven-mark window that slides
Tip 1 of 12Add teammates from Settings and they see every project you share.
Tip 2 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 3 of 12Start from a template or a blank board; the layout can change later.
Tip 4 of 12Add teammates from Settings and they see every project you share.
Tip 5 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 6 of 12Start from a template or a blank board; the layout can change later.
Tip 7 of 12Add teammates from Settings and they see every project you share.
Tip 8 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 9 of 12Start from a template or a blank board; the layout can change later.
Tip 10 of 12Add teammates from Settings and they see every project you share.
Tip 11 of 12Slack, GitHub, and Figma sync from Integrations in under a minute.
Tip 12 of 12Start from a template or a blank board; the layout can change later.
Carousel.Indicator: one mark per snap, no window

Loading

cells

The slide

Loading slide
the slide alone
Loading gallery
the slide, arrows and dot tray real

States

cells
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
first slide: Previous disabled
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
last slide: Next disabled
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
opts.loop: both arrows live at either end
Rubber plant leaves against a pale wall
A palm frond against a blue sky
A single pink gerbera on a blue-gray background
focus ring on arrows and dots, live; no hover state