map-route

Route visualization overlay for map with waypoints, distance, and estimated time. Supports driving, walking, transit, and cycling modes. Used by Transport mini-app for commute planning and route display.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

import * as React from "react"
import { cn } from "@/lib/utils"

type RouteMode = "driving" | "walking" | "transit" | "cycling"

interface MapRouteProps extends React.ComponentProps<"div"> {
  /** Route polyline coordinates (for display info only — rendering handled by map lib) */
  distance?: string
  duration?: string
  mode?: RouteMode
  waypoints?: { name: string; lat: number; lng: number }[]
  active?: boolean
}

function MapRoute({ distance, duration, mode = "driving", waypoints, active = true, loading = false, className, ...props }: MapRouteProps) {
  return (
    <div
      data-slot="map-route" data-portal="https://design.nyuchi.com/components/map-route"
      aria-label={`Route: ${distance || "Unknown distance"}, ${duration || "Unknown duration"} by ${mode}`}
      className={cn(
        "flex items-center gap-3 rounded-[var(--radius-md,12px)] px-3 py-2 text-xs",
        active ? "bg-[var(--color-malachite,#64FFDA)]/10 text-foreground" : "bg-muted text-muted-foreground",
        className
      )}
      {...props}
    >
      <span className="capitalize font-medium">{mode}</span>
      {distance && <span>{distance}</span>}
      {duration && <span className="font-medium">{duration}</span>}
      {waypoints && waypoints.length > 0 && (
        <span className="text-muted-foreground">· {waypoints.length} stops</span>
      )}
    </div>
  )
}

export { MapRoute }
export type { MapRouteProps }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/map-route

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/map-route

Dependencies

map-view

Source code

No interactive demo is registered for this component yet — the source is shown directly.

import * as React from "react"
import { cn } from "@/lib/utils"

type RouteMode = "driving" | "walking" | "transit" | "cycling"

interface MapRouteProps extends React.ComponentProps<"div"> {
  /** Route polyline coordinates (for display info only — rendering handled by map lib) */
  distance?: string
  duration?: string
  mode?: RouteMode
  waypoints?: { name: string; lat: number; lng: number }[]
  active?: boolean
}

function MapRoute({ distance, duration, mode = "driving", waypoints, active = true, loading = false, className, ...props }: MapRouteProps) {
  return (
    <div
      data-slot="map-route" data-portal="https://design.nyuchi.com/components/map-route"
      aria-label={`Route: ${distance || "Unknown distance"}, ${duration || "Unknown duration"} by ${mode}`}
      className={cn(
        "flex items-center gap-3 rounded-[var(--radius-md,12px)] px-3 py-2 text-xs",
        active ? "bg-[var(--color-malachite,#64FFDA)]/10 text-foreground" : "bg-muted text-muted-foreground",
        className
      )}
      {...props}
    >
      <span className="capitalize font-medium">{mode}</span>
      {distance && <span>{distance}</span>}
      {duration && <span className="font-medium">{duration}</span>}
      {waypoints && waypoints.length > 0 && (
        <span className="text-muted-foreground">· {waypoints.length} stops</span>
      )}
    </div>
  )
}

export { MapRoute }
export type { MapRouteProps }