Showcase

A slideshow that advances by itself and shows it: a segmented progress bar — the current segment fills over the interval, each one a button — with a counter, previous / next and a visible pause button. It waits for the pointer, the keyboard focus, a hidden tab and a scroll away, and never advances under reduced motion.

Web + MobileBetaData display

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Orazaka's "Prompt → image" gallery on dev.orazaka.com (KZ-AUTOPLAY), and the demo galleries of the products.

When to use

A gallery of results that should move on its own — prompt and image, before and after, three steps of a product — where each slide is a small composition (a picture, words, an action).
A landing page's proof: the reader sees it moving, can stop it and can jump to any slide.

When not to use

For content the reader must compare or read in order: lay the items out.
For a band of logos or short quotes that slides continuously.Use instead: Marquee
For cards to swipe away and decide on.Use instead: Swipe deck

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Showcase, useTypedText, showcaseLabels } from "@krizaka/ui/showcase";

Examples

Prompt → image

An image on the left, its prompt typed on the right with the action: moves on every 6 s, the bar shows how long is left.

Golden-hour editorialSlide 1 of 3

Any content

Text slides, 4 s each, the slide transition, no loop: the last slide stays.

Write what you want in a sentence.

Describe itSlide 1 of 3

Props

An auto-advancing slideshow with a visible, clickable progress bar, a counter, prev / next and a pause button.

Prop	Type	Default	Description
`getId`required	`(item: T) => string`	—	A stable key for an item.
`items`required	`readonly T[]`	—	The slides, in order.
`label`required	`string`	—	The slideshow's accessible name (“Prompt to image”), passed translated.
`renderItem`required	`(item: T, state: ShowcaseSlideState) => ReactNode`	—	One slide's content. Only the slide in view and its neighbours are mounted (the rest stay empty): give slides the same size.
`autoplay`	`boolean`	`true`	Advances by itself. Never under `prefers-reduced-motion`.
`defaultIndex`	`number`	`0`	The slide shown first.
`getTitle`	`((item: T) => string)`	—	A slide's title, shown before the counter (“Golden-hour editorial”).
`index`	`number`	—	The slide in view (controlled).
`interval`	`number`	`6000`	Milliseconds a slide stays (the time the segment takes to fill).
`labels`	`ShowcaseLabels`	{ previous: "Previous slide", next: "Next slide", pause: "Pause the slideshow", play: "Play the slideshow", goTo: (n) => `Go to slide ${n}`, counter: (n, total) => `Slide ${n} of ${total}`, slide: (n, total) => `${n} of ${total}`, }	The words of the controls, translated.
`loop`	`boolean`	`true`	After the last slide, go back to the first.
`onIndexChange`	`((index: number, user: boolean) => void)`	—	Called when the slide in view changes — `user` is true when the visitor asked for it.
`transition`	`"fade" \| "slide"`	`fade`	`fade` crossfades; `slide` also moves the slides a few pixels.

Accessibility

A region with aria-roledescription="carousel" named by label; each slide is a group (aria-roledescription="slide") named “n of N”; the slides out of view are hidden and inert.
WCAG 2.2.2: a visible pause button; the show also stops while the pointer is over it, while a keyboard focus is inside, while the tab is hidden and while it is off screen.
The live region is polite only after the visitor navigates — the automatic changes are never announced.
Under prefers-reduced-motion the show never advances by itself: no pause button, the current segment is drawn full, the navigation is manual.
On a phone: swipe the pages; Reduce Motion turns the autoplay off; the app in the background holds it.

Keyboard

Keys	Action
`← / →`	Previous or next slide (the show then reads the new slide aloud).
`Home / End`	First or last slide.
`Tab`	The current segment, previous, pause / play, next, then the content of the slide in view.
`Enter / Space`	On a segment: that slide. On the pause button: stops or restarts the show.

Best practices

Give every slide the same size (an aspect ratio): only the slide in view and its neighbours are mounted, and the height must not jump.
Pass labels translated — the controls, the counter (“Image 1 of 17”) and each slide's “n of N”; getTitle names the slide in the counter.
5–8 seconds per slide for a picture and a sentence; the bar shows the time, so the reader can decide to stay.
Type a text with useTypedText only when it is short, and keep the full text for assistive technology (sr-only).
The bar's fill is a CSS animation and its end moves the show: its rules ship with the component, nothing to import.

Generated from the code of @krizaka/ui 3.11.0: its meta.ts, its examples and its types.Edit this documentation on GitHub