UnreadDot

Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.

Install

npx shadcn@latest add https://gear5-ui.vercel.app/r/unread-dot.json

Copies the source into your project.

Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.

"use client";

import React from "react";

export interface UnreadDotProps {
  size?: number;
  label?: string;
}

export function UnreadDot({ size = 8, label = "Unread" }: UnreadDotProps) {
  return (
    <span
      role="status"
      aria-label={label}
      aria-hidden={!label ? undefined : false}
      style={{
        display: "inline-block",
        width: size,
        height: size,
        borderRadius: "50%",
        backgroundColor: "#1a73e8",
        flexShrink: 0,
      }}
    />
  );
}

• 📦Bundled, minified and gzipped against its tier budget
• ♿Audited by axe in the state previewed above
• 🖥️Rendered through react-dom/server with no browser globals
• 🔒Scanned for network calls, dangerous sinks, and unguarded animation