Block•Free

Feature Bento

A bento-grid feature section with live micro-visuals: a drawing analytics chart, command palette, global edge map, integration orbit, and interactive security toggles.

Platform

Everything your team ships with, in one place.

Analytics, automation, and guardrails that work together out of the box, so you spend less time wiring tools and more time shipping.

Insights

Real-time analytics

Watch every launch land as it happens, with live funnels and revenue in the same view.

+38.2% this week

Visitors: 48.2k
Conversion: 4.6%
Avg. session: 3m 12s

Speed

Command everything

One shortcut to reach any action, page, or teammate.

deployesc

Deploy to production⌘ D
Invite a teammate⌘ I
Open billing settings⌘ ,

Edge

Global by default

Served from 32 regions, close to every customer.

38msp95 response worldwide

Connect

Plays well with others

120+ integrations that sync both ways, in real time.

Trust

Secure in a click

Turn on enterprise guardrails without filing a ticket.

Security score80/100

Overview

About the Feature Bento

A bento-grid feature section with live micro-visuals: a drawing analytics chart, command palette, global edge map, integration orbit, and interactive security toggles. It is delivered as editable TypeScript for React. Tailwind CSS is required for layout and utility classes; the spotlight and micro-animation CSS is embedded in the TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

SaaS landing pages that need to explain several product capabilities at a glance.
Product launches where each feature deserves its own animated proof point.

What’s included

Files installed with the component

Feature Bento source

components/feature-bento.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import FeatureBento from "@/components/feature-bento";

Minimum example

export default function FeaturesSection() {
  return <FeatureBento />;
}

Props

Component API

The current source has no public props; edit the headline, card copy, chart points, regions, and security controls in the source file.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is required for layout and utility classes; the spotlight and micro-animation CSS is embedded in the TypeScript source.

Images: No image files are included. All visuals are inline SVG and CSS contained in the component source.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Feature Bento ZIP, place the source file at src/components/feature-bento.tsx, and copy the example into your own page or feature folder.

Target path

src/components/feature-bento.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is required by the delivered layout and utility classes.
The spotlight and micro-animation CSS is embedded in components/feature-bento.tsx.
ReactLoom verifies this source with Tailwind CSS 4.3.3; other Tailwind versions have not been verified.
Keep the component and example paths in Tailwind's source detection scope.
For the verified Next.js and Tailwind CSS 4 setup, register @tailwindcss/postcss in postcss.config.mjs.
Import tailwindcss from the application's global CSS entry point.