WebberUI
繁體中文

Bento Home

The whole page organised as a bento grid: hero, features, numbers and testimonials all live in cells.

ProHome layoutshome-layout7 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/bento-home.en.json?t=<install token>"

The whole page lands in app/templates/bento-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Navigation and Hero Bento

    A sticky nav bar over a bento hero holding a productivity chart, a command palette, team headcount and a live activity ticker.

    hero
  2. 2

    Customer Logo Marquee

    An endlessly looping band of customer names with fade masks on both edges, vouching for 8,000+ teams.

    gallery
  3. 3

    Capability Bento

    Six capability cells assembled into one feature block: modular layouts, an AI assistant, live collaboration, automation, permissions and 120+ integrations.

    features
  4. 4

    Scale and Reliability

    Four number cells with scroll-triggered count-up for uptime, syncs, countries served and user rating.

    stats
  5. 5

    Customer Voices

    Three columns of review cards with five-star ratings, quotes and gradient-avatar attribution.

    testimonial
  6. 6

    Pricing and Call to Action

    The team plan's price and feature list on the left, a gradient cell with two call-to-action buttons on the right.

    pricing
  7. 7

    Footer

    A brand blurb, social links and three link columns for product, resources and company, above the copyright line.

    footer

Bento Home is a React bento grid homepage template: hero, features, numbers and testimonials all sit in cells of different sizes, with charts, a command menu and live-updating numbers inside them. It is built with Next.js App Router, Tailwind CSS and Motion.

When to use it

  • Homepage for a SaaS or productivity tool
  • Product overviews with many features that should fit on one page
  • A startup's company homepage
  • Product update or year-in-review pages

What to change after installing

  1. Cells are built from components in page.tsx such as `ChartCell`, `CommandCell`, `TeamCell` and `TickerCell`; edit the matching component to change a cell.
  2. Chart data is in `CHART_BARS` and `CHART_DAYS`, command menu items in `CMDK_ROWS` and ticker messages in `TICKER_ITEMS`; all are hard-coded samples you can connect to your own API.
  3. Customer logos, integrations and testimonials come from the `LOGOS`, `INTEGRATIONS` and `TESTIMONIALS` arrays, and plan features from `PRICE_FEATURES`.
  4. Nav links are in `NAV_LINKS`, and each `href` points to a section id on the page.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →