Marker

Component

About

A small status marker component for showing live state, order position, icons, or contextual status labels with dot, pulse, numbered, icon and status variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Marker to your project and fits it to your theme.

Code

How Marker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Marker } from "@/components/ui/marker";
import { Check, Star } from "lucide-react";

export default function MarkerDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8 p-10">
      <div className="flex items-center gap-2">
        <Marker variant="dot" tone="success" />
        <span className="text-sm text-[var(--foreground)]">Dot</span>
      </div>
      <div className="flex items-center gap-2">
        <Marker variant="pulse" tone="info" />
        <span className="text-sm text-[var(--foreground)]">Pulse</span>
      </div>
      <div className="flex items-center gap-2">
        <Marker variant="numbered" tone="brand" number={3} />
        <span className="text-sm text-[var(--foreground)]">Numbered</span>
      </div>
      <div className="flex items-center gap-2">
        <Marker variant="icon" tone="warning" icon={<Star />} />
        <span className="text-sm text-[var(--foreground)]">Icon</span>
      </div>
      <Marker variant="status" tone="success" label="Operational" />
    </div>
  );
}