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?

Account menuAuthentication Button