Bento Cards

30 beautiful card designs rebuilt with composable primitives

Bento Cards

The original 30 Bento card designs, now rebuilt using composable primitives. Each card demonstrates how primitives can be combined to create complex, beautiful UI components.

Proof of Concept

We've successfully rebuilt two cards to validate the primitive composition approach:

Bento 1: Grid Background

Complexity: Simple (single layer)

Primitives Used:

• GlassmorphicCard - Card wrapper with glassmorphic styling
• GlassmorphicCardContent - Content container
• MaskedImage - Radial gradient mask container
• MaskedImageContent - Grid SVG background

Visual Elements:

• 336px × 336px grid background with radial fade
• Cursor icon positioned at bottom-left
• Shadow effect behind cursor

import {
  GlassmorphicCard,
  GlassmorphicCardContent,
  MaskedImage,
  MaskedImageContent,
} from "@/components/ui";

export function Bento1() {
  return (
    <GlassmorphicCard size="default">
      <GlassmorphicCardContent className="p-0">
        <div className="relative w-full h-[336px]">
          <MaskedImage mask="radial" size="default">
            <MaskedImageContent
              src="/images/bento-1-grid.svg"
              alt=""
              fit="cover"
            />
          </MaskedImage>
          {/* Cursor overlay */}
        </div>
      </GlassmorphicCardContent>
    </GlassmorphicCard>
  );
}

View Comparison

---

Bento 10: Avatar Group

Complexity: High (multi-layer composition)

Primitives Used:

• GlassmorphicCard - Card wrapper
• GlassmorphicCardContent - Content container
• AnimatedGrid - Grid container with radial mask
• GridCell - Individual grid cells with spanning
• Avatar - Avatar wrapper
• AvatarImage - Avatar image content
• AvatarGroupPlus - Plus button with glassmorphic styling
• CursorTooltip - Cursor name labels

Visual Elements:

• 3×3 grid with complex cell spanning
• 4 avatar items (3 images + 1 plus button) centered
• 2 cursors with name tooltips
• Multi-layer z-index management

import {
  GlassmorphicCard,
  GlassmorphicCardContent,
  AnimatedGrid,
  GridCell,
  Avatar,
  AvatarImage,
  AvatarGroupPlus,
  CursorTooltip,
} from "@/components/ui";

export function Bento10() {
  return (
    <GlassmorphicCard size="default">
      <GlassmorphicCardContent className="p-0">
        <div className="relative w-full h-[336px]">
          {/* Grid with spanning cells */}
          <AnimatedGrid size="default">
            <GridCell span={2} />
            <GridCell />
            <GridCell />
            <GridCell spanHeight={2} />
            <GridCell span={2} spanHeight={2} className="opacity-0" />
            <GridCell spanHeight={2} />
            <GridCell />
            <GridCell span={2} />
          </AnimatedGrid>

          {/* Centered avatars */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2]">
            <div className="flex flex-wrap w-[124px] gap-1">
              <Avatar>
                <AvatarImage src="/images/avatar-1.png" alt="User 1" />
              </Avatar>
              <Avatar>
                <AvatarImage src="/images/avatar-2.png" alt="User 2" />
              </Avatar>
              <Avatar>
                <AvatarImage src="/images/avatar-3.png" alt="User 3" />
              </Avatar>
              <AvatarGroupPlus>+</AvatarGroupPlus>
            </div>
          </div>

          {/* Cursor tooltips */}
          <div className="absolute top-[80px] left-[64px] z-[3]">
            <CursorTooltip>Artur</CursorTooltip>
          </div>
        </div>
      </GlassmorphicCardContent>
    </GlassmorphicCard>
  );
}

View Comparison

---

Composition Patterns

Pattern 1: Simple Composition (Bento1)

Single-layer composition with 2-3 primitives:

GlassmorphicCard
└── GlassmorphicCardContent
    └── MaskedImage
        └── MaskedImageContent

Pattern 2: Complex Composition (Bento10)

Multi-layer composition with 6+ primitives:

GlassmorphicCard
└── GlassmorphicCardContent
    ├── AnimatedGrid (z-index: 1)
    │   └── GridCell (×9, with spanning)
    ├── AvatarGroup (z-index: 2)
    │   ├── Avatar (×3)
    │   └── AvatarGroupPlus
    └── CursorTooltip (z-index: 3, ×2)

---

Remaining Cards

The following cards are ready to be rebuilt using the established patterns:

Card	Primitives Needed	Complexity
Bento2	GlassmorphicCard, ChartBar, Tooltip, DotIndicator	Medium
Bento3	GlassmorphicCard, MaskedImage	Simple
Bento4	GlassmorphicCard, IconButton	Simple
Bento5	GlassmorphicCard, Badge	Simple
Bento6	GlassmorphicCard, GlowButton	Simple
Bento7	GlassmorphicCard, StatCard	Simple
Bento8	GlassmorphicCard, MaskedImage	Simple
Bento9	GlassmorphicCard, AnimatedGrid	Medium
Bento11	GlassmorphicCard, CircularProgress	Medium
Bento12	GlassmorphicCard, MaskedImage	Simple
Bento13	GlassmorphicCard, MaskedImage	Simple
Bento14	GlassmorphicCard, AvatarGroup, CircularProgress	High
Bento15	GlassmorphicCard, MaskedImage	Simple
Bento16	GlassmorphicCard, GlowButton	Simple
Bento17	GlassmorphicCard, StatCard, ChartBar	Medium
Bento18	GlassmorphicCard, AnimatedGrid, Badge, Tooltip	High
Bento19	GlassmorphicCard, Badge, DotIndicator	Medium
Bento20	GlassmorphicCard, Badge, IconButton	Medium
Bento21	GlassmorphicCard, AnimatedGrid, AvatarGroup	High
Bento22	GlassmorphicCard, Tooltip, DotIndicator	Medium
Bento23	GlassmorphicCard, CircularProgress, ChartBar	High
Bento24	GlassmorphicCard, CircularProgress, ChartBar	High
Bento25	GlassmorphicCard, CircularProgress	Medium
Bento26	GlassmorphicCard, StatCard, ChartBar, Tooltip	High
Bento27	GlassmorphicCard, StatCard, DotIndicator	Medium
Bento28	GlassmorphicCard, IconButton	Simple
Bento29	GlassmorphicCard, GlowButton	Simple
Bento30	GlassmorphicCard, MaskedImage	Simple

---

Design Token Usage

All rebuilt cards use design tokens exclusively:

// ✅ Correct: Using design tokens
className="rounded-[var(--radius-lg)]"
className="shadow-[var(--shadow-6)]"
className="border-[var(--ui-stroke-subtle)]"

// ❌ Wrong: Hardcoded values
className="rounded-[16px]"
className="shadow-[0px_24px_48px_rgba(0,0,0,0.4)]"
className="border-[rgba(248,248,248,0.1)]"

See Design Tokens for the complete token reference.