Ceasefire now! 🕊️🇵🇸
Brokarim's UI creation notes!

bento carousel

Demo

Understanding client need

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Quality and attention

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Flexibility and adaptability

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Focus on user

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Innovative digital

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Understanding client need

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Understanding client need

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Understanding client need

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Understanding client need

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Understanding client need

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Jazz up Simple Bento grid with a splash of horizontal scrolling. Big shoutout to @magicui for the Bento grid awesomeness!

Copy paste this bento.tsx

import { ReactNode } from "react";
 
import { cn } from "@/lib/utils";
 
const BentoGrid = ({ children, className }: { children: ReactNode; className?: string }) => {
  return (
    <div className="overflow-x-auto">
      <div
        className={cn(
          "grid auto-rows-[22rem] gap-4 min-w-max", // `min-w-max` akan memastikan grid tidak mengecil saat data bertambah
          className,
        )}
        style={{ gridTemplateColumns: "repeat(3, minmax(0, 1fr))" }} // Sesuaikan jumlah kolom
      >
        {children}
      </div>
    </div>
  );
};
 
const BentoCard = ({
  name,
  className,
  background,
  description,
  href,
  cta,
}: {
  name: string;
  className: string;
  background: string;
  description: string;
  href: string;
  cta: string;
}) => (
  <div
    key={name}
    className={cn(
      "group relative font-serif  bg-center bg-cover flex flex-col justify-end overflow-hidden rounded-xl",
      // light styles
      "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
      // dark styles
      "transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
      className,
    )}
    style={{
      backgroundImage: background ? `url(${background})` : undefined,
    }}
  >
    {/* <div>{background}</div> */}
    <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 ">
      <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">{name}</h3>
      <p className="max-w-lg text-neutral-400">{description}</p>
    </div>
    <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" />
  </div>
);
 
export { BentoCard, BentoGrid };

Usage

import { BentoCard, BentoGrid } from "./bento";
 
const features = [
  {
    name: "Understanding client need",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1486401899868-0e435ed85128?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
  },
  {
    name: "Quality and attention",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1703738138158-6dc3daeb134d?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
  },
  {
    name: "Flexibility and adaptability",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1702267320738-9c524638e3ac?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
  },
  {
    name: "Focus on user",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1520529890308-f503006340b4?q=80&w=2934&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
  },
  {
    name: "Innovative digital",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1709236709023-4904f2cc2c21?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4",
  },
  {
    name: "Understanding client need",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1702267320738-9c524638e3ac?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-4 lg:col-end-4 lg:row-start-3 lg:row-end-4  ",
  },
  {
    name: "Understanding client need",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1703539279365-bbdc6d0cdd79?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-4 lg:col-end-4 lg:row-start-1 lg:row-end-3 ",
  },
  {
    name: "Understanding client need",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1698296725423-9ede5de2d624?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-5 lg:col-end-5 lg:row-start-1 lg:row-end-4",
  },
  {
    name: "Understanding client need",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1716372409137-7ad0100d57ab?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-6 lg:col-end-6 lg:row-start-1 lg:row-end-2",
  },
  {
    name: "Understanding client need",
    description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium",
    href: "/",
    cta: "Learn more",
    background:
      "https://images.unsplash.com/photo-1721326500153-5b74505a4245?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    className: "lg:col-start-6 lg:col-end-6 lg:row-start-2 lg:row-end-4",
  },
];
export function BentoDemo() {
  return (
    <>
      <BentoGrid className="lg:grid-rows-3 font-sans h-[400px] p-2">
        {features.map(feature => (
          <BentoCard key={feature.name} {...feature} />
        ))}
      </BentoGrid>
    </>
  );
}

Previous

About this site

Next

cursor change

Updated:
Author:
BroKarim

On this page

Demo
Copy paste this bento.tsx
Usage