Stalk UI

Component

Toast

Surfaces transient notifications via a Sonner-backed toaster region.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/toast

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<>
  <Button onClick={() => toast('Project saved')}>Show toast</Button>
  <Toaster />
</>
Theme
<>
  <Button
    onClick={() =>
      toast.success('Invite sent', {
        description: 'teammate@stalk-ui.com will receive an email shortly.',
      })
    }
  >
    Success
  </Button>
  <Toaster richColors />
</>
Theme
<>
  <Button
    onClick={() =>
      toast('Message archived', {
        description: 'Removed from your inbox.',
        action: { label: 'Undo', onClick: () => toast('Restored') },
      })
    }
  >
    Archive
  </Button>
  <Toaster />
</>

Props

Public component props extracted from the source TypeScript types.

No component-specific props are documented yet — the component accepts the underlying element's standard props.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/toast.json`
  • Recipe: `toast`
  • Files: `src/components/ui/toast.tsx`