# Standings Hero
> A hero for an app-ranking tool. Beside a headline with two boxed words and a link field joined to its button, a store chart races through eight weeks: the visitor's app overtakes one row after another on its way from sixth to first, and the rank readout above it rolls over at each pass. With a navbar.
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-hero).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/standings-hero
- Screenshot: https://shadcn.exchange/shot/keyframeui/standings-hero/light.png
- Registry item: https://keyframeui.com/r/standings-hero.json
- Categories: blocks, hero-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/standings-hero.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`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/standings-hero
## Files
### `registry/blocks/standings-hero.tsx`
```tsx
"use client";
import * as React from "react";
import { Standings, type StandingsEntry } from "@/components/ui/standings";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the hero yours: the nav, the
* headline and its two boxed words, the link field, and the
* chart the product card races through. Your app is the entry
* with `you: true`; the rank readout above the chart follows
* it as it overtakes the others.
* ─────────────────────────────────────────────────────────── */
/** The one accent: buttons, the "#", your row and the timeline. */
const ACCENT = "#ff5a1f";
const BRAND = { name: "Rung", href: "#" };
const NAV_LINKS = [
{ label: "Keywords", href: "#keywords" },
{ label: "Pricing", href: "#pricing" },
{ label: "Changelog", href: "#changelog" },
];
const SIGN_IN = { label: "Sign in", href: "#sign-in" };
const NAV_CTA = { label: "Start free", href: "#start" };
const BADGE = { tag: "New", text: "Rank alerts in Slack", href: "#changelog" };
/** Read as one sentence, in three lines: "Climb to #1 / in Productivity / and stay there." */
const HEADLINE = { lead: "Climb to", rank: "#1", joint: "in", category: "Productivity", tail: "and stay there." };
const SUBLINE =
"Rung checks where you rank for every keyword, in every store and country, every hour. Then it writes the listing changes that move you up.";
const FIELD = { label: "Your app's store link", placeholder: "Paste your app's link", button: "Check my rank" };
const PROOF = { text: "Used by 2,400 app teams", link: { label: "Talk to us", href: "#contact" } };
const AVATARS = [
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=2.5&w=96&h=96&q=80",
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=facearea&facepad=2.5&w=96&h=96&q=80",
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=facearea&facepad=2.5&w=96&h=96&q=80",
];
const CHART = {
title: "Top free · Productivity",
subtitle: "United States · daily downloads",
readout: "Fieldnote rank",
periods: ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"],
};
type App = { id: string; label: string; detail: string; from: string; to: string; glyph: React.ReactNode; value: number[]; you?: boolean };
const APPS: App[] = [
{
id: "fieldnote",
label: "Fieldnote",
detail: "Notes that file themselves",
you: true,
from: "#ff8a3d",
to: "#ff3d00",
glyph: ,
value: [2900, 3800, 5100, 6500, 8000, 9400, 10900, 12800],
},
{
id: "ledgerly",
label: "Ledgerly",
detail: "Invoices & time tracking",
from: "#4f8bff",
to: "#1d4ed8",
glyph: ,
value: [11900, 11700, 12000, 11500, 11300, 11100, 11000, 10700],
},
{
id: "stack",
label: "Stack Tasks",
detail: "To-dos for small teams",
from: "#34d399",
to: "#059669",
glyph: ,
value: [9900, 9700, 9200, 9500, 9100, 8900, 8700, 8600],
},
{
id: "quarry",
label: "Quarry Mail",
detail: "Email, triaged for you",
from: "#fb7185",
to: "#e11d48",
glyph: ,
value: [8700, 9000, 9400, 8300, 7700, 7400, 7200, 7000],
},
{
id: "lumen",
label: "Lumen Focus",
detail: "Timers & site blockers",
from: "#a78bfa",
to: "#6d28d9",
glyph: ,
value: [6300, 6100, 5900, 6200, 6400, 6100, 6000, 5800],
},
{
id: "papertrail",
label: "Papertrail",
detail: "Scan & sign PDFs",
from: "#fbbf24",
to: "#ea580c",
glyph: ,
value: [5000, 4800, 4600, 4400, 4200, 4000, 3900, 3700],
},
];
const numbers = new Intl.NumberFormat("en-US");
/* ── Section ─────────────────────────────────────────────── */
export function StandingsHero() {
const you = APPS.find((app) => app.you)?.id;
const [place, setPlace] = React.useState(() => {
const first = [...APPS].sort((a, b) => b.value[0] - a.value[0]);
return first.findIndex((app) => app.id === you) + 1;
});
const onOrderChange = React.useCallback((ids: string[]) => setPlace(ids.indexOf(you ?? "") + 1), [you]);
// The readout turns over at each pass: the new rank rises in from below.
const numeral = React.useRef(null);
const shown = React.useRef(place);
React.useEffect(() => {
if (shown.current === place) return;
const up = place < shown.current;
shown.current = place;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
numeral.current?.animate(
[
{ transform: `translateY(${up ? 60 : -60}%)`, opacity: 0 },
{ transform: "translateY(0)", opacity: 1 },
],
{ duration: 280, easing: "cubic-bezier(0.23, 1, 0.32, 1)" },
);
}, [place]);
const entries = React.useMemo(
() =>
APPS.map((app) => ({
id: app.id,
label: app.label,
detail: app.detail,
you: app.you,
value: app.value,
icon: (
),
})),
[],
);
return (
{BADGE.tag}
{BADGE.text}
{HEADLINE.lead}{" "}
{HEADLINE.rank}
{" "}
{HEADLINE.joint}{" "}
{HEADLINE.category}
{" "}
{HEADLINE.tail}
{SUBLINE}
{AVATARS.map((src) => (
// eslint-disable-next-line @next/next/no-img-element
))}
{PROOF.text} ·{" "}
{PROOF.link.label}
{CHART.title}
{CHART.subtitle}
{CHART.readout}
#
{place}
numbers.format(Math.round(v))}
onOrderChange={onOrderChange}
className="px-2 pt-1 pb-3 [--standings-accent:var(--accent)] [--standings-surface:#ffffff] dark:[--standings-surface:#18181b]"
/>
);
}
/* ── Marks ───────────────────────────────────────────────── */
function RungMark({ className }: { className?: string }) {
return (
);
}
function CategoryGlyph({ className }: { className?: string }) {
return (
);
}
function LinkGlyph({ className }: { className?: string }) {
return (
);
}
function Chevron({ className }: { className?: string }) {
return (
);
}
```