Team list with online, away and offline status dots.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/avatar-status
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { AvatarsWithStatus } from "@/components/nextui/avatar-status";45export function TeamList() {6return (7<AvatarsWithStatus8people={[9{ name: "Linh Pham", role: "Support", initials: "LP", status: "online" },10{ name: "Noah Kim", role: "Sales", initials: "NK", status: "away", src: "/avatars/noah.png" },11]}12onSelect={(person) => console.log(person.name)}13/>14);15}
| Prop | Type | Default | Description |
|---|---|---|---|
| people | AvatarStatusItem[] | 3 sample people | Rows: name, role, initials, status and optional src |
| onSelect | (person: AvatarStatusItem) => void | – | Called when a row is clicked; rows become clickable when set |
| className | string | – | Extra classes on the list |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.