# Installation

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

Source: https://www.honestui.com/docs/animated/installation

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 [#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:

```bash
npx honestui@latest init
```

## Add a component [#add-a-component]

Pass the component name to the CLI:

<CliBlock commands="[&#x22;text-reveal&#x22;]" />

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 [#dependencies]

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

```bash
npm install motion
```

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

## Verify the result [#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.