Layer 07 — Overlays

Overlays & portals

The floating layer of the broadcast: modals, menus, tooltips, popovers, and toasts. Every surface is glass over navy, rises on a teal-lit motion, traps focus, and folds its animation flat when the viewer prefers reduced motion.

6-8 UI

Dialog

A blurred navy backdrop drops the room; a glass panel rises on a scale-and-fade with a scanline lower-third header and a teal chrome line. Focus is trapped and Escape closes it.

Confirmation

Usage

Copy

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose,
} from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger asChild><button>Open</button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Lock the starting five</DialogTitle>
      <DialogDescription>Confirm the lineup going on air.</DialogDescription>
    </DialogHeader>
    <DialogBody>…</DialogBody>
    <DialogFooter>
      <DialogClose asChild><button>Cancel</button></DialogClose>
      <button>Lock roster</button>
    </DialogFooter>
  </DialogContent>
</Dialog>

6-8 UI

Tooltip

A compact glass bubble with a teal hairline and matching arrow, set in the condensed display voice. It grows from its trigger and points back at it.

Sides

6-8 UI

Dropdown menu

A glass command menu. Items light up with a teal-dim fill, a glow, and a growing indicator rail; checkboxes and radios keep state, and a submenu nests the same surface.

Broadcast controls

6-8 UI

Popover

A floating glass card with a teal broadcast line and a soft panel shadow. Good for quick filters and inline settings that shouldn't steal the whole screen.

Quick filters

6-8 UI

Toast

Broadcast alerts that slide in from the corner with a glow and swipe away to the right. A lightweight useToast() queue drives four variants — default, success, warning, and danger.

Fire a toast

useToast()

Copy

import { ToastProvider, useToast } from "@/components/ui/toast";

// Wrap the app once:
<ToastProvider><App /></ToastProvider>

// Then fire from anywhere:
const { toast } = useToast();

toast({
  variant: "success",
  title: "Highlight saved",
  description: "The buzzer-beater clip is ready to share.",
  action: { label: "View feed", onClick: openReel },
});

6-8 UI

Props reference

The controls each surface adds on top of its underlying Radix primitive. Everything else — open state, positioning, focus, and accessibility — is inherited from Radix.

Prop	Type	Default	Description
DialogContent.hideClose	boolean	false	Hide the built-in close X in the top-right corner.
TooltipContent.showArrow	boolean	true	Render the pointing arrow toward the trigger.
PopoverContent.showArrow	boolean	false	Render the pointing arrow toward the trigger.
DropdownMenuItem.variant	"default" \| "danger"	"default"	Danger tints the item red for destructive actions.
Toast.variant	"default" \| "success" \| "warning" \| "danger"	"default"	Sets the accent rail, icon, and glow of the toast.
useToast().toast(options)	(o: ToastOptions) => number	—	Queue a toast; returns its id for manual dismiss().