Bento

Bento Directory

Pronew

A workspace search that types its query and lights the row it lands on.

One search for everyone

Find a teammate, a partner or a whole company from two letters, and message them without leaving the result.

Installation

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

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

Usage

import { BentoDirectory } from "@/components/ui/bento-directory"

<BentoDirectory
  query="Mi"
  filters={["All", "People", "Companies"]}
  groups={[
    {
      label: "People",
      entries: [
        { name: "Mia Samson", detail: "Product designer", active: true },
        { name: "Adam Mills", detail: "Senior developer" },
      ],
    },
    {
      label: "Companies",
      entries: [
        { name: "Miro Labs", detail: "Design partner", icon: <BuildingIcon /> },
      ],
    },
  ]}
/>

The query types itself in when the card comes into view, then the results settle and the active entry lights up. The part of each name that matches the query is marked, so pick a query your names actually contain. An entry with an icon gets a round mark instead of an avatar, which keeps companies apart from people without a logo.