# Gradient > Atom — orn-ui > ⚠️ Requiere : Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro , o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild. ## Instalación Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm) ```bash npx orn-ui add gradient ``` O instala el paquete completo e impórtalo ```tsx pnpm add orn-ui import { Gradient } from 'orn-ui/gradient'; ``` Depende de: core (theme + icons) ## Variantes ### direction: vertical / horizontal ```tsx ``` ### direction: diagonal / diagonal-reverse ```tsx ``` ### several stops — one segment per pair of colors ```tsx ``` ### steps: 3 (visible banding) vs 24 (default) ```tsx ``` ### children stay tappable — the gradient never takes the touch ```tsx Content sits on top