9 contracts

Media & overlay components

Overlay and surface components — popovers, tooltips, sheets, scrollables. Contracts keep their behavior and layering predictable, so overlays never fight each other.

IconSF-Symbol-paired icon primitive. Names map 1-to-1 with the project tokens.sfSymbols entries (e.g. "settings" → SF "gearshape" / lucide-react "Settings"). Pick the semantic name; the renderer picks the right glyph for the platform.

ImageOptimised image with built-in loading + alt enforcement.

VideoInline video player. Lighter than a Lightbox; auto-pauses out of viewport.

LightboxFull-screen image viewer with zoom + keyboard navigation.

GalleryGrid of images that opens into a Lightbox.

ThemeToggleLight / Dark / System tri-state toggle. Lives in the header or settings.

LocaleSwitcherLanguage / region selector. Lives in the header or settings footer.

KeyboardShortcutVisual representation of a keyboard shortcut (kbd elements).

FormComposite of inputs + actions with validation, submission, and error summarisation.

Related

Form components

Display components

Navigation components

Get media & overlay components in your project.