Glacé 🧊

A frosted-glass UI kit for React. Real edge refraction, springy motion, light/dark, and optional haptics — as a tiny, opinionated kit. Ships toasts, a glass button, and a <Glass> surface primitive you can wrap anything in. Think sonner, wearing glass.

glaceui.com — live demo, playground, and docs.

npm i glaceui

import { Toaster, toast } from "glaceui";
import "glaceui/styles.css";

export default function App() {
  return (
    <>
      <button onClick={() => toast.success("Saved to your library")}>Save</button>
      <Toaster position="bottom-right" />
    </>
  );
}

That's the whole setup: drop one <Toaster /> near the root, call toast() from anywhere.

Why

Most toast libraries are either gorgeous-but-rigid or flexible-but-plain. Glacé is opinionated about the look — proper frosted glass that blurs whatever's behind it, with a specular top edge, a faint grain, and a soft shadow — and unopinionated about everything else. It's themeable with plain CSS variables, has no styling dependency, and ships a single stylesheet, so it drops into a Tailwind/shadcn app or a plain one without touching your config.

Features

• 🧊 Real glass — edges that refract: an SVG displacement map bends the backdrop at the rim (the Aave glass recipe), with a specular highlight and only a little blur. Degrades to frosted blur where unsupported.
• 🌗 Light / dark / system — looks right on both, automatically.
• 🪄 Springy stack — toasts collapse behind each other and fan open on hover, sonner-style.
• 👆 Swipe to dismiss — pointer-driven, works on touch and trackpad.
• 📳 Optional haptics — a buzz on appear / action / dismiss where the device supports it (inspired by web-haptics).
• 🎨 Themeable — every color, blur, radius, and gap is a CSS variable.
• ⚡ Tiny & dependency-free — just React as a peer. Promise, loading, action buttons, custom render included.
• ♿ Accessible — aria-live region, reduced-motion aware.

Toast API

toast("Plain message");
toast.success("Profile updated");
toast.error("Couldn't reach the server");
toast.warning("Storage almost full");
toast.info("New version available");

const id = toast.loading("Uploading…");
toast.success("Uploaded", { id }); // update in place

// with description + action
toast("Invite sent", {
  description: "[email protected] will get an email.",
  action: { label: "Undo", onClick: () => revoke() },
});

// promise — loading → success / error automatically
toast.promise(saveProfile(), {
  loading: "Saving…",
  success: (data) => `Saved ${data.name}`,
  error: (err) => `Failed: ${err.message}`,
});

// render anything
toast.custom(<MyCard />);

toast.dismiss(id); // or toast.dismiss() to clear all

<Toaster /> props

| Prop | Type | Default | | |---|---|---|---| | position | top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right | bottom-right | where the stack sits | | theme | light \| dark \| system | system | follows the OS unless pinned | | richColors | boolean | false | tinted glass per type instead of neutral | | expand | boolean | true | fan the stack open on hover | | visibleToasts | number | 3 | how many show before older ones collapse out | | gap | number | 14 | px between toasts when expanded | | offset | number | 24 | px from the screen edge | | duration | number | 4000 | default ms before auto-dismiss | | closeButton | boolean | false | show an × on every toast | | blur | number | 16 | glass blur radius in px | | haptics | boolean \| HapticsOptions | true | vibration feedback (no-op where unsupported) | | toastOptions | { duration, className, style, closeButton } | — | defaults applied to every toast |

Buttons — <GlassButton>

A frosted button on the glass surface, with a springy liquid press. Docs: glaceui.com/buttons.

import { GlassButton } from "glaceui";

<GlassButton onClick={save}>Save</GlassButton>
<GlassButton size="lg" tone="light">Large light</GlassButton>
<GlassButton morph>{open ? "Collapse" : "Expand"}</GlassButton>  // width springs on change

Every button has a specular sheen that sweeps on hover and a 3D press that tips the glass back. Props: tone (light/dark), size (sm/md/lg), refract (false/true/px), aberration, bezel, saturation, morph, plus all <button> props.

GlassCard / Glass take a sheen prop for the same swept highlight on hover/press.

Panels — <GlassCard>

A padded glass container — drop anything inside. Docs: glaceui.com/panels.

import { GlassCard, GlassButton } from "glaceui";

<GlassCard tone="dark" interactive>
  <h3>Pricing</h3>
  <p>Wrap anything in real glass.</p>
  <GlassButton size="sm">Upgrade</GlassButton>
</GlassCard>

Primitives — <Glass>

The raw surface every component is built on. Render any element via as. Docs: glaceui.com/primitives.

import { Glass, useGlassFilter } from "glaceui";

<Glass as="section" tone="light" radius={24}>…</Glass>
<Glass as="aside" morph>…liquid-resizes without distortion…</Glass>

Tuning the refraction — the same knobs the Glass Lab exposes are props on every surface (Glass, GlassCard, GlassButton, Toaster):

<Glass
  refract={80}     // edge displacement in px — or true (auto) / false (off)
  aberration={6}   // chromatic fringe at the rim
  bezel={0.16}     // rim thickness, as a fraction of the shorter side
  blur={3}         // backdrop blur
  radius={28}      // corner radius
/>

Full <Glass> props: as (default div), tone, radius, refract (false/true/px), aberration (1), bezel (0.16), blur (3), saturation (180), fallbackBlur (14), interactive, morph. Displacement maps + their SVG filters are generated per element size and cached by size+tuning, so every same-sized surface — including the toasts — shares one filter.

Theming

Glacé is driven entirely by CSS variables on [data-glace-toaster]. Override any of them — they map cleanly onto shadcn's token system, so you can wire them to your existing palette:

[data-glace-toaster][data-theme="dark"] {
  --glace-bg: rgba(20, 20, 28, 0.55);
  --glace-border: rgba(255, 255, 255, 0.1);
  --glace-text: hsl(var(--foreground));
  --glace-radius: 14px;
}

Per-toast styling is just className / style:

toast("Custom", { className: "my-toast", style: { "--glace-radius": "22px" } });

Haptics

On by default — a light buzz on appear / action / dismiss, a no-op where the Vibration API isn't available (iOS Safari, most desktops). Pass haptics={false} to turn it off, or tune the patterns:

<Toaster haptics />
<Toaster haptics={{ enabled: true, show: 8, action: [6, 10, 6], dismiss: 4 }} />

Uses the Vibration API where available (Android Chrome and others). iOS Safari doesn't expose it, so it's a progressive enhancement — never required, never throws.

Credits

Standing on the shoulders of work I admire:

• sonner by Emil Kowalski — the toast API and stacking behavior this follows.
• Building glass for the web by Aave — the layered-glass recipe.
• Sileo by Aaryan — glass-notification aesthetic inspiration.
• web-haptics by Lochie — the case for tactile web feedback.

License

MIT © Sean Geng