Extras

CodeBlock, CopyButton, SplitText

Code with a copy button, a copy button for any value, and a headline that rises in word by word.

import { CodeBlock, CopyButton, SplitText } from '@alea/ui';

Examples

Code with a title, line numbers and copy.

tokens.css

:root {
  --alea-accent: #cd57ff;
  --alea-radius-md: 20px;
}

Copy any value; "Copied" is announced.

#CD57FF

A headline that rises in word by word.

Code with a copy button (no highlighter bundled; pass your own highlighted children through code if you need colors).

Prop	Type	Default	Description
`code`required	`string`	-	The code.
`className`	`string`	-	Extra class names for the root element.
`copy`	`boolean`	`true`	Copy button. Default true.
`lineNumbers`	`boolean`	-	Shows line numbers.
`title`	`ReactNode`	-	Shown above the code, e.g. a file name or "bash".

Copies a value and confirms it, announced to screen readers.

Prop	Type	Default	Description
`value`required	`string`	-	The text to copy.
`appearance`	`"button" \| "icon"`	`'icon'`	icon (default) or a button with the label.
`label`	`string`	`'Copy'`	What is copied, for the label ("Copy hex"). Default "Copy".
`onCopy`	`(() => void)`	-	Called after the text is copied.
`size`	`"sm" \| "md"`	`'sm'`	sm or md (default).

Show 10 React Aria props

A headline that rises in word by word (reads as one string to screen readers; still with reduced motion).

Prop	Type	Default	Description
`children`required	`string`	-	The text to animate, word by word.
`stagger`	`number`	`60`	Delay between words in ms. Default 60.

Don't