Components
WordRotator
Unstable: the keyword of a headline that turns over, one word at a time; a screen reader hears every word once. Import it from @nizivo/react/unstable/word-rotator.
Examples
Basic
A headline: the keyword turns over; a screen reader hears all three words once.
Design for dashboards, commerce, and websites
import type { JSX } from 'react';
import { WordRotator } from '@nizivo/react/unstable/word-rotator';
export function WordRotatorExample(): JSX.Element {
return (
<h2 style={{ margin: 0 }}>
Design for <WordRotator words={['dashboards', 'commerce', 'websites']} />
</h2>
);
}
Import
import { WordRotator } from '@nizivo/react/unstable/word-rotator';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/word-rotator.css';Static or interactive
Client. A timer turns the words. How to choose.
Use
Put it inside the heading: <h2>Design for <WordRotator words={…} /></h2>. Each word holds for 1.8
seconds, then the next slides up. A screen reader hears the words once, as a list ("dashboards,
commerce and websites", in locale); the moving window is hidden from it. Under Reduced motion the
first word stays.
Props
Client component Renders data-slot="word-rotator" with the class nz-word-rotator. Props: WordRotatorProps. Source: src/unstable/word-rotator/word-rotator.client.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
locale | string | 'en-US' | BCP 47 tag for the spoken list. |
render | RenderProp<Record<string, never>> | – | Must render a |
wordsrequired | readonly string[] | – | The words, in order: at least two. |
- Also takes every attribute of
<span>exceptchildren. (Omit<ComponentPropsWithRef<"span">, "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
WordRotatorPropstypeimport type { WordRotatorProps } from '@nizivo/react/unstable/word-rotator'The props of
WordRotator, 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 |
|---|---|---|
word-rotator.nz-word-rotator | WordRotatorroot (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-word-rotator, .nz-word-rotator-snap, .nz-word-rotator-window, .nz-word-rotator-word, .nz-word-rotator-words.
Tokens this stylesheet reads (3)
--nz-duration-slower, --nz-easing-enter, --nz-text-brand
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
VoiceOrb
Unstable: voice mode, an orb, a written state (Tap to talk, Listening…, Speaking…) and one big control that starts and stops. Import it from @nizivo/react/unstable/voice-orb.
Dashboard
The dashboard parts of @nizivo/react: NumberValue, Metric, KpiTile, TrendCard, RankedList and CountUp. Server Components with one small client part, one loading, empty and error contract, and charts through element slots.