Bento

Bento Integrations

Pronew

A list of integrations where one connects and lights up.

Plugs into your stack

Connect the tools your team already lives in. One click, no API keys to paste.

Installation

npx shadcn@latest add @blank-pro/bento-integrations

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoIntegrations } from "@/components/ui/bento-integrations"

<BentoIntegrations
  items={[
    {
      name: "Team chat",
      description: "Post to any channel",
      icon: <MessageSquareIcon />,
      connected: true,
    },
    {
      name: "Calendar",
      description: "Turn deadlines into events",
      icon: <CalendarIcon />,
    },
  ]}
/>

Rows marked connected run Connect, a spinner, then Connected once the card is in view, and light up as they land. Use lucide icons or your own neutral marks rather than third-party logos, which would bring their colors into a monochrome card. connectLabel and connectedLabel translate the button.