Bento

Bento Presence

new

A team list hanging from a lit edge, with a live count of who is online.

Know who is around

Presence updates the moment someone joins a call or steps away, so you ping the person who can answer now.

Installation

npx shadcn@latest add @blank/bento-presence

Usage

import { BentoPresence } from "@/components/ui/bento-presence"

<BentoPresence
  title="Engineering"
  meta="12 members"
  label="members online"
  members={[
    {
      name: "Olivia Rhye",
      role: "Product designer",
      status: "Online",
      online: true,
    },
    { name: "Demi Wilkinson", role: "DevOps", status: "Away" },
  ]}
/>

The pill counts the members marked online and puts label after the number. status is free text, so "In a call" can still count as online. Green is the only color on the card: it means someone is reachable. The dots pulse only while the card is on screen, and not at all with reduced motion.