Question 1

How do I install the Sonner component?

Accepted Answer

You can install the Sonner component using the shadcn CLI: npx shadcn@latest add "https://ui.nyxhora.com/r/sonner.json". Alternatively, copy the component code directly from the documentation.

Question 2

Is the Sonner component accessible?

Accepted Answer

Yes, the Sonner component is built with accessibility in mind using Radix UI primitives. It supports keyboard navigation, screen readers, and follows WCAG guidelines.

Question 3

Can I customize the Sonner component?

Accepted Answer

Absolutely! The Sonner component is fully customizable using Tailwind CSS classes. You can modify colors, sizes, animations, and more by editing the component code or passing custom className props.

Question 4

Does the Sonner component work with Next.js?

Accepted Answer

Yes, all Nyxhora UI components including Sonner are fully compatible with Next.js 14+ (including Next.js 15), supporting both the App Router and Pages Router.

Sonner

Preview

Installation

Examples

Types

Position