Compositions
Core Primitives
Transitions
Typography
Customize
1
Installation
$ pnpm dlx shadcn@latest add @framecn/toast-notification
Usage
import { ToastNotification } from "@/components/framecn/toast-notification";<ToastNotification />API Reference
ToastNotification
| Prop | Type | Default |
|---|---|---|
title | string | "Deployment successful" |
message | string | "Your changes are live at framecn.dev" |
variant | ToastVariant | "success" |
background | string | "#fafafa" |
cardColor | string | "white" |
textColor | string | "#171717" |
mutedColor | string | "#71717a" |
speed | number | 1 |
fps | number | FPS |
durationInFrames | number | DURATION_IN_FRAMES |
className | string | - |
Notes
Three-phase animation
The toast animates through three phases: spring-based enter, a hold period,
and interpolate-based exit. Use durationInFrames to control the overall
timing.
Anchored absolutely
The toast is positioned absolutely at the bottom-right of the frame. Ensure the parent has a defined size for correct placement.