Media & display components — Carousel, Galleria, Image, Avatar, Badge, FileUpload

Carousel Link to Carousel

Pages through items several at a time, with responsive breakpoints, indicators and optional autoplay.

Live demo

Landscape illustration of Petra — **Petra**from $420

Landscape illustration of Wadi Rum — **Wadi Rum**from $380

Landscape illustration of Aqaba — **Aqaba**from $310

Props

Prop	Type	Description
`items / itemTemplate`	`T[] / (item, index) => ReactNode`	Slides.
`label`	`string`	Accessible name (required).
`numVisible / numScroll`	`number`	Items per page and per step.
`responsiveOptions`	`{ breakpoint, numVisible, numScroll? }[]`	Breakpoint overrides.
`circular / autoplayInterval`	`boolean / number`	Loop and autoplay (ms).

Accessibility

Carousel keyboard support
Key	Action
`Tab`	Reach the previous / next buttons and indicators
`Enter` / `Space`	Activate the focused control

ReactComing to Vue, Svelte and Angular.

Carousel · React

<Carousel label="Featured products" items={products} numVisible={3} numScroll={1} circular
  responsiveOptions={[{ breakpoint: '768px', numVisible: 1 }]}
  itemTemplate={(p) => <ProductCard product={p} />} />

Galleria Link to Galleria

An image gallery with thumbnails, captions and a full-screen mode.

Live demo

Illustration of Petra — **Petra** — Jordan

Showing: 1 of 6

Props

Prop	Type	Description
`items`	`{ src, alt, thumbnailSrc?, caption? }[]`	Images.
`label`	`string`	Accessible name (required).
`showThumbnails / showCaptions`	`boolean`	UI parts.
`fullScreen`	`boolean`	Adds a full-screen viewer.
`activeIndex / onActiveIndexChange`	`number`	Controlled index.

Accessibility

Galleria keyboard support
Key	Action
`Arrow Left` / `Arrow Right`	Previous / next image (mirrored in RTL)
`Escape`	Leave full screen

ReactComing to Vue, Svelte and Angular.

Galleria · React

<Galleria label="Trip photos" items={photos} showThumbnails showCaptions fullScreen />

Image Link to Image

An image with an optional zoomable, rotatable preview overlay.

Live demo

Click an image (or focus it and press Enter) to preview, zoom and rotate.

Props

Prop	Type	Description
`src / alt`	`string`	Image and required alt text.
`preview`	`boolean`	Click to open the preview.
`previewSrc`	`string`	Higher-resolution source for the preview.

Accessibility

Image keyboard support
Key	Action
`Enter` / `Space`	Open the preview
`Escape`	Close the preview

ReactComing to Vue, Svelte and Angular.

Image · React

<Image src="/photos/amman.jpg" alt="Amman citadel at sunset" width={240} preview />

ImageCompare Link to ImageCompare

Compare two images with a draggable divider.

Live demo

Divider: 50%

Props

Prop	Type	Description
`before / after`	`{ src, alt }`	The two images.
`value / onChange`	`number (0–100)`	Divider position.
`label`	`string`	Accessible name of the slider.

Accessibility

ImageCompare keyboard support
Key	Action
`Arrow keys`	Move the divider
`Home` / `End`	Show only one image

ReactComing to Vue, Svelte and Angular.

ImageCompare · React

<ImageCompare label="Before and after retouching"
  before={{ src: before, alt: 'Original photo' }} after={{ src: after, alt: 'Edited photo' }} />

Avatar Link to Avatar

A user picture with initials fallback.

Live demo

LHOSSN

Props

Prop	Type	Description
`name`	`string`	Used for initials and the accessible name.
`src`	`string`	Optional image.
`size`	`'sm' \| 'md' \| 'lg'`	Size.

Accessibility

Avatar · React

<Avatar name="Lina Haddad" />
<Avatar name="Omar Saleh" src="/omar.jpg" size="lg" />

Avatar · Vue

<Avatar name="Lina Haddad" />

Avatar · Svelte

<Avatar name="Lina Haddad" />

Avatar · Astro

<Avatar name="Lina Haddad" />

Avatar · React Native

<Avatar name="Lina Haddad" />

Badge Link to Badge

A small status label.

Live demo

NeutralPrimaryActivePendingOverdueBeta

Props

Prop	Type	Description
`variant`	`'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'`	Colour and meaning.

Accessibility

Badge · React

<Badge variant="success">Active</Badge>

Badge · Vue

<Badge variant="success">Active</Badge>

Badge · Svelte

<Badge variant="success">Active</Badge>

Badge · Astro

<Badge variant="success">Active</Badge>

Badge · React Native

<Badge variant="success">Active</Badge>

Tag Link to Tag

A label for categorising, optionally removable.

Live demo

Design systemAccessibilityRTLCharts

Props

Prop	Type	Description
`removable / onRemove`	`boolean / () => void`	Adds a remove button.
`children`	`ReactNode`	Label.

