All 30 Bento Cards - Rebuilt with Primitives
Complete showcase of all Bento cards rebuilt using composable primitives
✅ Migration Complete: 30/30 Cards
All Bento cards successfully rebuilt using 12 composable primitives. 100% design token coverage. SASS dependency removed. All styling now uses Tailwind CSS 4 + CVA.
All Cards
Bento1
MaskedImage, Grid background
Bento2
StatCard, ChartTooltip, DotIndicator
Bento3
Simple grid SVG
Bento4
Circles and toggles overlay
Bento5
Grid with tooltip and boxes
Bento6
Horizontal masked image
Bento7
List items with toggles
Bento8
Folder list with progress
Bento9
Grid cells with bottom bar
Bento10
AnimatedGrid, AvatarGroup, CursorTooltip
Bento11
CircularProgress, IconButton
Bento12
List items with centered card
Bento13
Masked image with shadow
Bento14
Card carousel with pagination
Bento15
Simple SVG image
Bento16
Grid layout with boxes
Bento17
Chart columns with stats
Bento18
Grid lines with cursor
Bento19
Pricing list with selection
Bento20
File conversion with arrow
Bento21
Grid with centered avatar
Bento22
Globe with location tooltips
Bento23
Chart with legend
Bento24
Chart with tooltip
Bento25
Video player with 4K badge
Bento26
Performance metrics
Bento27
Grid with cursor
Bento28
Invoice with status list
Bento29
Social icons with rings
Bento30
Timeline grid with tasks
12 Core Primitives
GlassmorphicCard
Universal card wrapper with glassmorphic styling
MaskedImage
Image container with gradient masks
AnimatedGrid
Grid cells with spanning support
AvatarGroup
Overlapping avatars with plus button
StatCard
Metrics display with value and label
CircularProgress
Circular rings with conic gradients
Tooltip
Glassmorphic tooltips and labels
DotIndicator
Status dots and pagination
Badge
Labels and format indicators
IconButton
Circular icon action buttons
ChartBar
Data visualization bars
GlowButton
Animated glow button effect