Radix Composition Lab

Four more primitives — Tabs, Switch, Tooltip, Popover. Each exposes data-state; the styling is yours. Interact and watch the state flip.

Tabs

Manage your account details and email.
Update your password and 2FA settings.
Invite teammates and manage roles.

Switch

Notifications off

data-state: unchecked

Tooltip

Saved 2 minutes ago

Popover

Dimensions

data-state: closed

// asChild — merge Radix behavior onto YOUR element/component <Tooltip.Trigger asChild> <MyButton>Hover me</MyButton> // no extra wrapper DOM; props merged onto MyButton </Tooltip.Trigger>