473
Sponsor

Gradient

PreviousNext

Color gradient text

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/gradient

Usage

import { Gradient } from "@/components/ui/gradient";
<Gradient colors={["#ff6b6b", "#4ecdc4"]}>Hello Gradient</Gradient>

Examples

Named presets

Use the name prop with a built-in palette instead of passing colors.

Terminal
import { Box } from "ink";

import { Gradient } from "@/components/ui/gradient";

export function GradientPresets() {
  return (
    <Box flexDirection="column" gap={0}>
      <Gradient name="rainbow" bold>
        rainbow
      </Gradient>
      <Gradient name="teen">teen</Gradient>
      <Gradient name="cristal">cristal</Gradient>
    </Box>
  );
}

API Reference

Gradient

Either pass colors, or pass name (not both required; name selects a preset when colors is omitted).

PropTypeDefault
childrenstringrequired
colorsstring[]-
name"cristal" | "teen" | "mind" | "morning" | "vice" | "passion" | "fruit" | "instagram" | "atlas" | "retro" | "summer" | "pastel" | "rainbow"-
boldbooleanfalse