Animated checkbox

Installation

No MCP yet? Connect your agent.

Integration

The external demo shows this helper in the upstream login-page-1 block, which imports it. It is a contextual example, not a standalone helper playground.

The reusable source is written to @components/motion/checkbox-check.tsx.

@components/motion/checkbox-check.tsx declares a client boundary for state, measurement, or browser interaction.

This is a Base UI checkbox replacement. keepMounted lets the tick reverse mid-draw, and the SVG path length is measured rather than hard-coded.