HQ UI

Sonner

A non-intrusive, auto-dismissable notification component used to display brief status updates, alerts, or confirmation messages.

Installation

In the terminal, run the following command to begin:
npx hq-kit add sonner

First, in your root app component or layout, import the Toast component.

import { Toast } from '@/components/ui'
 
const Layout = ({ children }: { children: React.ReactNode }) => {
    return (
        <>
            <Toast />
            {children}
        <>
    )
}

Basic

Use the toast() function to show a toast.

Description

Status

Action

Manually Close

Just pass the timeout: 0 option.