Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Carousel

Carousel renders standard feature slides and editorial card rails.

CoreLayout & Containers@gaudi/design-system/core/CarouselView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Carousel from '@gaudi/design-system/core/Carousel';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/carousel-autoplay.json.

Usage

import { Carousel } from '@gaudi/design-system';
<Carousel  ariaLabel='Featured articles'  items={[    { title: 'Design systems keep editorial rhythm predictable', eyebrow: 'Design Systems', description: 'A focused carousel item.', href: '/blog' },  ]}/>

Examples

Autoplay

Storybook

Content overlays with dots

Storybook

Layout options

Storybook

Thumbnail navigation

Storybook

API

9 props

Accessibility

Carousel exposes a labelled carousel region, native previous/next buttons, aria-live status updates, keyboard arrow support, and named indicators.

CardCard frames reusable content with title, subtitle, and optional children.8 examplesFieldField composes form label, description, error, and input building blocks.7 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesusePrefersReducedMotionWhether the reader asked to reduce motion.