Utility
AI
Terminal
gradient-demo
No opentui live preview is registered for this example yet.
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
gradient-presets
No opentui live preview is registered for this example yet.
API Reference
Gradient
Either pass colors, or pass name (not both required; name selects a preset when colors is omitted).
| Prop | Type | Default |
|---|---|---|
children | string | required |
colors | string[] | undefined |
name | "cristal" | "teen" | "mind" | "morning" | "vice" | "passion" | "fruit" | "instagram" | "atlas" | "retro" | "summer" | "pastel" | "rainbow" | undefined |
bold | boolean | false |