# Standings Feature > A keyword-tracking feature section. On the left, the keywords an app could rank for, each with its monthly searches, the app's rank and how far it moved; on the right, the race for the picked keyword. Pick another and the same six apps slide to their new places, with a suggestion for how to climb under them. The keywords play by themselves, a line under the current one filling like a timer, until the visitor picks one. A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/standings-feature). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/standings-feature - Screenshot: https://shadcn.exchange/shot/keyframeui/standings-feature/light.png - Registry item: https://keyframeui.com/r/standings-feature.json - Categories: blocks, feature-sections - Listed: 2026-11-02, source last changed 2026-11-02 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/keyframeui/standings-feature.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - Registry items: `https://keyframeui.com/r/standings.json`, `utils` ## Notes from the registry Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/standings-feature ## Files ### `registry/blocks/standings-feature.tsx` ```tsx "use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Standings, type StandingsEntry } from "@/components/ui/standings"; /* ── Content ───────────────────────────────────────────────── * Everything you'd change to make the section yours: the copy, * the apps, and the keywords. Each keyword holds every app's * share of the installs that come from that search; pick one * and the apps race to its order. Your rank in the list is * worked out from the same numbers, so the two always agree. * ─────────────────────────────────────────────────────────── */ /** The one accent: buttons, your row, the picked keyword and its timer. */ const ACCENT = "#ff5a1f"; const BADGE = "Keyword tracking"; const HEADLINE = "See which searches you can win."; const SUBLINE = "Every keyword your app could rank for, how many people search it each month, and who's ahead of you. Pick one to watch its race."; const PRIMARY_CTA = { label: "Track my keywords", href: "#start" }; const SECONDARY_CTA = { label: "See a sample report", href: "#sample" }; const LIST = { title: "Keywords", note: "5 of 214 · by searches", columns: ["Keyword", "Searches", "Rank", "30 days"] }; const PANEL = { prefix: "Results for", unit: "Share of installs from this search" }; const SOURCES = { label: "Rankings from", items: ["App Store", "Google Play", "Any CSV"] }; /** ms each keyword stays up while the list plays by itself, until a visitor picks one. */ const CYCLE = 4200; type App = { id: string; label: string; detail: string; from: string; to: string; you?: boolean }; const APPS: App[] = [ { id: "fieldnote", label: "Fieldnote", detail: "Notes that file themselves", from: "#ff8a3d", to: "#ff3d00", you: true }, { id: "tally", label: "Tally Notes", detail: "Notes & lists", from: "#4f8bff", to: "#1d4ed8" }, { id: "scribe", label: "Scribe", detail: "Voice to text", from: "#a78bfa", to: "#6d28d9" }, { id: "margin", label: "Margin", detail: "Linked notes", from: "#34d399", to: "#059669" }, { id: "quillbox", label: "Quillbox", detail: "Handwriting", from: "#fb7185", to: "#e11d48" }, { id: "inkpad", label: "Inkpad", detail: "Sketch & annotate", from: "#fbbf24", to: "#ea580c" }, ]; type Keyword = { id: string; label: string; /** Monthly searches. */ searches: number; /** Places your rank moved in the last 30 days. */ moved: number; /** Each app's share of the installs from this search, in percent. */ shares: Record; /** What Rung suggests changing to climb this one. */ tip: string; }; const KEYWORDS: Keyword[] = [ { id: "notes-app", label: "notes app", searches: 90_000, moved: 2, shares: { tally: 31, scribe: 24, fieldnote: 17, margin: 12, quillbox: 9, inkpad: 7 }, tip: "Put “notes app” in your subtitle. The two apps above you both have it.", }, { id: "meeting-notes", label: "meeting notes", searches: 36_000, moved: 1, shares: { fieldnote: 34, scribe: 22, tally: 18, margin: 11, inkpad: 9, quillbox: 6 }, tip: "You lead this one. Keep the meeting screenshot first in your gallery.", }, { id: "voice-memo", label: "voice memo to text", searches: 22_000, moved: 4, shares: { scribe: 29, fieldnote: 27, quillbox: 19, tally: 12, inkpad: 8, margin: 5 }, tip: "Two points behind Scribe. Mention transcription in the first line of your description.", }, { id: "second-brain", label: "second brain", searches: 14_000, moved: -1, shares: { margin: 36, tally: 21, scribe: 17, inkpad: 12, fieldnote: 9, quillbox: 5 }, tip: "Margin owns this term. Spend the keyword field on “meeting notes” instead.", }, { id: "handwriting", label: "handwriting notes", searches: 9_000, moved: 0, shares: { inkpad: 38, quillbox: 23, fieldnote: 18, scribe: 11, tally: 6, margin: 4 }, tip: "Holding third. A screenshot of pencil input could take second from Quillbox.", }, ]; const compact = new Intl.NumberFormat("en-US", { notation: "compact" }); const top = Math.max(...KEYWORDS.map((k) => k.searches)); const youId = APPS.find((app) => app.you)?.id ?? ""; /** Your place for a keyword, from its shares. */ function placeFor(keyword: Keyword) { return [...APPS].sort((a, b) => keyword.shares[b.id] - keyword.shares[a.id]).findIndex((app) => app.id === youId) + 1; } const reducedQuery = "(prefers-reduced-motion: reduce)"; /* ── Section ─────────────────────────────────────────────── */ export function StandingsFeature() { const [active, setActive] = React.useState(0); const [picked, setPicked] = React.useState(false); const [auto, setAuto] = React.useState(false); const sectionRef = React.useRef(null); const tabs = React.useRef<(HTMLButtonElement | null)[]>([]); const timer = React.useRef(null); const keyword = KEYWORDS[active]; // The list plays by itself while it's on screen, until a visitor picks a keyword. React.useEffect(() => { const el = sectionRef.current; if (!el || picked || window.matchMedia(reducedQuery).matches) return; const io = new IntersectionObserver(([entry]) => setAuto(entry.isIntersecting), { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, [picked]); React.useEffect(() => { if (!auto || picked) return; const bar = timer.current?.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], { duration: CYCLE, easing: "linear", fill: "forwards", }); const id = window.setTimeout(() => setActive((i) => (i + 1) % KEYWORDS.length), CYCLE); return () => { window.clearTimeout(id); bar?.cancel(); }; }, [auto, picked, active]); const pick = (i: number) => { setPicked(true); setActive(i); }; const onKeyDown = (e: React.KeyboardEvent) => { const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0; if (!step) return; e.preventDefault(); const next = (active + step + KEYWORDS.length) % KEYWORDS.length; pick(next); tabs.current[next]?.focus(); }; const entries = React.useMemo( () => APPS.map((app) => ({ id: app.id, label: app.label, detail: app.detail, you: app.you, value: keyword.shares[app.id], icon: ( {app.label[0]} ), })), [keyword], ); return (
{/* The keywords: a vertical tab list that drives the race on the right. */}

{LIST.title}

{LIST.note}

{LIST.columns.map((column, i) => ( 1 && "text-right", i === 3 && "hidden sm:block")}> {column} ))}
{KEYWORDS.map((k, i) => { const selected = i === active; const place = placeFor(k); const filled = Math.max(1, Math.round((k.searches / top) * 5)); return ( ); })}

{SOURCES.label} {SOURCES.items.map((item) => ( {item} ))}

{/* The race for the picked keyword. */}

{PANEL.prefix} “{keyword.label}”

{PANEL.unit}

`${Math.round(v)}%`} className="border-t border-zinc-950/[0.07] [--standings-row:3rem] [--standings-surface:#ffffff] dark:border-white/[0.07] dark:[--standings-surface:#111113]" />

{keyword.tip}

); } /* ── Glyphs ──────────────────────────────────────────────── */ function SearchGlyph({ className }: { className?: string }) { return ( ); } function SparkGlyph({ className }: { className?: string }) { return ( ); } function Chevron({ className }: { className?: string }) { return ( ); } ```