BentoGrid

A responsive tile grid for showing live component renders on a landing page. Tiles can span columns and rows and link to their docs.

import { BentoGrid } from '@lobehub/ui/awesome';

NPM Source Edit

Landing

Default

Render real components inside each BentoCard rather than screenshots. The grid drops to two columns on tablets and one on phones.

Loading preview

APIs

BentoGrid

BentoGrid properties

children

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

columns

number

Columns on wide screens. The grid drops to two columns on tablets and one on phones.

Defaults to 4.

rowHeight

number

Minimum row height in pixels.

Defaults to 120.

Also accepts all native HTML and ARIA attributes.

BentoCard

BentoCard properties

children

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

The live content of the tile. Render real components, not screenshots.

colSpan

1 | 2 | 3 | 4

Columns the tile spans on wide screens.

Defaults to 1.

hint

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Short muted note on the right side of the header.

href

string

Makes the title a link, e.g. to the component page.

renderLink

LandingLinkRender

rowSpan

1 | 2 | 3

Rows the tile spans on wide screens.

Defaults to 1.

title

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Also accepts all native HTML and ARIA attributes.