Animation Features of Bento grid

Docs

Installation

Install the following dependencies:

npm install framer-motion

Copy 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>
  )
}

Profile Card Border Trail Card

Docs

Animation Features of Bento grid

Calendar

Use the calendar to filter your files by date.

Learn more

Cloud Sync

Access your files from anywhere with real-time sync.

Learn more

Advanced Security

Keep your files secure with end-to-end encryption.

Learn more

Real-time Collaboration

Collaborate with team members in real-time.

Learn more

Customizable Settings

Personalize your experience with extensive settings.

Learn more

Multi-Language Support

Use the app in over 20 different languages.

Learn more

Favorites

Quickly access your most important files.

Learn more

Installation

Install the following dependencies:

npm install framer-motion

Copy 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>
  )
}

Profile Card Border Trail Card