Introducing Remotion Hub Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Bento Grid

Bento Grid

Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

bitcoin.pdf
Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.
finances.xlsx
A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.
logo.svg
Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.
keys.gpg
GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.
seed.txt
A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.
bitcoin.pdf
Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.
finances.xlsx
A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.
logo.svg
Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.
keys.gpg
GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.
seed.txt
A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.
bitcoin.pdf
Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.
finances.xlsx
A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.
logo.svg
Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.
keys.gpg
GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.
seed.txt
A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.
bitcoin.pdf
Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.
finances.xlsx
A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.
logo.svg
Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.
keys.gpg
GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.
seed.txt
A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.

Save your files

We automatically save your files as you type.

Full text search

Search through all your files in one place.

Integrations

Supports 100+ integrations and counting.

SuMoTuWeThFrSa

Calendar

Use the calendar to filter your files by date.

Prerequisites

npm install @radix-ui/react-icons
npx shadcn-ui@latest add button calendar command

Install marquee from Remotion Hub.

Installation

Copy and paste the following code into your project.

components/magicui/bento-grid.tsx
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ArrowRightIcon } from "@radix-ui/react-icons";
import { ReactNode } from "react";
 
const BentoGrid = ({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) => {
  return (
    <div
      className={cn(
        "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
        className,
      )}
    >
      {children}
    </div>
  );
};
 
const BentoCard = ({
  name,
  className,
  background,
  Icon,
  description,
  href,
  cta,
}: {
  name: string;
  className: string;
  background: ReactNode;
  Icon: any;
  description: string;
  href: string;
  cta: string;
}) => (
  <div
    key={name}
    className={cn(
      "group relative col-span-3 flex flex-col justify-between 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,
    )}
  >
    <div>{background}</div>
    <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
      <Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75" />
      <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={cn(
        "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",
      )}
    >
      <Button variant="ghost" asChild size="sm" className="pointer-events-auto">
        <a href={href}>
          {cta}
          <ArrowRightIcon className="ml-2 h-4 w-4" />
        </a>
      </Button>
    </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 };

Examples

Save your files

We automatically save your files as you type.

Full text search

Search through all your files in one place.

Multilingual

Supports 100+ languages and counting.

Calendar

Use the calendar to filter your files by date.

Notifications

Get notified when someone shares a file or mentions you in a comment.