Components
Ticker
Unstable: an endless strip of short items that slides slowly, pauses under the pointer or focus, and stands still under Reduced motion. Import it from @nizivo/react/unstable/ticker.
Examples
Basic
A strip of features; it pauses under the pointer and stands still under Reduced motion.
- Light & Dark
- WCAG 2.2 AA
- Reduced motion
- 1 px borders
- 2 px focus ring
- Commerce kit
- Social kit
import type { JSX } from 'react';
import { Ticker } from '@nizivo/react/unstable/ticker';
export function TickerExample(): JSX.Element {
return (
<div style={{ inlineSize: 720 }}>
<Ticker
items={[
'Light & Dark',
'WCAG 2.2 AA',
'Reduced motion',
'1 px borders',
'2 px focus ring',
'Commerce kit',
'Social kit',
]}
/>
</div>
);
}
Import
import { Ticker } from '@nizivo/react/unstable/ticker';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/ticker.css';Static or interactive
Server. No client JavaScript: the slide is CSS. How to choose.
Use
items are short labels or logos, drawn as pills with a dot (bare draws them as they are). Two
copies slide one set's width in 30 seconds and begin again unseen; the second copy is hidden from
assistive technology, so each item is read once. It pauses under the pointer and while anything in
it has focus, and stands still under Reduced motion.
Props
Server component Renders data-slot="ticker" with the class nz-ticker. Props: TickerProps. Source: src/unstable/ticker/ticker.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
bare | boolean | false | Draws the items as they are, without the pill. |
itemsrequired | readonly ReactNode[] | – | The items: short labels, logos. Each is drawn as a pill with a dot unless |
render | RenderProp<Record<string, never>> | – | Must render a |
- Also takes every attribute of
<div>exceptchildren. (Omit<ComponentPropsWithRef<"div">, "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
TickerPropstypeimport type { TickerProps } from '@nizivo/react/unstable/ticker'The props of
Ticker, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
ticker.nz-ticker | Tickerroot (takes render) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-ticker, .nz-ticker-bare, .nz-ticker-dot, .nz-ticker-item, .nz-ticker-set, .nz-ticker-track.
Tokens this stylesheet reads (11)
--nz-bg-brand, --nz-bg-surface, --nz-border-subtle, --nz-border-width-default, --nz-duration-pulse, --nz-font-label-m, --nz-radius-full, --nz-space-2, --nz-space-3, --nz-space-4, --nz-text-primary
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
ThinkingIndicator
Unstable: the wait before an AI answer's first word, three stepping dots and a label that can name the step. A polite status region; the dots stop under reduced motion. Import it from @nizivo/react/unstable/thinking-indicator.
Toast
A short message after an action, bottom-centre, with one optional action. toast() shows it from anywhere in your client code; one <Toaster /> in the root layout renders the stack and speaks each message to screen readers.