Colorized Text

Applies customizable multi-color styling to text content.

Be Radient

import ColorizedText from "@/components/text-effects/colorized-text/colorized-text";

/* keep text on center */
const wrapperStyles = {
  textAlign: "center",
  padding: "24px",
  textWrap: "balance",
};

const ColorizedTextPreview = () => {
  return (
    <div style={wrapperStyles}>
      <h1 style={{ fontSize: "4rem" }}>
        Be <ColorizedText
          colors={[
            "#FF416C",
            "#FF4B2B",
            "#FFD200"
          ]}
          text="Radient"
        />
      </h1>
    </div>
  );
};

export default ColorizedTextPreview;

Installation

Run the command from your project root directory (the folder that contains package.json).

npx mosaicui-cli@latest text-effects/colorized-text

1. Copy the component file

Create a new file called colorized-text.jsx in your reusable components folder (for example /src/components/) and paste the following code into it.

import { memo, useMemo } from "react";
import styles from "./colorized-text.module.css";

const ColorizedText = (props) => {
  const {
    text,
    colors = [
      "currentColor"
    ],
    variant = "gradient",
    className,
    style = null,
    ...restProps
  } = props;

  const isGradient = variant === "gradient";

  const gradient = useMemo(() => {
    if (isGradient) {
      return `linear-gradient(to right, ${colors.join()})`
    }
  }, [isGradient, colors]);

  return (
    <span
      {...restProps}
      className={[
        className,
        styles["colorized-text"],
        isGradient ? styles["gradient"] : "",
      ].join(" ")}
      style={{
        ...style,
        "--gradient": gradient,
      }}
    >
      {isGradient ? (
        text
      ) : (
        text.split("").map((letter, letterIndex) => (
          <span
            key={`letter-${letterIndex}`}
            aria-hidden={true}
            className={styles["letter"]}
            style={{
              "--color": colors[letterIndex % colors.length]
            }}
          >
            {letter}
          </span>
        ))
      )}
      {!isGradient && (
        <span
          className={styles["sr-only"]}
        >
          {text}
        </span>
      )}
    </span>
  );
};

export default memo(ColorizedText);

2. Copy the CSS module file

In the same folder, create a file called colorized-text.module.css and paste the following CSS.

.colorized-text {
  position: relative;

  &.gradient {
    background: var(--gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  > .letter {
    color: var(--color);
  }

  > .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    animation: none;
  }
}

Examples

Discover how supported props transform components to match your needs.

Customize letter color

Rainbow

import ColorizedText from "@/components/text-effects/colorized-text/colorized-text";

const ColorizedTextStyleLetterPreview = () => {
  return (
    <h1 style={{ fontSize: "5rem" }}>
      <ColorizedText 
        variant="standard"
        colors={[
          "#FF0000", 
          "#FFA500", 
          "#FFFF00", 
          "#008000", 
          "#0000FF", 
          "#4B0082", 
          "#EE82EE"
        ]}
        text="Rainbow"
      />
    </h1>
  );
};

export default ColorizedTextStyleLetterPreview;

Props

Configure the component with the following props:

Prop	Type	Required	Default	Description
text	`string`	Yes	—	The text content to display.
colors	`string[]`	No	[]	Array of colors to apply to the text. If empty, inherits the current text color.
variant	`"gradient" \| "standard"`	No	`"gradient"`	Determines how the colors are applied. • `"gradient"`: applies a smooth gradient across the text. • `"standard"`: applies each color in `colors` sequentially to each character; cycles through if there are more characters than colors.
className	`string`	No	—	Optional class name applied to the root container.
style	`React.CSSProperties`	No	—	Inline styles applied to the root container.