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
Grouped marker display for high-density map areas. Shows count badge with mineral accent and expands on interaction. Used when multiple listings/places overlap at the current zoom level.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
interface MapClusterProps extends React.ComponentProps<"div"> {
count: number
color?: string
size?: "sm" | "md" | "lg"
onClick?: () => void
}
const sizeClasses = {
sm: "size-8 text-xs",
md: "size-10 text-sm",
lg: "size-12 text-base",
}
function MapCluster({ count, color = "var(--color-malachite,#64FFDA)", size = "md", onClick, loading = false, className, ...props }: MapClusterProps) {
return (
<div
data-slot="map-cluster" data-portal="https://design.nyuchi.com/components/map-cluster"
onClick={onClick}
role={onClick ? "button" : undefined}
tabIndex={onClick ? 0 : undefined}
aria-label={`Cluster of ${count} items`}
className={cn(
"flex items-center justify-center rounded-full font-bold shadow-lg",
sizeClasses[size],
onClick && "cursor-pointer hover:scale-110 transition-transform",
className
)}
style={{ backgroundColor: `${color}30`, color, border: `2px solid ${color}` }}
{...props}
>
{count > 99 ? "99+" : count}
</div>
)
}
export { MapCluster }
export type { MapClusterProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/map-clusterFetch this component's metadata and source code from the registry API.
/api/v1/ui/map-cluster