Components

Carousel

Swipeable, looping slide carousel with optional arrow and dot navigation.

Carousel renders each child as a slide in a touch- and drag-friendly track (built on Embla), with looping enabled by default. Show or hide the prev/next arrows and the dot pagination with showArrows and showDots, and pass Embla options to tweak alignment, looping, or drag behavior. Use it for image galleries, onboarding steps, or feature highlights.

Example

Preview

Slide one

Slide two

import { Carousel } from '@officina/ui';

function Gallery() {
  return (
    <Carousel options={{ align: 'start' }} showArrows showDots>
      {[<img key="1" src="/a.jpg" alt="First" />, <img key="2" src="/b.jpg" alt="Second" />]}
    </Carousel>
  );
}

API

Prop	Type	Default	Description
children*	ReactNode[]	—	Slides to render, one per child.
options	Partial<OptionsType>	—	Embla carousel options (loop, align, drag, etc.).
showArrows	boolean	true	Show the previous/next arrow controls.
showDots	boolean	true	Show the dot pagination indicators.

Scheduler

Full event scheduler: day/week/month/agenda views, drag to move, drag edges

Collapsible

Single disclosure panel with a clickable title header and animated chevron.

Carousel

Example

API

On this page