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.

Checkbox

Single-choice control for binary selections and consent.

Email me when the next release ships

Installation

npx shadcn@latest add @iconiq/r-checkbox

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.

Email me when the next release ships

Props

Checkbox

6 props

Provider-switchable single checkbox with the same Iconiq API layered over Base UI and Radix UI primitives.

checkedboolean

Controlled checked state for the checkbox. Pass this when the parent owns the value.

defaultCheckedboolean

Defaultfalse

Initial checked state for uncontrolled usage. The component manages future toggles internally.

onCheckedChange(checked: boolean) => void

Called with the next boolean state whenever the checkbox toggles.

labelstring

Optional inline label rendered beside the checkbox with the same opacity fade used in the original component.

idstring

Optional id forwarded to the underlying primitive control.

classNamestring

Merged onto the outer inline-flex wrapper so you can position the checkbox row in your layout.

Notes

Current install target: Radix UI.

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

Installs a Radix checkbox with the same controlled and uncontrolled Iconiq API as the Base UI version.

Uses the exact same Motion timing and checkmark draw behavior as the original checkbox component.

The generated registry file is /r/r-checkbox.json.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.