Assignees

Collapsible roster card — avatar on the left, name on the right, one row per teammate.

Blake Riley
Benedict Doherty
Alisa Hester

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/assignees.json

Usage

Drop into a project-detail sidebar or any panel that needs a collapsible roster.

TSImport

import { Assignees } from "@/components/blocks/assignees";

TSExample

import { Assignees } from "@/components/blocks/assignees";

export function Example() {
  return (
    <Assignees
      title="Your Squad"
      defaultOpen
      assignees={[
        { name: "Blake Riley", initials: "BR", avatarSrc: "/images/avatar/blake-riley.jpg" },
        { name: "Benedict Doherty", initials: "BD", avatarSrc: "/images/avatar/benedict-doherty.jpg" },
      ]}
    />
  );
}

Composition

CollapsibleSection wrapping a DescriptionList — one row per assignee.

Assignees                              (CollapsibleSection)
├── title="Assignees"                  (heading on the trigger row)
├── variant="outline | default | ghost" (passed through to CollapsibleSection)
├── defaultOpen                        (start expanded)
└── assignees={[…]}
     ├── name                           (display string, right column)
     ├── initials                       (fallback when no avatarSrc)
     ├── avatarSrc                      (Avatar image URL — left column)
     ├── alt                            (override avatar alt; defaults to name)
     └── meta                           (optional secondary line below the name)

Default

Outline-variant CollapsibleSection wrapping a two-column DescriptionList — avatar in the term slot, name in the details slot.

Blake Riley
Benedict Doherty
Alisa Hester

With meta

Pass `meta` on any assignee to render a secondary muted line below the name (role, email, etc.).

Blake RileyLead designer
Benedict DohertySenior creative director
Alisa HesterProject manager

Ghost variant

Pass `variant="ghost"` to drop the card border — useful inside a sidebar or another card.

Blake Riley
Benedict Doherty
Alisa Hester

Initials only

Omit `avatarSrc` and the Avatar primitive renders a colored initials chip instead.

BR
Blake Riley
BD
Benedict Doherty
AH
Alisa Hester

API Reference

Props for Assignees and the AssigneeSpec row config.

Assignees

Prop	Type	Default	Description
`title`	ReactNode	"Assignees"	Heading rendered on the CollapsibleSection trigger row.
`assignees`	AssigneeSpec[]	—	Rows rendered in the DescriptionList. See the AssigneeSpec table below.
`variant`	"default" \| "outline" \| "ghost"	"outline"	CollapsibleSection visual style.
`defaultOpen`	boolean	—	Render the section expanded on mount.
`className`	string	—	Override or extend the wrapper classes.

AssigneeSpec

Prop	Type	Default	Description
`name`	string	—	Display name shown to the right of the avatar.
`initials`	string	—	Initials fallback when no `avatarSrc` is set.
`avatarSrc`	string	—	Image URL passed to `<Avatar src>`.
`alt`	string	—	Override the avatar alt text. Defaults to `name`.
`meta`	ReactNode	—	Optional secondary line below the name (role, email, etc.).