Motivation
- Component-coverage parity: shadcn ships a Carousel (Embla-based); users composing a design system expect one.
- Substrate for builder controls: the control-lab
OptionPagerRow exploration (one-option-at-a-time style picker — fixed accent selection frame, specimens sliding through it) is currently prototyped with motion in www-side lab code. If it graduates to /create and needs swipe/drag, it should be rebuilt on this component.
Key decisions
- Engine:
embla-carousel-react (what shadcn uses; a published package, so allowed by registry import rules) vs hand-rolled. React Aria has no Carousel primitive, so either way the a11y is ours: aria-roledescription="carousel", labeled slide groups, prev/next controls per the WAI-ARIA carousel pattern.
- Anatomy:
Carousel / CarouselContent / CarouselItem / CarouselPrevious / CarouselNext, plus optional dots/pagination indicator. Orientation and loop options.
- Styles:
styles.ts with density params; compare classes against shadcn's carousel (both style-{name}.css and the registry file) per the usual mapping.
Scope
Standard registry item: base.tsx, styles.ts, types.ts, meta.ts, demos/, docs page, plus the manual wiring (components-data, gallery demo index, styles.css import) and build:registry / build:references output.
Born out of the control-lab pager exploration; the lab prototype stays motion-based until this lands.
Motivation
OptionPagerRowexploration (one-option-at-a-time style picker — fixed accent selection frame, specimens sliding through it) is currently prototyped withmotionin www-side lab code. If it graduates to /create and needs swipe/drag, it should be rebuilt on this component.Key decisions
embla-carousel-react(what shadcn uses; a published package, so allowed by registry import rules) vs hand-rolled. React Aria has no Carousel primitive, so either way the a11y is ours:aria-roledescription="carousel", labeled slide groups, prev/next controls per the WAI-ARIA carousel pattern.Carousel/CarouselContent/CarouselItem/CarouselPrevious/CarouselNext, plus optional dots/pagination indicator. Orientation and loop options.styles.tswith density params; compare classes against shadcn's carousel (bothstyle-{name}.cssand the registry file) per the usual mapping.Scope
Standard registry item:
base.tsx,styles.ts,types.ts,meta.ts,demos/, docs page, plus the manual wiring (components-data, gallery demo index, styles.css import) andbuild:registry/build:referencesoutput.Born out of the control-lab pager exploration; the lab prototype stays
motion-based until this lands.