Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/b-button, or use a direct registry URL from https://iconiqui.com/r/b-button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Alert Dialog

Confirmation dialog for destructive or high-stakes actions.

Installation

npx shadcn@latest add @iconiq/r-alert-dialog

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Props

AlertDialog

4 props

Provider-switchable destructive-confirmation surface with the same product-facing API on both Base UI and Radix UI.

openboolean

Optional controlled open state for the dialog root.

defaultOpenboolean

Defaultfalse

Uncontrolled initial state for the dialog root when you want the component to manage its own visibility.

onOpenChange(open: boolean) => void

Called whenever the open state changes, regardless of which provider is installed underneath.

reducedMotionboolean

Turns the dialog root onto its quieter motion path immediately while still respecting system-level reduced motion preferences.

Notes

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-alert-dialog, motion.

Installs a Radix alert dialog with the same higher-level trigger, content, action, and cancel API as the Base UI version.

Uses Motion-driven overlay fade, spring card entry, and staggered inner sections for the confirm flow.

The generated registry file is /r/r-alert-dialog.json.

Exports

5 props

Both registry entries ship the same higher-level parts so you can keep one alert-dialog composition style while swapping the headless library below it.

AlertDialogTriggerButtonHTMLAttributes<HTMLButtonElement>

Default trigger button with the section’s rounded, motion-aware action styling baked in.

AlertDialogContentHTMLAttributes<HTMLDivElement>

Visible dialog card wrapper. className is merged onto the animated surface rather than the outer viewport container.

AlertDialogTitleHTMLAttributes<HTMLHeadingElement>

Heading slot linked to the dialog semantics on both providers.

AlertDialogDescriptionHTMLAttributes<HTMLParagraphElement>

Body copy slot for irreversible-action context and consequences.

AlertDialogCancel / AlertDialogActionButtonHTMLAttributes<HTMLButtonElement>

Pre-styled action row buttons for the safe path and the destructive confirm path.