<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.