Features
Source to Preview
A config on the left, the component it produces on the right — both read from one value, so they cannot disagree.
Source to result
Read the config. See the component.
const notice = { tone: 'success', title: 'Deployed to production', message: 'Build 482 is live in 14 regions.', action: 'View release',};What moves
Picking a notice rewrites the source and swaps the card with a short fade, announced politely. The fade is skipped under reduced motion.
Block source
Install via CLI:
pnpm add @voltui/components lumen-iconsTypeScript
Loading editor…
One standalone component. Paste it into your project, point the imports at your Volt path, and wire the buttons to your own routes.
Every animation here is guarded by prefers-reduced-motion, and the colours come from theme tokens — try a different preset with the switcher in the header and the block follows.