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.
Installation
npx @glasskit-ui/cli add toastInstall 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
StatusDot
A glanceable sensor / permission / connection indicator. With one accent on the lens, state reads from luminance + motion: on = steady, live = pulsing, off = dim.
Toaster
The toast / notification SYSTEM — Sonner (Emil Kowalski's library) themed to the lens. Mount <Toaster> once, then fire imperatively with toast(); it handles the queue, stacking, auto-dismiss, and enter/exit motion. Top-anchored — Screen's Cue line owns the bottom strip.