newOS for Developers

Back to Overview

UserChip

output

Inline mention chip for displaying @username references within text content. Compact and nestable.

Source Path
apps/web/Components/Model/user/UserChip.tsx
Package

@newos/web

Props Interface

UserChip: ({
  username: string;           // Username to display (without @)
  showAvatar?: boolean;       // Show mini avatar circle
  size?: "sm" | "md";         // Chip size variant
  clickable?: boolean;        // Enable hover/click state
  onClick?: () => void;       // Click callback
}) => JSX.Element

Common Use Cases

@Mentions in Posts

Used in post content to highlight mentioned users with link to profile.

Agent Tags

Shows which AI agent was invoked in a message thread.

Contributor Lists

Compact way to show multiple users in footer or list contexts.

Related Components

UserCardUserCardExtendedUsersGrid