Mokri

Preview

sanwal

sanwal@vercel.com

kashif

kashif@vercel.com

nankana

nankana@vercel.com

Installation

<> import.ts

import { UserList, sampleUsers } from "@/components/ui/user-list"

Code

<> component.tsx

import { UserList } from "@/components/ui/user-list"

<UserList />

API Reference

UserList

A user list display with avatars and add action.

<> import.ts

import { UserList, sampleUsers } from "@/components/ui/user-list"

Props

Prop	Type	Default	Description
`users`	`Array<{ id: string; name: string; email: string; avatar?: string; avatarFallback?: string }>`	—	Users to render
`onAddUser`	`(userId: string) => void`	—	Called when add button clicked
`className`	`string`	`""`	Additional CSS classes

Examples

Example 1

<> example.tsx

// Basic
<UserList users={sampleUsers} onAddUser={(id) => console.log(id)} />

Example 2

<> example.tsx

// With custom handler
<UserList 
  users={sampleUsers} 
  onAddUser={(userId) => {
    console.log('Added user:', userId);
    // Add your logic here
  }} 
/>