DUCarousel
ComponentsImage carousel with hero, gallery, cards, peek, cover, and minimal styles — no Swiper dependency.
import { DUCarousel, DU_CAROUSEL_SAMPLES } from 'deri-ui';Live preview
Hero · autoplay
Coastal Escape
Soft sand · Clear water
Alpine Ridge
High trails · Thin air
City Pulse
Neon · Night walks
Forest Path
Quiet · Green canopy
Studio Light
Workspaces · Calm focus
Cover
Coastal Escape
Soft sand · Clear water
Morning light on the shoreline
Alpine Ridge
High trails · Thin air
Ridgelines above the cloud deck
City Pulse
Neon · Night walks
Dusk settling over downtown
Forest Path
Quiet · Green canopy
Sunbeams through old growth
Cards
Coastal Escape
Soft sand · Clear water
Alpine Ridge
High trails · Thin air
City Pulse
Neon · Night walks
Forest Path
Quiet · Green canopy
Studio Light
Workspaces · Calm focus
Peek
Gallery · thumbs
Coastal Escape
Soft sand · Clear water
Alpine Ridge
High trails · Thin air
City Pulse
Neon · Night walks
Forest Path
Quiet · Green canopy
Studio Light
Workspaces · Calm focus
Minimal
Coastal Escape
Morning light on the shoreline
Alpine Ridge
Ridgelines above the cloud deck
City Pulse
Dusk settling over downtown
<DUCarousel variant="hero" autoplay slides={DU_CAROUSEL_SAMPLES} />
<DUCarousel variant="cards" slides={DU_CAROUSEL_SAMPLES} />
<DUCarousel variant="gallery" slides={DU_CAROUSEL_SAMPLES} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | DUCarouselSlide[] | — | Slides (image, title, subtitle, caption, badge) |
| variant | 'hero' | 'gallery' | 'cards' | 'peek' | 'minimal' | 'cover' | 'hero' | Visual style |
| autoplay / interval | boolean / number | false / 4500 | Auto advance |
| showArrows / showDots | boolean | true | Controls |
| radius | DURadius | 'md' | Corner radius |
| height | string | — | Optional Tailwind height class |
Usage
import { DUCarousel, DU_CAROUSEL_SAMPLES } from 'deri-ui';
<DUCarousel variant="hero" autoplay slides={DU_CAROUSEL_SAMPLES} />
<DUCarousel variant="cards" slides={DU_CAROUSEL_SAMPLES} />
<DUCarousel variant="gallery" slides={DU_CAROUSEL_SAMPLES} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.