Warning Sign
Warning sign in the North American style: a black legend and subtext on a yellow diamond.
pnpm dlx shadcn add @01orbital/warning-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 { WarningSign } from "@/components/graphics/warning-sign"
// Every word on the page. Change copy here, not in the markup.
const COPY = { warning: "CURVE", warning2: "AHEAD" } as const
// Night ground: the faces are cut for a dark page.
export default function WarningSignDemo() {
return <WarningSign text={COPY.warning} subtext={COPY.warning2} />
}API reference
A yellow diamond warning sign with a short message, and an optional second line under it.
The element's box is the diamond's full footprint, so no corner hangs outside it, and the text sits in the square inside the diamond, so it stays on the yellow. Resize it with a size-* class: the diamond and the text area scale with it, the type does not.
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