Scores

Gradient list to display scores

1,000,000IHS

900,000AAA

700,000KNM

550,000XLL

90,000RSS

75,000AAA

60,000CKL

1,000ABB

1
import { Scores } from "@/components/ui/pxl/scores";
2

3
export default function ScoresExample() {
4
  return (
5
    <div className="w-full min-h-23 flex items-center justify-center">
6
      <Scores
7
        className="w-36"
8
        items={[
9
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "IHS", title: "1,000,000", },
10
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "AAA", title: "900,000", },
11
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "KNM", title: "700,000", },
12
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "XLL", title: "550,000", },
13
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "RSS", title: "90,000", },
14
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "AAA", title: "75,000", },
15
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "CKL", title: "60,000", },
16
          { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "ABB", title: "1,000", }
17
        ]}
18
      />
19
    </div>
20
  )
21
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/scores

Copy and paste the following code into your project.

1
import type { ComponentProps, PropsWithChildren } from "react";
2

3
import {
4
  Avatar,
5
  AvatarFallback,
6
  AvatarImage,
7
} from "@/components/ui/pxl/avatar";
8
import { TextStroke } from "@/components/ui/pxl/text-stroke";
9
import { cn } from "@/lib/utils";
10

11
function ScoreAvatar({
12
  alt,
13
  fallback,
14
  index,
15
  src,
16
}: {
17
  alt?: string;
18
  fallback?: string;
19
  index?: number;
20
  src?: string;
21
}) {
22
  return (
23
    <div className="shrink-0">
24
      <Avatar size="xs" className={cn(index === 1 && "[--size:--spacing(4)]")}>
25
        <AvatarImage alt={alt} src={src} />
26
        <AvatarFallback>{fallback}</AvatarFallback>
27
      </Avatar>
28
    </div>
29
  );
30
}
31

32
function ScoreTitle({
33
  children,
34
  index,
35
}: { index: number } & PropsWithChildren) {
36
  return (
37
    <TextStroke
38
      className="whitespace-pre"
39
      size="xs"
40
      variant={index <= 3 ? "synthwave" : "chrome"}
41
    >
42
      {children}
43
    </TextStroke>
44
  );
45
}
46

47
function ScoreDescription({ children }: PropsWithChildren) {
48
  return (
49
    <span className="text-muted-foreground font-mono italic font-extrabold text-xs leading-4.5">
50
      {children}
51
    </span>
52
  );
53
}
54

55
function ScoreLine({
56
  avatar,
57
  avatarAlt,
58
  avatarFallback,
59
  description,
60
  index,
61
  title,
62
}: {
63
  index: number;
64
  avatar?: string;
65
  avatarAlt?: string;
66
  avatarFallback?: string;
67
  description?: string;
68
  title: string;
69
}) {
70
  return (
71
    <div
72
      data-index={index}
73
      className={cn(
74
        "w-full flex items-center justify-between",
75
        index === 1 && "animate-pulse duration-50",
76
        index === 2 && "grayscale-50",
77
        index === 3 && "grayscale-75",
78
        index > 3 && "grayscale",
79
      )}
80
    >
81
      <ScoreAvatar
82
        index={index}
83
        src={avatar}
84
        alt={avatarAlt}
85
        fallback={avatarFallback}
86
      />
87
      <ScoreTitle index={index}>{title}</ScoreTitle>
88
      <ScoreDescription>{description}</ScoreDescription>
89
    </div>
90
  );
91
}
92

93
function Scores({
94
  className,
95
  items,
96
}: {
97
  className?: string;
98
  items: Omit<ComponentProps<typeof ScoreLine>, "index">[];
99
}) {
100
  return (
101
    <div className={cn("grid justify-items-start gap-1", className)}>
102
      {items.map((props, key) => (
103
        <ScoreLine key={key.toString()} index={key + 1} {...props} />
104
      ))}
105
    </div>
106
  );
107
}
108

109
export { ScoreAvatar, ScoreDescription, ScoreLine, Scores, ScoreTitle };

Update the import paths to match your project setup.

Usage

import { Scores } from "@/components/ui/pxl/scores"

const ITEMS = [
  { description: "IHS", title: "1,000,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "AAA", title: "900,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "KNM", title: "700,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "XLL", title: "550,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "RSS", title: "90,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "AAA", title: "75,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "CKL", title: "60,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", },
  { description: "ABB", title: "1,000", avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", }
]

<Scores items={ITEMS} />

In card

1
import {
2
  Card,
3
  CardContent,
4
  CardDescription,
5
  CardHeader,
6
  CardTitle,
7
} from "@/components/ui/pxl/card";
8
import { Scores } from "@/components/ui/pxl/scores";
9
import { WidgetArea } from "@/components/ui/pxl/widget-area";
10

11
export default function InCardPreview() {
12
  return (
13
    <WidgetArea size="sm">
14
      <Card size="lg" className="size-full">
15
        <CardHeader>
16
          <CardTitle>High Scores</CardTitle>
17
          <CardDescription>Play to climb the ladder</CardDescription>
18
        </CardHeader>
19
        <CardContent scrollable>
20
          <Scores
21
            className="w-full"
22
            items={[
23
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "IHS", title: "1,000,000", },
24
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "AAA", title: "900,000", },
25
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "KNM", title: "700,000", },
26
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "XLL", title: "550,000", },
27
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "RSS", title: "90,000", },
28
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "AAA", title: "75,000", },
29
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "CKL", title: "60,000", },
30
              { avatar: "https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png", description: "ABB", title: "1,000", }
31
            ]}
32
          />
33
        </CardContent>
34
      </Card>
35
    </WidgetArea>
36
  );
37
}