page.tsx
import Animated from "@/components/Animated";

​
Properties

​
as
ElementType | 'div'
default:"'div'"

The HTML element or React component to render

​
variant
PresetVariant | Variants
default:"'fadeIn'"

The animation variant to apply, currently there are 5 presets: ‘slideUp’, ‘slideDown’, ‘slideUpBlur’, ‘fadeIn’, ‘scaleIn’, or you can pass a custom variant object

​
animateInView
boolean
default:"true"

Whether to animate when the component enters the viewport

​
className
string

Custom CSS classes to apply to the component

​
Usage

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

Was this page helpful?