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-signThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
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
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