Skip to content
RaidKit
Sign up
Interactive demoInteractive UIIntro

Component catalog

Sheet, dropdown menu, select, tooltip, popover, alert, avatar, progress, breadcrumb, pagination — each accessible, each doing its job.

Built withRadix UICVAReact

Before you try it

What it needs

Nothing to configure. It runs the same everywhere.

Mode right now

ReadyThe provider is configured here; nobody has watched the real path succeed on this deployment yet.

A safe failure to try

In the Settings sheet, apply a change the server refuses: the sheet says so, and nothing you typed is lost.

Sheet

A dialog that slides in from an edge. Focus is trapped, Escape closes, focus returns to the trigger.

Dropdown menu

Actions behind a button. Arrow keys move, type-ahead jumps, Escape closes, focus returns.

Show archived is off.

Select menu

For option rows the native select cannot draw: descriptions, groups. Forms still use the native control by default.

Tooltip and popover

A tooltip names an icon and disappears; a popover holds something to interact with.

Alert

Inline callouts with an icon per tone, so meaning never rests on color alone.

Heads up

This catalog page is itself part of the accessibility gate.

Saved

Your changes are live.

Almost out of budget

Two requests left today.

Avatar, progress, breadcrumb, pagination

The small parts every page reaches for.

Initials from the name or email; a photo when there is one.
Upload progress40%

Links, not buttons: a page is a URL. (The buttons below only move this demo’s state.)

What this demonstrates

  • A sheet is a dialog on an edge: same focus trap, same Escape, better use of a phone screen
  • Menus and selects keep the keyboard model — arrows, type-ahead, Home/End — because Radix supplies it
  • Tooltips name; popovers hold. Neither replaces the native control for a plain form
  • Pagination is links, not buttons: a page is a URL
  • Every tone carries an icon, so meaning never rests on color alone

Where the code lives

src/experiments/components/demo.tsx

Registered in src/experiments/registry.ts and loaded on demand by loader.tsx.

Also in Interactive UI