Toast

Toasts whose remaining life is a faint lift of the card's own surface, receding as the time runs down; an action is a small filled button.

$149 once · every Pro piece

Customize

Position

Duration (ms)

Showing on open

none

toast

error

Newest in front, up to three layered behind; hover or focus the stack to fan it out and freeze every timer. Swipe one away, or reach it with F6 and dismiss it with Escape.

Install

npx shadcn@latest add @obsyde/toast

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Toaster } from '@/components/obsyde/ember/toast/Toaster';

export function Example() {
  return (
    <Toaster />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/toast/Toaster.tsxcomponent
ember/toast/toast.cssstyles
ember/toast/ToastDemo.tsxdemo
ember/display-kit/display-kit.cssshared
ember/display-kit/motion.tsshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`position`Position	`'bottom-right' \| 'bottom-center' \| 'top-right'`	`'bottom-right'`
`duration`Duration (ms)	`number`	`4000`
`initial`Showing on open	`'none' \| 'toast' \| 'error'`	`'none'`