<Animate In/>

React UI Component for animating elements in with Tailwind and CSS Animation

(...and plays nice with shadcn)

<AnimateIn 
  from="opacity-0" 
  to="opacity-100"
>
  Animate In!
</AnimateIn>

Installation

If you are using shadcn in your project, then you already have everything you need, just download AnimateIn.tsx and add it to your components.

Otherwise, you’ll want to install Tailwind as well as mxcn which is a helpful utility for merging tailwind classes.

Like shadcn, <AnimateIn/> is meant to be a re-usable component that you can copy and paste into your apps and customize to your needs. The code is yours.

Read more about how it works in this article.