Skip to content

fix(carousel): use margin-auto centering and scale for nav button press effect#10271

Open
ktisakib wants to merge 3 commits into
shadcn-ui:mainfrom
oworthylab:fix/carousel-button-behaviour
Open

fix(carousel): use margin-auto centering and scale for nav button press effect#10271
ktisakib wants to merge 3 commits into
shadcn-ui:mainfrom
oworthylab:fix/carousel-button-behaviour

Conversation

@ktisakib
Copy link
Copy Markdown

@ktisakib ktisakib commented Apr 2, 2026

Problem

The carousel navigation buttons (CarouselPrevious, CarouselNext) use `top-1/2 -translate-y-1/2` for vertical centering. The Button component applies `active:not-aria-[haspopup]:translate-y-px` for a press effect. On click, `translate-y: 1px` overrides `translate-y: -50%`, causing:

  1. Visual jump — buttons shift ~50% of the carousel height instead of a subtle 1px press
  2. Click miss — the position shift moves the button out from under the cursor during the transition, causing clicks to fail on the top/bottom edge

Reproduction

https://ui.shadcn.com/docs/components/radix/carousel
https://ui.shadcn.com/docs/components/base/carousel

Solution

1. Replace translate-based centering with margin-auto

```diff

Horizontal

-top-1/2 -left-12 -translate-y-1/2
+top-0 bottom-0 my-auto -left-12

Vertical

--top-12 left-1/2 -translate-x-1/2 rotate-90
+-top-12 left-0 right-0 mx-auto rotate-90
```

This eliminates the translate conflict entirely — no `translate-y` to override.

2. Add scale-based press feedback via CSS

```css
.cn-carousel-previous {
@apply rounded-full transition-transform duration-150 ease-out hover:scale-105 active:scale-95;
}
.cn-carousel-next {
@apply rounded-full transition-transform duration-150 ease-out hover:scale-105 active:scale-95;
}
```

Files changed

  • 2 base carousel components (`registry/bases/radix/ui/carousel.tsx`, `registry/bases/base/ui/carousel.tsx`)
  • 6 CSS style files (vega, nova, maia, mira, luma, lyra)
  • Added missing `/* MARK: Carousel */` section in `style-lyra.css`
  • Registry rebuilt — all style variants and public JSON files updated

Fixes #10084

…ss effect

The carousel nav buttons used top-1/2 -translate-y-1/2 for vertical
centering, which conflicts with the Button's active:translate-y-px.
On click, translate-y-px overrides -translate-y-1/2, causing the
button to jump ~50% of the carousel height instead of a subtle press.
This also causes click misses on the button edges (see shadcn-ui#10084).

Changes:
- Replace translate-based centering with margin-auto centering
  (top-0 bottom-0 my-auto for horizontal, left-0 right-0 mx-auto
  for vertical) to eliminate the translate-y conflict entirely
- Add scale-based press feedback (hover:scale-105 active:scale-95)
  via carousel CSS styles for all themes
- Add missing MARK: Carousel section in style-lyra.css
- Rebuild registry to propagate changes to all style variants

Fixes shadcn-ui#10084
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 2, 2026

@ktisakib is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: Carousel demo in the docs

1 participant