Carousel

Scroll snap does the carousel; the CSS Carousels spec adds dots and arrow buttons the browser generates, wires up, and keeps accessible.

CSS carouselsanchor positioning

PreviewCode

<ul
  class="carousel flex w-full max-w-md snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
>
  <li class="flex aspect-video w-full shrink-0 snap-center items-center justify-center rounded-xl border border-border bg-muted text-4xl font-semibold text-muted-foreground">1</li>
  <li class="flex aspect-video w-full shrink-0 snap-center items-center justify-center rounded-xl border border-border bg-muted text-4xl font-semibold text-muted-foreground">2</li>
  <li class="flex aspect-video w-full shrink-0 snap-center items-center justify-center rounded-xl border border-border bg-muted text-4xl font-semibold text-muted-foreground">3</li>
  <li class="flex aspect-video w-full shrink-0 snap-center items-center justify-center rounded-xl border border-border bg-muted text-4xl font-semibold text-muted-foreground">4</li>
  <li class="flex aspect-video w-full shrink-0 snap-center items-center justify-center rounded-xl border border-border bg-muted text-4xl font-semibold text-muted-foreground">5</li>
</ul>

+ required CSS — this part genuinely can't be expressed as utilities (the page explains why)

/* Dots + arrow buttons for the carousel — the CSS Carousels spec (Chrome 135+).
   This can't be expressed as utilities: ::scroll-marker and ::scroll-button()
   are generated pseudo-elements that need `content`, and the marker group is
   its own layout box. In other browsers this whole block is inert and the
   carousel simply scrolls by hand. */

.carousel {
  scroll-marker-group: after;
  anchor-name: --carousel;
}

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 0.875rem;
}

.carousel > li::scroll-marker {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: background-color 0.15s;
}

.carousel > li::scroll-marker:target-current {
  background: var(--primary);
}

.carousel::scroll-button(*) {
  position: fixed;
  position-anchor: --carousel;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  transition: opacity 0.15s;
}

.carousel::scroll-button(*):disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel::scroll-button(left) {
  content: "‹" / "Scroll left";
  top: anchor(center);
  left: anchor(left);
  translate: -50% -50%;
}

.carousel::scroll-button(right) {
  content: "›" / "Scroll right";
  top: anchor(center);
  left: anchor(right);
  translate: -50% -50%;
}

How it works

The base is utilities only: snap-x snap-mandatory overflow-x-auto on the list, snap-center shrink-0 on the slides. That already scrolls, snaps, and works everywhere — swipe, trackpad, keyboard.
The dots and arrows come from the CSS Carousels spec: scroll-marker-group generates a dot per slide (::scroll-marker, current one via :target-current), and ::scroll-button(left/right) are real, focusable, auto-disabling buttons the browser creates and operates. The arrows are pinned to the carousel’s edges with anchor positioning.

The one required-CSS block in the library

Generated pseudo-elements need content and their own layout — there’s no utility syntax for “create a button per scroll target”. This is the only component where copy-paste means “markup + a CSS block”, and the block is optional: skip it and you keep a working scroll-snap carousel.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
CSS carousels (::scroll-marker / ::scroll-button)Limited availability	135	135	✕	✕	The carousel still scrolls and snaps; dots and arrow buttons simply do not render.
CSS anchor positioningLimited availability	129	129	147	26	The popover opens centered in the viewport (the top-layer default) instead of attached to its trigger.