Bento Mosaic
Bento mosaic pricing grid with expandable cards.
Main Features of Bento Mosaic
How to Use Bento Mosaic in Next.js
Installation Guide for Bento Mosaic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | Modular Pricing | Section title text. |
titleColor | string | #f4f4f5 | Title text color. |
backgroundColor | string | #18181b | Background color (hex, rgb, or hsl). |
freePlan | {name: string, price: number, description?: string, tags?: string[]} | {} | Free plan object with name, price, description, and optional tags. |
proPlan | {name: string, price: number, description?: string, badge?: string, features?: string[]} | {} | Pro plan object with name, price, description, badge, and optional features. |
enterprisePlan | {name: string, price: number, description?: string} | {} | Enterprise plan object with name, price, and description. |
featureCards | Array<{icon: LucideIcon, title: string, color: string}> | [] | Array of feature cards with icon, title, and color. |
freeCardBgColor | string | rgba(39, 39, 42, 0.5) | Free card background color. |
freeCardBorderColor | string | #27272a | Free card border color. |
freeCardTextColor | string | #e4e4e7 | Free card text color. |
freeCardSubtextColor | string | #71717a | Free card subtext color. |
freeTagBgColor | string | #27272a | Free tag background color. |
proCardGradientFrom | string | #4f46e5 | Pro card gradient start color. |
proCardGradientTo | string | #7c3aed | Pro card gradient end color. |
proCardBadgeBgColor | string | rgba(255,255,255,0.2) | Pro card badge background color. |
proCardBadgeTextColor | string | #ffffff | Pro card badge text color. |
proCardTextColor | string | #ffffff | Pro card text color. |
proCardPriceColor | string | #ffffff | Pro card price color. |
proCardFeatureColor | string | #c7d2fe | Pro card feature text color. |
proButtonBgColor | string | #ffffff | Pro button background color. |
proButtonTextColor | string | #4f46e5 | Pro button text color. |
featureCardBgColor | string | rgba(39, 39, 42, 0.5) | Feature card background color. |
featureCardBorderColor | string | #27272a | Feature card border color. |
featureCardTextColor | string | #d4d4d8 | Feature card text color. |
enterpriseCardBgColor | string | #f4f4f5 | Enterprise card background color. |
enterpriseCardTextColor | string | #18181b | Enterprise card text color. |
enterpriseCardSubtextColor | string | #52525b | Enterprise card subtext color. |
enterpriseIconBgColor | string | #e4e4e7 | Enterprise icon background color. |
enterpriseButtonBgColor | string | #18181b | Enterprise button background color. |
enterpriseButtonTextColor | string | #ffffff | Enterprise button text color. |
buttonText | string | Go Pro | Button text. |
enterpriseButtonText | string | Contact Sales | Enterprise button text. |
Related Components
When to Use
Ideal for complex product suites, developer toolkits, and Next.js startups that want a modular, high-density aesthetic. Use this React component for a bento-style pricing grid with varying card sizes and clear visual hierarchy.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your primary layout. Follow React best practices by using high-contrast active states for the 'Pro' tier. Optimize for performance by using efficient grid-column spans.
Why This Component Matters in Modern UI Development
Bento grids allow you to showcase both tiers and features in a unified, space-efficient layout. This production-ready component helpsคุณ build an interface that feels structured and modern, improving the user's ability to compare values.
Frequently Asked Questions
QHow does the layout work?
It uses a CSS Grid with custom spans (`col-span-12`, `md:col-span-8`, etc.) to create the characteristic mosaic pattern.
QIs the Pro tier highlighted?
Yes, the Pro tier uses a vibrant gradient background and a larger footprint to immediately draw the user's eye.
QCan I add more feature cards?
Absolutely, the `featureCards` array is designed to be easily extensible, allowing you to highlight various product benefits within the bento structure.