Compass
A game compass strip for React: ticks and the eight points sliding past a notch, with markers for objectives at their bearings.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/compassExamples
Turn and watch the markers
NWNNEE
030import { useState } from "react";import { Compass } from "@/components/zero/compass";import { Slider } from "@/components/zero/slider";const markers = [ { bearing: 80, label: "Drop zone" }, { bearing: 350, label: "North gate", tone: "legendary" as const }, { bearing: 200, label: "Patrol", tone: "danger" as const },];export default function CompassHeading() { const [heading, setHeading] = useState(30); return ( <div className="grid w-full max-w-xl gap-6"> <Compass heading={heading} markers={markers} /> <Slider value={heading} onValueChange={(value) => setHeading(value as number)} min={0} max={359} aria-label="Turn" /> </div> );}Behaviour
A slab cut on both sides holding a tick every 15°, the eight points lettered (north in the accent), a notch in the middle for where you face, and the bearing under it. Markers ride the strip at their bearing; one outside the view waits at the nearer edge with a chevron pointing the way.
Feed heading from your game every frame: the strip draws, it does not animate. Screen readers get the heading and each marker's direction in words ("Drop zone: 50 degrees right").
Props
Compass
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | number | — | Where you face, in degrees; 0 is north, 90 east. |
| markers | { bearing: number; label: string; tone?: "accent" | "danger" | "rare" | "legendary" }[] | [] | Things to point at. |
| fov | number | 180 | How many degrees the strip spans. |