Skip to Content

Highway Sign

Highway guide sign in the North American style: a route shield, direction and destinations with distances, on a green face in a road-sign typeface.

pnpm dlx shadcn add @01orbital/highway-sign

Usage

import { HighwaySign } from "@/components/graphics/highway-sign"

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

const DESTINATIONS = [
  { name: "Cheyenne", distance: "47" },
  { name: "Salt Lake City", distance: "432" },
] as const

// Night ground: the faces are cut for a dark page.
export default function HighwaySignDemo() {
  return (
    <HighwaySign
      direction="west"
      route={COPY.route}
      destinations={[...DESTINATIONS]}
    />
  )
}

Examples

New

highway-sign-route-advisory

highway-sign-route-advisory

Route Advisory

Road trip card example showing the HighwaySign: a campervan trip on dark green with a sign for the next stretch, plus a folded campsite note.

pnpm dlx shadcn add @01orbital/highway-sign-route-advisory

API reference

A green highway guide sign: an optional direction and route above a list of destinations, each with an optional distance on the right. An exit number, when given, sits on a tab over the top edge.

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