Toast.

Timely feedback, without interrupting.

import { Toast, ToastProvider } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <ToastProvider>
      <Toast
        defaultOpen
        title="Project created"
        description="Your new workspace is ready."
      />
    </ToastProvider>
  );
}

Installation

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

Controlled and uncontrolled state

State contract: open / defaultOpen / onOpenChange. Omit the controlled prop to let the component own its initial state; supply a value and callback when your application owns it. Native uncontrolled fields and state-backed form controls participate in form reset. Controlled state must be reset by the application.

import { useState } from "react";
import { Toast, Button, ToastProvider } from "luminescent";


export function ControlledExample() {
  const [value, setValue] = useState(false);
  return (
    <ToastProvider>
      <Button onClick={() => setValue(true)}>Create project</Button>
      <Toast open={value} onOpenChange={setValue} title="Project created" />
    </ToastProvider>
  );
}

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import ToastProps from the package for the full inherited contract.

Accessibility and keyboard

Radix announcements, timed dismissal, hover/focus/window-blur pause and F8 viewport access. Toast actions require a meaningful altText. Mount one ToastProvider per themed tree; persist critical errors inline. Control open to show a toast in response to an action.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

import { LuminescentProvider, Toast, ToastProvider } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <ToastProvider>
        <Toast
          defaultOpen
          title="Project created"
          description="Your new workspace is ready."
        />
      </ToastProvider>
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.

Related components