Live Dot

A presence or broadcast indicator. A live or online dot sends a soft ring outward on a loop, and the colour changes between statuses. Away, busy and offline stay still. The status is read out as words, so it never relies on colour alone, and with reduced motion the ring doesn't pulse. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add live-dot

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/live-dot.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { LiveDot } from "@/components/ui/live-dot";

export default function Example() {
  return <LiveDot status="live" showLabel />;
}

Props