GlassKit UI
Components

Toast

A transient notice that animates in with a brief luminance rise (never a modal scrim). Controlled via open; you own the auto-dismiss timer.

Toast

Saved to camera roll
600 × 600 · live

Installation

npx @glasskit-ui/cli add toast

Install the SDK (it provides GlassViewport, useDpad and the stylesheet), then copy these files into your project:

npm install @glasskit-ui/react
// components/lib/utils.tsexport type ClassValue = string | number | null | undefined | false;/** * Join truthy class names. Dependency-free on purpose: the lens components * style via bespoke semantic classes (no conflicting Tailwind utilities to * de-dupe), so this needs no clsx/tailwind-merge and resolves from anywhere * the registry is vendored. */export function cn(...inputs: ClassValue[]): string {  return inputs.filter(Boolean).join(" ");}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}
// components/glasskit/toast.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Toast> — a transient notice that animates in (a brief luminance rise, not a * modal scrim). Controlled via `open`; render nothing when closed. The consumer * owns the auto-dismiss timer. `emphasis="accent"` for a confirmation/live notice. */export function Toast({  open,  children,  emphasis = "default",  className,}: {  open: boolean;  children: ReactNode;  /** Visual weight — accent marks a confirmation/live notice. */  emphasis?: "default" | "accent";  className?: string;}) {  if (!open) return null;  return (    <div      role="status"      className={cn(        "gk-toast gk-surface t-body",        emphasis === "accent" && "gk-toast--accent",        className,      )}    >      {children}    </div>  );}

Usage

<Toast open={saved} emphasis="accent">  Workout saved</Toast>

Props

Prop

Type