Docs
Animation Features of Bento grid
Animation Features of Bento grid
Animation Features of Bento grid
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Button code into your project.
The Bento Grid Button is in Button
Copy and paste the features code into your project.
API Reference
BentoGrid Props
| Prop | Type | Description |
|---|---|---|
| children | React.ReactNode | The content of the BentoGrid. |
| className | string | Additional classes for the BentoGrid. |
BentoCard Props
| Prop | Type | Description |
|---|---|---|
| className | string | Additional classes for the BentoCard. |
| title | string | React.ReactNode | BentoCard title. |
| description | string | React.ReactNode | BentoCard describtion. |
| header | React.ReactNode | BentoCard header. |
| Icon | BentoCard icon. | |
| href | string | BentoCard href |
| cta | string | BentoCard cta |
Usage
export function BentoDemo() {
return (
<BentoGrid>
{features.map((feature, idx) => (
<BentoCard key={idx} {...feature} />
))}
</BentoGrid>
)
}