‹ components

Toast

stablev1.0.0·open in canvas

App-level notifications: ToastProvider + useToast(), on Radix Toast.

Installnpx shadcn add @cids/toast
Live demo

    Motion · tap to replay

    honors reduced-motion

    slide-in-from-bottom + fade on enter, fade on exit (Radix presets); reduced-motion collapses.

    Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

    import { ToastProvider, useToast } from "@/design-system";

// app root: <ToastProvider>{children}</ToastProvider>
const toast = useToast();
toast({ title: "Watchlist updated", tone: "buy" });

    Tokens · live

    Resolves in the active theme — flip the toggle above to verify.

    States · from doc

    Parsed from the doc. Interact with the live demo for hover/active.

    enter - visible - dismiss .

    App-level notifications: ToastProvider + useToast(), on Radix Toast.

    Anatomy

    +| Title                x +  <- tone bar (buy/sell/warning/neutral)
|  description            |     surface-bright, shadow-raised
+-------------------------+     viewport: bottom-center, z-toast

    Props

    PropTypeDefaultNotes
    ToastProviderwraps the app--Renders the Radix provider + viewport.
    useToast()(t) => void--{title, description?, tone?}; throws outside the provider.
    tone"neutral" "buy" \"sell" \"warning"`"neutral"Tone bar only -- text stays fg.

    Motion

    slide-in-from-bottom + fade on enter, fade on exit (Radix presets); reduced-motion collapses.

    A11y

    Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.