Exit Sign
Highway exit sign graphic in the North American style: an exit number tab, destination and distance on a green face, with an optional row of gas, food and lodging icons.
pnpm dlx shadcn add @01orbital/exit-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 { ExitSign } from "@/components/graphics/exit-sign"
// Every word on the page. Change copy here, not in the markup.
const COPY = { exit: "Riverside", distance: "1/2 MILE" } as const
// Night ground: the faces are cut for a dark page.
export default function ExitSignDemo() {
return (
<ExitSign
exitNumber="82"
destination={COPY.exit}
distance={COPY.distance}
services={["gas", "food", "lodging"]}
/>
)
}Examples
New
exit-sign-festival-parking
API reference
A green exit sign: a yellow "EXIT" tab on the top-right corner, the destination, an optional distance, and an optional row of service icons.
Prop
Type
It also accepts the HTML attributes of the element it renders.
Dependencies
npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
font-overpass