2 Column Bento Grid

Dynamic grid layout with animated items

$ npx @hritik-sharmaa/repeat-ui add grid-2-column-bento-grid
Category
Grid
Added
Aug 14, 2025
Version
2.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
House Stark
The North Remembers

Jon Snow

Title
King in the North
House
STARK
Status
Lord Commander
Allegiance
Night's Watch
Location
The Wall
Age
25
EST. 298 AC
Medieval Sword
A girl has no name, but she has many faces
she has many faces:

Arya Stark

FACELESS ASSASSIN
no.one@braavos.essos
⚔️
no.one@braavos.essos
🎭
Many-Faced God Temple
THE FACELESS MEN
VALAR
Valar Morghulis - All men must die. The Faceless Men are a religious society of assassins who worship the Many-Faced God.
🐺

House Stark

Winter is Coming

The Seven Kingdoms

The Seven Kingdoms

From Winterfell to King's Landing

Bastard of Winterfell

King in the North
Bastard of Winterfell
Customize
16px
24px
1.02×
import Grid2ColumnBentoGrid from "@/components/repeat-ui/grid-2-column-bento-grid/preview";

<Grid2ColumnBentoGrid />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add grid-2-column-bento-grid --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/grid-2-column-bento-grid/.

    import Grid2ColumnBentoGrid from "@/components/repeat-ui/grid-2-column-bento-grid/preview";

export default function Page() {
  return <Grid2ColumnBentoGrid />;
}

Props

PropTypeDefaultDescription
mainCard{}Main character card configuration
contactCard{}Character contact/ally card configuration
logoCard{}House sigil/logo card configuration
mapCard{}Map/location card configuration
detailsCard{}Character details card configuration
gapnumber16Space between cards, in pixels.
radiusnumber24Card corner radius in pixels.
hoverScalenumber1.02How much a card grows on hover.

More grid

See all
3 Column Bento GridMasonry style grid with variable item heights
Pinterest GridPhoto gallery grid with lightbox effect
Accordion GalleryImage panels that open wide under the pointer