Slideshow
Step-through slideshow for presenting content sequentially. Install Slideshow from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
2 storiesView componentCarousel
Compare Carousel for React and React Native in VLLNT UI 0.4.0. Explore source, dependencies and native capabilities. Native is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Carousel is a scrollable slider built on Embla Carousel. Compose it from Carousel, CarouselContent, and CarouselItem, then add CarouselPrevious and CarouselNext buttons that disable automatically at the first and last slide. It supports horizontal or vertical orientation, arrow-key navigation, drag and touch swiping, and Embla plugins through the opts, plugins, and setApi props. Use it for image galleries, testimonials, onboarding steps, or product showcases.
ContentPreview
Switch between light and dark to inspect the embedded Storybook preview.
Scrollable content carousel with navigation controls. Part of the content family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Carousel to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/carousel.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Carousel?
- Carousel is a React slider component from VLLNT UI built on Embla Carousel. It scrolls through slides horizontally or vertically with previous and next buttons, keyboard navigation, and drag or touch swiping.
- How do I add Carousel?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/carousel.json` to install Carousel via the shadcn CLI. The compound components are copied into your project so you can compose slides freely.
- Does Carousel support vertical scrolling and plugins?
- Yes. Set the orientation prop to vertical for a stacked layout, and pass Embla plugins such as autoplay plus opts and setApi to configure and control the underlying Embla instance.