Compass

Component 8

About

A liquid-damped compass. The card swings past the mark and settles while a lit display reads the bearing, and your hand turns the knurled bezel one degree a click. A real slider for screen readers (0 to 359, spoken as "274 degrees, west"), with arrow, Shift and Page keys. It is drawn from your shadcn theme and follows .dark. MIT. More like it: tactileui.dev

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Compass to your project and fits it to your theme.

Code

How Compass is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect, useState } from "react";
import { CompassDial } from "@/components/ui/compass";

const key = "min-h-11 rounded-lg border border-border bg-background px-[18px] py-2.5 text-[15px] font-semibold text-foreground hover:bg-muted";

export default function CompassDemo() {
  const [bearing, setBearing] = useState(0);
  // Swing round to a bearing a moment after it loads, so the card is seen overshooting and settling.
  useEffect(() => {
    const t = setTimeout(() => setBearing(274), 500);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="box-border flex min-h-screen w-full flex-col items-center justify-center gap-7 bg-background p-8 text-foreground">
      <CompassDial value={bearing} onChange={setBearing} size={340} />
      <div className="flex gap-3">
        <button type="button" className={key} onClick={() => setBearing((b) => (b + 150 + Math.round(Math.random() * 60)) % 360)}>Swing</button>
        <button type="button" className={key} onClick={() => setBearing(0)}>North</button>
      </div>
    </div>
  );
}