The Animated component is a versatile wrapper that adds animations to its children elements. It leverages Motion React to provide smooth, customizable animations for enhancing user interface interactions.
The animation variant to apply, currently there are 5 presets: ‘slideUp’,
‘slideDown’, ‘slideUpBlur’, ‘fadeIn’, ‘scaleIn’, or you can pass a custom
variant object
import Animated from "@/components/animated";export default function Example() { return ( <Animated variant="slideUp"> <div className="p-4 bg-white shadow rounded-lg"> <h2 className="text-lg font-semibold">Hello, world!</h2> <p className="text-gray-500"> This is an example of the Animated component. </p> </div> </Animated> );}
If you need basic components like buttons, inputs, and more, they are
available with Shadcn UI.