Klaxon
Notifications. Messages that appear, announce themselves, pause while you read and clear themselves.
- Component
- Notifications
- Pattern
- ARIA live region
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Klaxon · React + TailwindFull width
| Keys | What happens |
|---|---|
| EnterorSpace | Press a trigger to show a message. In your project your own code calls this. |
| Tab | Reach the action and the close button inside a message. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/toast.json"Run it in your project root. It writes components/toast.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).