Skip to Content

Mile Marker

Mile marker sign in the North American style: a route and mile number on a narrow green post.

pnpm dlx shadcn add @01orbital/mile-marker

Usage

import { MileMarker } from "@/components/graphics/mile-marker"

// Every word on the page. Change copy here, not in the markup.
const COPY = { route: "I-80" } as const

// Night ground: the faces are cut for a dark page.
export default function MileMarkerDemo() {
  return <MileMarker mile={214} route={COPY.route} />
}

API reference

A small green mile marker: an optional route name, the mile number and the word "MILE".

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: cn. The CLI installs them for you.

Registry pieces it installs with it:

  • font-overpass