Animata

animata.design

Hand-crafted animated components and interaction experiments for React and Tailwind.

Animation & Motion

Stacks: ReactTailwind CSSTypeScript
Use cases: Creative & ExperimentalMicro-interactions

Installation

Install one component (shadcn CLI)

pnpm dlx shadcn@latest add https://animata.design/r/button/toggle-switch.json

Base dependencies for copy-pasted components

npm install tailwind-merge clsx lucide-react

Clone the repo to run the docs site locally

git clone https://github.com/codse/animata.git

Getting started

Prerequisites: a React + TypeScript project that already runs Tailwind CSS v4, with a `components` folder at the project root and the `@/*` alias configured in tsconfig.json. The full requirements list is at https://animata.design/docs/setup.
Install the base dependencies with `npm install tailwind-merge clsx lucide-react`. Tailwind v4 ships the animation utilities natively, so the `tailwindcss-animate` plugin is no longer needed.
Create `utils.ts` exporting a `cn(...inputs: ClassValue[])` helper built on `clsx` and `tailwind-merge`, placed where the `@/` alias in tsconfig.json resolves it.
Add a component from its docs page, for example https://animata.design/docs/button/toggle-switch, with `pnpm dlx shadcn@latest add https://animata.design/r/<category>/<slug>.json` run from the project root. The registry writes the file to `components/animata/<category>/`.
Install the `motion` package (https://motion.dev) only for the components whose source imports it; the rest run on React state and Tailwind classes. If an animation does not play, the docs may be missing a `@keyframes` or `@theme` rule, so copy the missing CSS from the source at https://github.com/codse/animata.

Agent setup prompt

Paste this into a coding agent to set Animata up in an existing project.

Add Animata (https://animata.design) to this existing project: a free, MIT licensed collection of hand-crafted animation, effect and interaction components for React and Tailwind CSS. There is no animata npm package to import. The component source is copied into my repo the same way shadcn/ui works.

Prerequisites:
- My stack is React + TypeScript + Tailwind CSS. The Animata repo itself runs Next.js, React and Tailwind CSS v4, but the components only need React and Tailwind.
- Animata components import through the "@/" alias, so the project needs a components folder at the root and a matching paths entry in tsconfig.json.
- Some components import the motion package (https://motion.dev) and lucide-react. Install those only when the copied source needs them.

Steps:
1. Read the setup guide at https://animata.design/docs/setup, then install the base dependencies: npm install tailwind-merge clsx lucide-react. Do not add the tailwindcss-animate plugin; Tailwind CSS v4 includes the animation utilities.
2. Create utils.ts with the cn helper from the same guide, built on clsx and tailwind-merge, and make sure it sits where the "@/..." imports in the component code resolve.
3. Pick a component from the catalog, for example https://animata.design/docs/button/toggle-switch, and install it from the project root with pnpm dlx shadcn@latest add https://animata.design/r/button/toggle-switch.json. The registry writes components/animata/button/toggle-switch.tsx into my repo. If shadcn is not configured, copy the source from the component page into that file instead.
4. First usage: import the component into an existing page or view, adapt it to my theme tokens and import conventions, and confirm the app still builds.
5. If an animation does not run, check whether the docs page omits CSS: copy the missing @keyframes or @theme values from the component source in https://github.com/codse/animata.

Treat every installed file as mine to edit, and take component APIs, dependencies and CSS only from animata.design.