Static UIStatic UI Docs
HomeComponentsBlocksTemplatesThemesShowcaseStorybookGitHub

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselCheckboxCollapsibleContext MenuDialogDrawerDropdown MenuHover CardInputInput GroupInput OTPKbdLabelNumber FieldPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselCheckboxCollapsibleContext MenuDialogDrawerDropdown MenuHover CardInputInput GroupInput OTPKbdLabelNumber FieldPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Navigation

CardCheckbox

Component Info

CategoryLayout
StatusStable
FrameworkReact

Package

@static-ui/ui

Contribute

  • Report an issue
  • GitHubRequest a feature
  • Edit this page

Resources

  • Storybook
  • GitHub
  • Documentation
  1. Docs
  2. Components
  3. Carousel

Carousel

Layout

A horizontally scrolling container that cycles through a set of items, one at a time.

Loading component...

Installation

Run the following command to add this component to your project:

$pnpm dlx static-ui add carousel

Import

Import the component directly from the package:

import { Carousel } from "@static-ui/ui"

API Reference

Common props available for this component:

PropTypeDescription
classNamestringAdditional CSS classes to apply.
optsobjectCarousel options (loop, align, etc.).

Accessibility

Requires `aria-roledescription="carousel"` and `aria-label` on the container. Each slide uses `role="group"` with `aria-roledescription="slide"`.

Related Components

AccordionVertically stacked interactive headings with reveal panels.
Aspect RatioContent-sized to a desired ratio.
CardBounded content container.
CollapsibleExpandable content sections.
Scroll AreaCustom styled scroll container.
SeparatorVisual content divider.
TabsTabbed content panels.