WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Data Display

Presence

Data DisplayPresence
MarkdownScheduler
Live props
Layout
max4
Appearance
size
indicator
overlap
surfaceColor
Content
showOffline
summary
hideSelf
locale
Behavior
showList
tooltips
responsive
align
State
defaultOpen
Code
import { Presence } from "@/components/ui/presence"

<Presence />
Pro

v1.0.0·Added in 1.0.0

Who is here right now: an avatar stack with status rings and a who-is-here list, a typing indicator, live cursors and last seen.

People joining pop into the stack on a quick spring and the others slide over; people leaving shrink away, and a status change only recolors the ring, so nobody jumps places. Hover or focus an avatar for the name and what they are doing (a long press on touch). Tap any avatar or the +N chip to open the full list, grouped as here now, away or busy, and offline with the time last seen: a popover on desktop, a bottom sheet on phones. Tab lands on the stack once; Left and Right (Home and End) move between avatars, Enter or Space opens the list, Escape closes it and focus returns to the avatar you pressed. The typing line fades in with the names, lingers 400ms after the last keystroke so it never flickers, and is announced politely. Cursors glide to each new position on a spring (they jump with reduced motion) and their name chip fades to the bare arrow after a few idle seconds. In the playground, Daniel can join and leave and Ryan can come back, while two scripted cursors move over the invoice.

Add to a project

npx wingo-ui@latest add presence

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionavatartooltippopoverrelative-timeuse-localeuse-controllable-stateuse-media-querymotiontonesui-config

Files

  • components/ui/presence.tsx

See also

AvatarTooltipPopoverRelative timelib
PreviousMarkdownNext Scheduler

Invoice

Invoice #2026-0412

Tech Solutions LLC · Austin, TX

  • Acme CRM Business license

    12 users × 12 months

    $8,640

  • Setup and data migration

    24 hours × $120

    $2,880

  • Sales team training

    one session, at the client's office

    $960

Subtotal
$12,480
Sales tax 8.875%
$1,108
Total due
$13,588
Julia is typing…
Add a comment…

showList: on · tooltips: on · responsive: on