Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

Marker

Status markers for live state, ordered points, and contextual cues, with solid dots and pulsing presence indicators.

markerindicatorstatusdotpulsebadgeprimitivedashboard
Loading preview

Examples

Practical examples and common states for the same installable component.

Dot

Minimal circular marker for simple indicators - presence, availability, or category color.

examples/marker-dot.tsx
import { Marker } from "@/components/wensity/marker";


export function DotMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="dot" tone="success" />
      <Marker variant="dot" tone="warning" />
      <Marker variant="dot" tone="danger" />
      <Marker variant="dot" tone="info" />
      <Marker variant="dot" tone="neutral" />
    </div>
  );
}

Pulse

Animated marker for live, active, or streaming states. Respects prefers-reduced-motion.

examples/marker-pulse.tsx
import { Marker } from "@/components/wensity/marker";


export function PulseMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="pulse" tone="success" />
      <Marker variant="pulse" tone="warning" />
      <Marker variant="pulse" tone="danger" />
    </div>
  );
}

Numbered

Displays ordered positions using numeric markers for steps, rankings, or lists.

examples/marker-numbered.tsx
import { Marker } from "@/components/wensity/marker";


export function NumberedMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="numbered" number={1} tone="brand" />
      <Marker variant="numbered" number={2} tone="brand" />
      <Marker variant="numbered" number={3} tone="brand" />
    </div>
  );
}

Icon

Uses contextual Tabler icons inside markers for semantic recognition at a glance.

examples/marker-icon.tsx
import { IconCheck, IconAlertTriangle, IconStar } from "@tabler/icons-react";
import { Marker } from "@/components/wensity/marker";


export function IconMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="icon" tone="success" icon={<IconCheck />} />
      <Marker variant="icon" tone="warning" icon={<IconAlertTriangle />} />
      <Marker variant="icon" tone="brand" icon={<IconStar />} />
    </div>
  );
}

Status

Represents states using semantic indicators paired with a label - online, away, offline, idle, syncing.

examples/marker-status.tsx
import { Marker } from "@/components/wensity/marker";


export function StatusMarkers() {
  return (
    <div className="flex items-center gap-5">
      <Marker variant="status" tone="success" label="Online" />
      <Marker variant="status" tone="warning" label="Away" />
      <Marker variant="status" tone="danger" label="Offline" />
    </div>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add marker

Usage

Import Marker from @/components/wensity/marker and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { Marker } from "@/components/wensity/marker";


export default function Example() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="dot" tone="success" />
      <Marker variant="pulse" tone="success" />
      <Marker variant="numbered" number={1} tone="brand" />
      <Marker variant="icon" icon={<IconCheck />} tone="success" />
      <Marker variant="status" tone="success" label="Online" />
    </div>
  );
}

Props

PropTypeDefaultDescription
variant"dot" | "pulse" | "numbered" | "icon" | "status""dot"What the marker renders. pulse animates to signal a live state.
tone"neutral" | "success" | "warning" | "danger" | "info" | "brand""neutral"Semantic colour.
size"sm" | "md" | "lg""md"Marker size.
numbernumber-Value shown when variant is numbered.
iconReact.ReactNode-Icon shown when variant is icon.
labelReact.ReactNode-Text shown when variant is status.
asChildboolean-Renders the child element instead of a span, keeping styles.