nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Custom branded map pin with mineral-colored variants and verification tier indicators. Supports default, verified, featured, and cluster states. The pin shape uses the Nyuchi pill radius for consistency. Maps to places.places and events.event tables.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
type MineralColor = "cobalt" | "tanzanite" | "malachite" | "gold" | "terracotta"
interface MapMarkerProps extends React.ComponentProps<"div"> {
/** Mineral color variant */
color?: MineralColor
/** Verification tier (0-4) — shows check for verified */
tier?: 0 | 1 | 2 | 3 | 4
/** Display as cluster with count */
cluster?: number
/** Active/selected state */
active?: boolean
/** Label text below pin */
label?: string
/** Click handler */
onClick?: () => void
/** Pin size */
size?: "sm" | "md" | "lg"
}
const mineralValues: Record<MineralColor, string> = {
cobalt: "var(--color-cobalt, #00B0FF)",
tanzanite: "var(--color-tanzanite, #B388FF)",
malachite: "var(--color-malachite, #64FFDA)",
gold: "var(--color-gold, #FFD740)",
terracotta: "var(--color-terracotta, #D4A574)",
}
const sizes = { sm: "size-6 text-[9px]", md: "size-8 text-xs", lg: "size-10 text-sm" }
function MapMarker({
color = "malachite",
tier,
cluster,
active = false,
label,
onClick,
size = "md",
loading = false, className,
...props
}: MapMarkerProps) {
const bg = mineralValues[color]
return (
<div
data-slot="map-marker" data-portal="https://design.nyuchi.com/components/map-marker"
onClick={onClick}
role={onClick ? "button" : "img"}
tabIndex={onClick ? 0 : undefined}
aria-label={label || (cluster ? `Cluster of ${cluster}` : "Map marker")}
className={cn(
"relative flex flex-col items-center",
active && "z-10 scale-125",
onClick && "cursor-pointer",
"transition-transform",
className
)}
{...props}
>
{/* Pin body */}
<div
className={cn("flex items-center justify-center rounded-full font-bold shadow-md", sizes[size])}
style={{ backgroundColor: bg, color: "var(--foreground, #0A0A0A)" }}
>
{cluster ? (cluster > 99 ? "99+" : cluster)
: tier !== undefined && tier > 0 ? "✓"
: ""}
</div>
{/* Pin tail */}
<div className="size-0 border-x-4 border-t-4 border-x-transparent" style={{ borderTopColor: bg }} />
{/* Label */}
{label && (
<span className="mt-0.5 max-w-[80px] truncate whitespace-nowrap text-center text-[9px] font-medium text-foreground drop-shadow-sm">
{label}
</span>
)}
</div>
)
}
export { MapMarker }
export type { MapMarkerProps, MineralColor }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/map-markernpx shadcn@latest add https://mzizi.dev/api/v1/ui/map-marker