Skip to documentation content
|

Installation

Copy an animated component into your project and verify its fallback behavior.

Animated components use the same CLI as Honest UI components. The CLI copies the selected source and supporting utilities into your project, then installs dependencies such as Motion when required.

Requirements
  • Node.js 20.18.1 or later.
  • React 19.
  • Tailwind CSS v4.
  • An initialized Honest UI project.

If the project does not have components.json, initialize it first:

npx honestui@latest init

Add a component

Pass the component name to the CLI:

npx honestui@latest add text-reveal

The default animated-component alias writes source under components/animated. Supporting easing functions or input-capability helpers use the lib or hooks aliases in components.json.

Review the reported files and dependencies before committing. You can edit the installed source directly.

Dependencies

Most animated components use Motion for React. The CLI installs it when the selected registry item requires it. For manual installation:

npm install motion

Components that render icons may also require the icon dependency listed in their manual installation instructions.

Verify the result

After adding a component:

  1. Render its smallest usage example.
  2. Confirm the content is understandable before, during, and after the transition.
  3. Test the interaction with a keyboard when it is interactive.
  4. Enable reduced motion in the operating system and confirm the documented fallback.
  5. Test touch behavior for pointer-responsive components.
  6. Confirm that disabling animation does not remove content, status, or an action.

If you change an effect, preserve or improve the fallback described on that component's page.