Utility
Terminal
█
gradient-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/gradient
Usage
import { Gradient } from "@/components/ui/gradient";<Gradient colors={["#ff6b6b", "#4ecdc4"]}>Hello Gradient</Gradient>Examples
Cristal
Terminal
█
gradient-cristal █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Teen
Terminal
█
gradient-teen █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Mind
Terminal
█
gradient-mind █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Morning
Terminal
█
gradient-morning █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Vice
Terminal
█
gradient-vice █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Passion
Terminal
█
gradient-passion █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Fruit
Terminal
█
gradient-fruit █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Terminal
█
gradient-instagram █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Atlas
Terminal
█
gradient-atlas █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Retro
Terminal
█
gradient-retro █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Summer
Terminal
█
gradient-summer █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Pastel
Terminal
█
gradient-pastel █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Rainbow
Terminal
█
gradient-rainbow █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█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[] | - |
name | "cristal" | "teen" | "mind" | "morning" | "vice" | "passion" | "fruit" | "instagram" | "atlas" | "retro" | "summer" | "pastel" | "rainbow" | - |
bold | boolean | false |