# Gradient > Atom — orn-ui > ⚠️ Requires : This component (like every orn-ui component) must render inside a ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md > Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild. ## Installation Install just this component (copies the source into your project, no npm dependency) ```bash npx orn-ui add gradient ``` Or install the whole package and import it ```tsx pnpm add orn-ui import { Gradient } from 'orn-ui/gradient'; ``` Depends on: core (theme + icons) ## Variants ### 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