Bento grids

Asymmetric marketing grids that highlight product features. Pick the variant that matches your storyline.

Preview

Deploy faster

Everything you need to deploy your app

Mobile friendly

Tailored layouts that feel right on any screen.

Performance

Sub-second renders even on slow connections.

Security

SOC 2 controls and per-tenant isolation by default.

Powerful APIs

Composable endpoints, versioned and well-typed.

Deploy faster

Everything you need to deploy your app

Releases

Push to deploy

Ship to production from a single click.

Integrations

Connect your tools

Slack, Linear, GitHub — first-class out of the box.

Security

Advanced access control

Role and team scopes, SSO, audit logs.

Performance

Lightning-fast builds

Incremental, cached, parallelized.

React preview

LiveView (HEEx)

alias DesignSystem.UI.BentoGrids

<BentoGrids.bento_grid
  eyebrow="Deploy faster"
  title="Everything you need to deploy your app"
  variant="three-column"
>
  <:tile
    position="left"
    name="Mobile friendly"
    description="Tailored layouts that feel right on any screen."
  />
  <:tile
    position="top-middle"
    name="Performance"
    description="Sub-second renders even on slow connections."
  />
  <:tile
    position="bottom-middle"
    name="Security"
    description="SOC 2 controls and per-tenant isolation."
  />
  <:tile
    position="right"
    name="Powerful APIs"
    description="Composable endpoints, versioned and typed."
  />
</BentoGrids.bento_grid>

React (JSX)

import { BentoGrid } from "../ui/index.mjs"

const tiles = [
  { position: "left", name: "Mobile friendly", description: "..." },
  { position: "top-middle", name: "Performance", description: "..." },
  { position: "bottom-middle", name: "Security", description: "..." },
  { position: "right", name: "Powerful APIs", description: "..." },
]

<BentoGrid
  eyebrow="Deploy faster"
  title="Everything you need to deploy your app"
  variant="three-column"
  tiles={tiles}
/>