Animation Features of Bento grid

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