Toast Notification

Installation

$ pnpm dlx shadcn@latest add @remocn/toast-notification

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ToastNotification } from "@/components/remocn/toast-notification";

const ToastNotificationScene = () => (
  <ToastNotification
    title="Deployment successful"
    message="Your changes are live at remocn.dev"
    variant="success"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ToastNotification"
    component={ToastNotificationScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`title`	`string`	`"Deployment successful"`	Bold headline shown at the top of the toast
`message`	`string`	`"Your changes are live at remocn.dev"`	Secondary message shown below the title
`variant`	`"success" \| "error" \| "info" \| "warning"`	`"success"`	Controls the inline icon and accent color
`background`	`string`	`"#fafafa"`	Frame background color
`cardColor`	`string`	`"white"`	Toast card background color
`textColor`	`string`	`"#171717"`	Color of the toast title
`mutedColor`	`string`	`"#71717a"`	Color of the toast message
`className`	`string`	—	Optional className passed to the toast card