# Toast (/feedback/toast)





<ComponentPreview name="sonner-demo" description="Toast notifications." />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger id="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger id="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent id="cli">
    ```bash
    npx shadcn@latest add @preskok/toast
    ```
  </TabsContent>

  <TabsContent id="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.

        <ComponentSource name="toast" title="registry/preskok/ui/preskok-ui/toast.tsx" />
      </Step>

      <Step>
        Install Sonner if needed.

        ```bash
        pnpm add sonner
        ```
      </Step>

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import { toast } from "sonner"

import { Toast } from "@/components/ui/preskok-ui/toast"

export function ToastDemo() {
  return (
    <div>
      <button onClick={() => toast.success("Saved!")}>Show toast</button>
      <Toast />
    </div>
  )
}
```

## Styling [#styling]

Add these CSS variables for better-looking toasts:

<CodeTabs>
  <TabsList>
    <TabsTrigger id="globals">
      globals.css
    </TabsTrigger>

    <TabsTrigger id="toast">
      toast.css
    </TabsTrigger>
  </TabsList>

  <TabsContent id="globals">
    ```css
    @import "tailwindcss";
    @import "tw-animate-css";
    @import "./toast.css";
    @plugin "tailwindcss-react-aria-components";
    ```
  </TabsContent>

  <TabsContent id="toast">
    ```css
    @theme inline {
      --color-success-background: var(--success-background);
      --color-success-border: var(--success-border);
      --color-success-text: var(--success-text);

      --color-info-background: var(--info-background);
      --color-info-border: var(--info-border);
      --color-info-text: var(--info-text);

      --color-warning-background: var(--warning-background);
      --color-warning-border: var(--warning-border);
      --color-warning-text: var(--warning-text);

      --color-error-background: var(--error-background);
      --color-error-border: var(--error-border);
      --color-error-text: var(--error-text);
    }

    :root {
      --success-background: var(--color-emerald-50);
      --success-border: var(--color-emerald-100);
      --success-text: var(--color-emerald-600);

      --info-background: theme(--color-blue-600/15%);
      --info-border: theme(--color-blue-600/15%);
      --info-text: var(--color-blue-600);

      --warning-background: theme(--color-amber-500/15%);
      --warning-border: theme(--color-amber-400/40%);
      --warning-text: var(--color-amber-600);

      --error-background: theme(--color-red-500/20%);
      --error-border: theme(--color-red-200);
      --error-text: var(--color-red-600);
    }

    .dark {
      --success-background: var(--color-emerald-950);
      --success-border: var(--color-emerald-900);
      --success-text: var(--color-emerald-200);

      --info-background: theme(--color-blue-600/15%);
      --info-border: theme(--color-blue-600/15%);
      --info-text: var(--color-blue-200);

      --warning-background: theme(--color-amber-400/10%);
      --warning-border: theme(--color-amber-500/15%);
      --warning-text: var(--color-amber-200);

      --error-background: theme(--color-red-600/10%);
      --error-border: theme(--color-red-600/15%);
      --error-text: var(--color-red-200);
    }
    ```
  </TabsContent>
</CodeTabs>