Skip to content
Get Pro
Sections, new

Bento Showcase

An asymmetric bento whose cells run small live pieces: a chart that takes a point each second, a switch you can flip, a counter that rolls, a code snippet a passing pointer sweeps light across, and a build status that moves on.

$149 once · every Pro piece

Customize

Click a cell and it morphs into an expanded view inside the section: the surface grows out of the cell on a spring, the title travels to the heading and the rest rises in. Escape, the close button or a click outside folds it back. Arrow keys move between cells. The grid is laid out by container queries, so it reads complete before scripts run, and without them each cell shows its whole copy.

Install

npx shadcn@latest add @obsyde/bento

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Bento } from '@/components/obsyde/ember/bento/Bento';

export function Example() {
  return (
    <Bento />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/bento/Bento.tsxcomponent
  • ember/bento/bento-demo.cssstyles
  • ember/bento/micro.cssstyles
  • ember/bento/bento.cssstyles
  • ember/bento/micro.tsxmodule
  • ember/bento/BentoDemo.tsxdemo
  • ember/blocks-kit/blocks-kit.cssshared
  • ember/shared/ember.cssshared
  • ember/blocks-kit/kit.tsxshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/copy-button/CopyButton.tsxshared
  • ember/copy-button/copy-button.cssshared
  • ember/status/Status.tsxshared
  • ember/status/status.cssshared
  • ember/status-kit/kit.tsshared
  • ember/shared/chart-kit.tsshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/rolling-number.cssshared
  • ember/switch/Switch.tsxshared
  • ember/switch/switch.cssshared
  • ember/actions-kit/kit.tsshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
openOpen cell'none' | 'chart' | 'switch' | 'status' | 'code' | 'counter''none'
rowHeightRow heightnumber220