Bento Pricing Tiles
Pricing set as a bento grid: the recommended plan is the one 2x2 tile with the biggest price and the only accent, surrounded by plans, reassurances and a sales tile.
- Category
- Sections
- Added
- 2026-09-26
- Deps
- none
- Updated
- 2026-09-26
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Pricing
Pay for what you ship.
Start free. Upgrade when a project earns it, and switch plans whenever you like.
For people shipping every day. Everything in Hobby, without the limits.
- Unlimited projects
- Preview deploys for every branch
- Analytics and logs, 30 days
- Priority builds
Hobby
For side projects and trying things out.
$0/ month
Free forever
Start freeTeam
Shared projects, roles and a single bill.
$24/ seat
Billed monthly
Start a team- EnterpriseSSO, audit logs and a 99.99% SLA. Talk to sales.
- Free trial14 days
- Setup fees$0
- ComplianceSOC 2
- CancelAny time
- Questions about billing? Read the FAQ
Compare all features
| Feature | Pro | Hobby | Team |
|---|---|---|---|
| Projects | Unlimited | 3 | Unlimited |
| Preview deploys | Included | Included | Included |
| Custom domains | Included | 1 | Included |
| Log retention | 30 days | 1 day | 90 days |
| Roles and permissions | —Not included | —Not included | Included |
| SSO | —Not included | —Not included | Add-on |
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";
/**
* BentoPricingTiles — pricing set as a bento grid, where size is the
* recommendation.
*
* The plan you want people to buy is the one 2x2 tile: its price is the
* biggest figure on the section, it carries the only accent (its button and
* its flag) and its key features sit beside the price. The other plans are
* 1x2 tiles around it; the reassurances (trial length, setup fees,
* compliance) are 1x1 figures; a 2x1 tile hands enterprise buyers to sales.
* Nothing floats on a shadow and nothing lifts: depth is luminance and a
* one-pixel hairline, and a light that follows the pointer catches the
* hairlines near it.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
Pricing pages usually line up three equal cards and add a badge to the one they want you to pick. A bento does not need the badge, because size is already the argument. Here the recommended plan is the one 2x2 tile: its price is the biggest figure on the section, it carries the only accent colour, and its key features sit beside the price. The other plans are taller 1x2 tiles around it, the reassurances buyers look for (trial length, setup fees, compliance, cancellation) are single figures, and a wide tile hands enterprise buyers to sales. Depth comes from luminance and a one-pixel hairline, never shadows, and a light that follows the pointer catches the hairlines near it. A hairline segmented control switches monthly and yearly billing, and each price slides in as it changes. Under the grid, Compare all features opens a hairline table of every feature by plan.
Curator’s note
Part of the Bento Box kit, drop 2, phase 5. Pro because it is a full section of composed parts with state: billing, sliding prices, a comparison table and a shared pointer light.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glass Pricing Tiers
sectionsA pricing section where each plan is a thicker pane of glass than the last, and the plan you choose puts a lens over its price.
Glass Bento Wall
sectionsA feature grid cut from one sheet of liquid glass: each tile is as thick as it is big, and one pointer light moves across every rim.
Metric Proof Tiles
sectionsA proof section set as bento tiles: 1x1 figures that count up once as they arrive, one accent tile that breaks the row, a quote, and a live figure that ticks slowly.