Carousel

One slide of a set at a time: a headless Carousel namespace over embla with useCarousel, drawing nothing. All drawn values live in the CarouselMd/Lg demos.

Specimen

Guidelines

Code

Demo

hero

A single pink gerbera on a blue-gray background

Component

size

Style

framed

Arrows

opts.loop

import { ChevronLeft, ChevronRight } from "@untitledui/icons"; import { Carousel, useCarousel } from "@/components/application/carousel/carousel-base"; 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=1280&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=1280&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

Carousel.Root

Carousel.Content

Invite your teamAdd teammates from Settings.

Carousel.Item

Carousel.PrevTrigger, Carousel.NextTrigger

Carousel.IndicatorGroup, Carousel.Indicator

useCarousel, CarouselContext

CarouselMd, CarouselLg

CarouselIndicator

Types

cells

Six ways to draw the marks.

Dot tray

CarouselIndicator, framed, over the photo

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

PaginationLine, framed, over the photo

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

Carousel.Indicator render prop: a pill that widens

Sizes

cells

The two demo compositions, with either tray.

Arrows and dot tray

Arrows and line tray

md, line

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