Uilora
Uilora.
Uilora
Uilora.
Content Blocks
Playground

Bento Mosaic

Bento mosaic pricing grid with expandable cards.

pricingbentomosaicexpandable

Props

Customize the component with these props

PropertyTypeDefaultDescription
title
stringModular PricingSection title text.
titleColor
string#f4f4f5Title text color.
backgroundColor
string#18181bBackground 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
stringrgba(39, 39, 42, 0.5)Free card background color.
freeCardBorderColor
string#27272aFree card border color.
freeCardTextColor
string#e4e4e7Free card text color.
freeCardSubtextColor
string#71717aFree card subtext color.
freeTagBgColor
string#27272aFree tag background color.
proCardGradientFrom
string#4f46e5Pro card gradient start color.
proCardGradientTo
string#7c3aedPro card gradient end color.
proCardBadgeBgColor
stringrgba(255,255,255,0.2)Pro card badge background color.
proCardBadgeTextColor
string#ffffffPro card badge text color.
proCardTextColor
string#ffffffPro card text color.
proCardPriceColor
string#ffffffPro card price color.
proCardFeatureColor
string#c7d2fePro card feature text color.
proButtonBgColor
string#ffffffPro button background color.
proButtonTextColor
string#4f46e5Pro button text color.
featureCardBgColor
stringrgba(39, 39, 42, 0.5)Feature card background color.
featureCardBorderColor
string#27272aFeature card border color.
featureCardTextColor
string#d4d4d8Feature card text color.
enterpriseCardBgColor
string#f4f4f5Enterprise card background color.
enterpriseCardTextColor
string#18181bEnterprise card text color.
enterpriseCardSubtextColor
string#52525bEnterprise card subtext color.
enterpriseIconBgColor
string#e4e4e7Enterprise icon background color.
enterpriseButtonBgColor
string#18181bEnterprise button background color.
enterpriseButtonTextColor
string#ffffffEnterprise button text color.
buttonText
stringGo ProButton text.
enterpriseButtonText
stringContact SalesEnterprise button text.
Bento Mosaic - Content Blocks Component | UILora