Text Stroke

Text stroke effects to recreate retro style game indicators

+129 XP

1
import { TextStroke } from "@/components/ui/pxl/text-stroke";
2

3
export default function Preview() {
4
  return (
5
    <div className="w-full min-h-23 flex items-center justify-center">
6
      <TextStroke variant="loot">+129 XP</TextStroke>
7
    </div>
8
  );
9
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/text-stroke

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { ComponentPropsWithoutRef, ElementType } from "react";
3

4
import { cn } from "@/lib/utils";
5

6
const textStrokeVariants = cva(
7
  "font-bold whitespace-nowrap bg-clip-text text-transparent",
8
  {
9
    variants: {
10
      effect: {
11
        default: "pixel-drop-foreground",
12
        filterDrop: "pixel-drop-foreground",
13
        textShadow: "pixel-title-foreground",
14
      },
15
      variant: {
16
        background: "bg-background",
17
        default:
18
          "bg-background",
19
        fire: "bg-fire",
20
        cryo: "bg-cryo",
21
        plasma: "bg-plasma",
22
        loot: "bg-loot",
23
        toxic: "bg-toxic",
24
        shadow: "bg-shadow",
25
        synthwave:
26
          "bg-synthwave",
27
        chrome: "bg-chrome",
28
      },
29
      size: {
30
        default: "text-md pixel-size-sm",
31
        "4xs": "text-4xs pixel-size-sm",
32
        "3xs": "text-3xs pixel-size-sm",
33
        "2xs": "text-2xs pixel-size-sm",
34
        xs: "text-xs pixel-size-sm",
35
        sm: "text-sm pixel-size-sm",
36
        md: "text-md pixel-size-sm",
37
        lg: "text-lg pixel-size-md",
38
        xl: "text-xl pixel-size-md",
39
        "2xl": "text-2xl pixel-size-md",
40
        "3xl": "text-3xl pixel-size-md",
41
        "4xl": "text-4xl pixel-size-md",
42
      },
43
      font: {
44
        default: "font-mono",
45
        heading: "font-heading",
46
        sans: "font-sans",
47
        mono: "font-mono"
48
      }
49
    },
50
    defaultVariants: {
51
      effect: "default",
52
      variant: "default",
53
      size: "default",
54
      font: "default"
55
    },
56
  },
57
);
58

59
type Props<T extends ElementType> = {
60
  as?: T;
61
} & VariantProps<typeof textStrokeVariants> &
62
  ComponentPropsWithoutRef<T>;
63

64
export function TextStroke<T extends ElementType = "span">({
65
  as,
66
  children,
67
  className,
68
  effect = "default",
69
  font = "default",
70
  variant = "default",
71
  size = "default",
72
  ...rest
73
}: Props<T>) {
74
  const Component = as || "span";
75
  return (
76
    <Component
77
      className={cn(
78
        textStrokeVariants({
79
          effect,
80
          font,
81
          variant,
82
          size,
83
        }),
84
        className,
85
      )}
86
      {...rest}
87
    >
88
      {children}
89
    </Component>
90
  );
91
}

Update the import paths to match your project setup.

Usage

import { TextStroke } from "@/components/ui/pxl/text-stroke"

<TextStroke variant="loot">+129 XP</TextStroke>

Variants

Use the variant prop to change the colors of the text.

BackgroundLootCryoFireToxicPlasmaShadowSynthwaveChrome

1
import { TextStroke } from "@/components/ui/pxl/text-stroke";
2

3
export default function Variants() {
4
  return (
5
    <div className="flex flex-wrap content-center justify-center gap-2">
6
      <TextStroke variant="background">Background</TextStroke>
7
      <TextStroke variant="loot">Loot</TextStroke>
8
      <TextStroke variant="cryo">Cryo</TextStroke>
9
      <TextStroke variant="fire">Fire</TextStroke>
10
      <TextStroke variant="toxic">Toxic</TextStroke>
11
      <TextStroke variant="plasma">Plasma</TextStroke>
12
      <TextStroke variant="shadow">Shadow</TextStroke>
13
      <TextStroke variant="synthwave">Synthwave</TextStroke>
14
      <TextStroke variant="chrome">Chrome</TextStroke>
15
    </div>
16
  );
17
}