Accessibility

Tag keyboard support
Key	Action
`Enter` / `Space`	Remove (on the remove button)

Tag · React

<Tag removable onRemove={() => remove('design')}>Design</Tag>

Tag · Vue

<Tag removable @remove="remove('design')">Design</Tag>

Tag · Svelte

<Tag removable onremove={() => remove('design')}>Design</Tag>

Tag · Astro

<Tag removeHref="?remove=design">Design</Tag>

Tag · React Native

<Tag removable onRemove={() => remove('design')}>Design</Tag>

Chip Link to Chip

A compact element with an image or icon, for people, filters or selections.

Live demo

Lina Haddad

Omar Saleh

Sara NasserAmmanRemote OK

Props

Prop	Type	Description
`label`	`string`	Text.
`image / imageAlt`	`string`	Leading image.
`icon`	`ReactNode`	Leading icon.
`removable / onRemove / removeLabel`	`…`	Remove button and its name.

Accessibility

ReactComing to Vue, Svelte and Angular.

Chip · React

<Chip label="Lina Haddad" image={avatar} imageAlt="" removable onRemove={drop} />
<Chip label="Amman" icon="📍" />

MeterGroup Link to MeterGroup

Several values stacked in one bar, such as storage by type.

Live demo

Props

Prop	Type	Description
`value`	`{ label, value, color? }[]`	Segments.
`label`	`string`	Accessible name (required).
`min / max`	`number`	Scale.
`showLegend / formatValue`	`boolean / fn`	Legend and value formatting.

Accessibility

ReactComing to Vue, Svelte and Angular.

MeterGroup · React

<MeterGroup label="Storage" max={256} formatValue={(v) => v + ' GB'} value={[
  { label: 'Apps', value: 64, color: 'primary' },
  { label: 'Photos', value: 48, color: 'success' },
  { label: 'System', value: 24, color: 'warning' },
]} />

FileUpload Link to FileUpload

Choose or drop files, validate size and type, and show upload progress.

Live demo

Drag and drop files here, or use Choose.

Status: No uploads yet

Props

Prop	Type	Description
`mode`	`'basic' \| 'advanced'`	Single button or drop zone with a file list.
`accept / multiple / maxFileSize / fileLimit`	`…`	Validation.
`auto`	`boolean`	Upload right after choosing.
`onUpload`	`(files, { onProgress }) => Promise`	Your upload; report progress per file.
`onSelect / onRemove / onError`	`callbacks`	Lifecycle.

Accessibility

FileUpload keyboard support
Key	Action
`Enter` / `Space`	Open the file chooser
`Tab`	Reach upload, cancel and per-file remove buttons

ReactComing to Vue, Svelte and Angular.

FileUpload · React

<FileUpload label="Attachments" multiple accept="image/*,.pdf" maxFileSize={2_000_000}
  onUpload={async (files, { onProgress }) => {
    for (const f of files) await send(f, (p) => onProgress(f, p));
  }} />

Terminal Link to Terminal

A command-line style console that runs your command handler.

Live demo

Welcome to the Pelagic UI demo shell. Type help and press Enter.

Props

Prop	Type	Description
`onCommand`	`(command) => ReactNode \| Promise<ReactNode>`	Returns the response.
`prompt`	`string`	Prompt text. Default "$".
`welcomeMessage`	`ReactNode`	First line.
`label`	`string`	Accessible name.

Accessibility

Terminal keyboard support
Key	Action
`Enter`	Run the command
`Arrow Up` / `Arrow Down`	Command history

ReactComing to Vue, Svelte and Angular.

Terminal · React

<Terminal label="Demo shell" welcomeMessage="Type help"
  onCommand={(cmd) => cmd === 'date' ? new Date().toString() : 'Unknown command: ' + cmd} />

Accessibility

Theme

Contrast & color

Text

Reading aids

Motion & media

Interaction

Sound

Media & display

Carousel #Link to Carousel

Props

Accessibility

Code

Galleria #Link to Galleria

Props

Accessibility

Code

Image #Link to Image

Props

Accessibility

Code

ImageCompare #Link to ImageCompare

Props

Accessibility

Code

Avatar #Link to Avatar

Props

Accessibility

Code

Badge #Link to Badge

Props

Accessibility

Code

Tag #Link to Tag

Props

Accessibility

Code

Chip #Link to Chip

Props

Accessibility

Code

MeterGroup #Link to MeterGroup

Props

Accessibility

Code

FileUpload #Link to FileUpload

Props

Accessibility

Code

Terminal #Link to Terminal

Props

Accessibility

Code

Carousel Link to Carousel

Galleria Link to Galleria

Image Link to Image

ImageCompare Link to ImageCompare

Avatar Link to Avatar

Badge Link to Badge

Tag Link to Tag

Chip Link to Chip

MeterGroup Link to MeterGroup

FileUpload Link to FileUpload

Terminal Link to Terminal