# Toast

A toast notification with slide-in and auto-dismiss.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/toast
```

<Step>Copy and paste the following code into your project.</Step>

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

## Usage

```tsx
import { Toast } from "@/components/ui/toast";
```

```tsx
<Toast
  title="Changes saved"
  description="Your profile has been updated."
  variant="success"
  state="visible"
/>
```

## Smooth transitions

The docs preview moves a cursor to a trigger button, clicks it, then slides the toast in and auto-dismisses via `useToastTransition`. Pair it with `useCursorPath` and `useButtonTransition`:

```tsx
import { H, W } from "@/lib/customizer-config";
import { Cursor } from "@/components/framecn/cursor";
import { useCursorPath } from "@/components/framecn/use-cursor-path";
import { Button } from "@/components/framecn/button";
import { useButtonTransition } from "@/components/framecn/use-button-transition";
import { Toast } from "@/components/framecn/toast";
import { useToastTransition } from "@/components/framecn/use-toast-transition";

const BTN_X = W / 2;
const BTN_Y = H / 2;

const cursorStyle = useCursorPath([
  { at: 0, x: 80, y: 60 },
  { at: 40, x: BTN_X, y: BTN_Y, duration: 28 },
  { at: 68, x: BTN_X, y: BTN_Y, click: true, duration: 0 },
]);

const buttonStyle = useButtonTransition([
  { at: 40, state: "hover", duration: 16 },
  { at: 62, state: "press", duration: 8 },
  { at: 76, state: "idle", duration: 10 },
]);

const toastStyle = useToastTransition([
  { at: 84, state: "visible", duration: 12 },
  { at: 144, state: "hidden", duration: 12 },
]);

<>
  <Button label="Show toast" style={buttonStyle} />
  <Toast
    title="Changes saved"
    description="Your profile has been updated."
    variant="success"
    style={toastStyle}
  />
  <Cursor style={cursorStyle} variant="pointer" />
</>;
```

Anchor the toast bottom-right in your scene. `style` takes precedence over `state` when both are provided.

## API Reference

### Toast

| Prop          | Type                                | Default                             |
| ------------- | ----------------------------------- | ----------------------------------- |
| `state`       | `"hidden" \| "visible"`             | `"hidden"`                          |
| `style`       | `ToastStyle`                        | `-` (takes precedence over `state`) |
| `title`       | `string`                            | required                            |
| `description` | `string`                            | `-`                                 |
| `variant`     | `"default" \| "success" \| "error"` | `"default"`                         |
| `theme`       | `Partial<FramecnTheme>`             | `-`                                 |
| `className`   | `string`                            | `-`                                 |