Carousel

Registry source

Keyboard navigation

Responsive measurement

Use the visible controls or focus the labeled Carousel region and press the orientation-matched arrow keys.

import { createSignal, For } from 'solid-js';
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@tile-ui/solid';

function DemoCarousel(props: { orientation: 'horizontal' | 'vertical'; label: string }) {
	return (
		<Carousel aria-label={props.label} orientation={props.orientation} tabIndex={0} style={props.orientation === 'vertical' ? { width: '16rem' } : { width: '22rem' }}>

Use Carousel with an accessible label so the measured viewport and orientation-specific keyboard controls have a clear name.

Registry install

pnpm dlx shadcn@latest add @tile-ui/carousel

Package usage

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@tile-ui/solid';

<Carousel aria-label="Feature carousel" orientation="vertical"><CarouselContent viewportStyle={{ height: "12rem" }}><CarouselItem>One</CarouselItem><CarouselItem>Two</CarouselItem></CarouselContent><CarouselPrevious /><CarouselNext /></Carousel>

Highlights

Measured horizontal and vertical viewports
Arrow-key navigation follows orientation
Accessible region labels describe each carousel

Registry dependencies

Item	Purpose
`carousel`	Component source and module styles
`core`	Framework-agnostic logic helpers
`button`	Registry component dependency
`styles`	Shared SCSS tokens and globals

API reference

Prop	Type	Default
`orientation`	`'horizontal' \| 'vertical'`	‘horizontal’
`ref`	`CarouselRef<HTMLDivElement>`	—

CarouselContent

Prop	Type	Default
`ref`	`CarouselRef<HTMLDivElement>`	—
`viewportStyle`	`JSX.CSSProperties \| string`	—

CarouselItem

Prop	Type	Default
`ref`	`CarouselRef<HTMLDivElement>`	—

CarouselPrevious

Prop	Type	Default
`ref`	`CarouselRef<HTMLButtonElement>`	—

CarouselNext

Prop	Type	Default
`ref`	`CarouselRef<HTMLButtonElement>`	—