Components
- AccordionDone
- AlertDone
- Alert DialogDone
- Aspect RatioNo Change
- AvatarDone
- BadgeDone
- BreadcrumbDone
- ButtonDone
- Button GroupDone
- CalendarNo Change
- CardDone
- CarouselDone
- ChartNo Change
- CheckboxDone
- CollapsibleNo Change
- ComboboxDone
- CommandDone
- Context MenuDone
- Data TableDone
- Date PickerDone
- DialogDone
- DrawerDone
- Dropdown MenuDone
- EmptyNo Change
- FieldNo Change
- React Hook FormNo Change
- Hover CardDone
- InputDone
- Input GroupDone
- Input OTPDone
- ItemDone
- KbdDone
- LabelDone
- MenubarDone
- Navigation MenuDone
- PaginationDone
- PopoverDone
- ProgressDone
- Radio GroupDone
- ResizableNo Change
- Scroll AreaNo Change
- SelectDone
- SeparatorDone
- SheetDone
- SidebarNo Change
- SkeletonDone
- SliderDone
- SonnerDone
- SpinnerDone
- SwitchDone
- TableNo Change
- TabsDone
- TextareaDone
- ToastDone
- ToggleDone
- Toggle GroupDone
- TooltipDone
- TypographyDone
Carousel
Embla-powered slider with square navigation paddles, mono labels, and responsive layouts tailored to the Omni control panel.
Deployment summary
Environment rotation
Use the carousel controls or keyboard arrows to inspect environment snapshots.
Healthy
Staging
Rolling deploy across Tokyo cluster
Monitoring
Production
Canary at 35% traffic in Singapore
Warm
Failover
Osaka cluster warming standby nodes
Installation
pnpm dlx shadcn@latest add @omni/carousel
Usage
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from "@/components/ui/carousel"
<Carousel>
<CarouselContent>
{["one", "two", "three"].map((item) => (
<CarouselItem key={item}>{item}</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>