Uai Blocks Route Summary

Component

About

Travel modes, stops, totals, and turn-by-turn directions for a route.

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

Code

How Uai Blocks Route Summary is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";

import {
  ArrowUp,
  Bike,
  Car,
  CornerUpLeft,
  CornerUpRight,
  Footprints,
  MapPinCheck,
  Share2,
  TrainFront,
} from "lucide-react";
import { useState } from "react";
import {
  RouteSummary,
  RouteSummaryAction,
  RouteSummaryActions,
  RouteSummaryDetail,
  RouteSummaryDuration,
  RouteSummaryMode,
  RouteSummaryModes,
  RouteSummaryOverview,
  RouteSummaryStep,
  RouteSummarySteps,
  RouteSummaryStop,
  RouteSummaryStops,
  type RouteSummaryVariant,
} from "@/components/ui/uai-route-summary";

const modes = {
  drive: { name: "Drive", icon: Car, minutes: 18, distance: "6.2 mi", arrive: "9:42 AM" },
  transit: {
    name: "Transit",
    icon: TrainFront,
    minutes: 31,
    distance: "5.8 mi",
    arrive: "9:55 AM",
  },
  bike: { name: "Bike", icon: Bike, minutes: 27, distance: "5.1 mi", arrive: "9:51 AM" },
  walk: { name: "Walk", icon: Footprints, minutes: 96, distance: "4.9 mi", arrive: "11:00 AM" },
} as const;
type Mode = keyof typeof modes;

function formatMinutes(minutes: number) {
  return minutes < 60 ? `${minutes} min` : `${Math.floor(minutes / 60)} h ${minutes % 60} min`;
}

export function RouteSummaryPreview({ variant = "card" }: { variant?: RouteSummaryVariant }) {
  const [mode, setMode] = useState<Mode>("drive");
  const current = modes[mode];
  return (
    <RouteSummary variant={variant} aria-label="Route to Pier Park">
      <RouteSummaryModes value={mode} onValueChange={(next) => setMode(next as Mode)}>
        {(Object.keys(modes) as Mode[]).map((id) => {
          const { name, icon: Icon, minutes } = modes[id];
          return (
            <RouteSummaryMode key={id} value={id} label={`${name}, ${formatMinutes(minutes)}`}>
              <Icon aria-hidden="true" />
              {variant !== "compact" && (
                <span>{minutes < 60 ? minutes : `${Math.floor(minutes / 60)}h`}</span>
              )}
            </RouteSummaryMode>
          );
        })}
      </RouteSummaryModes>

      <RouteSummaryStops>
        <RouteSummaryStop kind="origin">Your location</RouteSummaryStop>
        {variant !== "compact" && <RouteSummaryStop>Lume Bakery</RouteSummaryStop>}
        <RouteSummaryStop kind="destination">Pier Park, Bayview</RouteSummaryStop>
      </RouteSummaryStops>

      <RouteSummaryOverview>
        <RouteSummaryDuration>{formatMinutes(current.minutes)}</RouteSummaryDuration>
        <RouteSummaryDetail>{current.distance}</RouteSummaryDetail>
        <RouteSummaryDetail>Arrive {current.arrive}</RouteSummaryDetail>
        {mode === "drive" && (
          <RouteSummaryDetail data-tone="warning">Light traffic on Bay Rd</RouteSummaryDetail>
        )}
      </RouteSummaryOverview>

      {variant !== "compact" && (
        <RouteSummarySteps>
          <RouteSummaryStep distance="0.3 mi">
            <ArrowUp aria-hidden="true" />
            Head north on Harbor Street
          </RouteSummaryStep>
          <RouteSummaryStep distance="2.1 mi">
            <CornerUpRight aria-hidden="true" />
            Turn right onto Bay Road
          </RouteSummaryStep>
          <RouteSummaryStep distance="3.8 mi">
            <CornerUpLeft aria-hidden="true" />
            Turn left onto Shoreline Avenue
          </RouteSummaryStep>
          <RouteSummaryStep>
            <MapPinCheck aria-hidden="true" />
            Arrive at Pier Park, on the right
          </RouteSummaryStep>
        </RouteSummarySteps>
      )}

      <RouteSummaryActions>
        <RouteSummaryAction emphasis="primary">Start</RouteSummaryAction>
        <RouteSummaryAction>
          <Share2 aria-hidden="true" />
          Send to phone
        </RouteSummaryAction>
      </RouteSummaryActions>
    </RouteSummary>
  );
}

function SourceSpecimen(){return <RouteSummaryPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}