Gradient

Linear gradient background container built on react-native-svg — use it behind hero cards, buttons, and headers.

Pro MembershipUnlock every component

Web preview — components render natively on iOS & Android

import { Gradient } from "@/components/ui/gradient";
import { Text } from "react-native";

export function HeroCard() {
  return (
    <Gradient
      colors={["#0f172a", "#334155"]}
      className="h-48 rounded-xl items-center justify-center"
    >
      <Text className="text-2xl font-bold text-white">Pro Membership</Text>
      <Text className="mt-1 text-white/70">Unlock every component</Text>
    </Gradient>
  );
}

Installation#

npx @aniui/cli add gradient

Usage#

app/index.tsx

import { Gradient } from "@/components/ui/gradient";
import { Text } from "react-native";

export function HeroCard() {
  return (
    <Gradient
      colors={["#0f172a", "#334155"]}
      className="h-48 rounded-xl items-center justify-center"
    >
      <Text className="text-2xl font-bold text-white">Pro Membership</Text>
      <Text className="mt-1 text-white/70">Unlock every component</Text>
    </Gradient>
  );
}

Direction#

The gradient runs from start to end — both are { x, y } points from 0 to 1. The default is vertical (top to bottom).

Horizontal gradient

Web preview — components render natively on iOS & Android

// Left-to-right gradient: start at the left edge, end at the right edge
<Gradient
  colors={["#7c3aed", "#db2777"]}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  className="h-24 rounded-lg items-center justify-center"
>
  <Text className="font-semibold text-white">Horizontal gradient</Text>
</Gradient>

Gradient Button#

Wrap the gradient in a Pressable to use it as a button backdrop.

Web preview — components render natively on iOS & Android

import { Pressable, Text } from "react-native";
import { Gradient } from "@/components/ui/gradient";

<Pressable accessibilityRole="button" accessible={true} onPress={() => {}}>
  <Gradient
    colors={["#2563eb", "#7c3aed"]}
    start={{ x: 0, y: 0 }}
    end={{ x: 1, y: 0 }}
    className="min-h-12 items-center justify-center rounded-lg px-6"
  >
    <Text className="font-semibold text-white">Get Started</Text>
  </Gradient>
</Pressable>

Props#

PropTypeDefault

colors

string[]

["#18181b", "#3f3f46"]

start

{ x: number; y: number }

{ x: 0, y: 0 }

end

{ x: number; y: number }

{ x: 0, y: 1 }

children

ReactNode

—

className

string

—

Also accepts all View props from React Native. Requires react-native-svg.

Accessibility#

The gradient layer is decorative and marked pointerEvents="none" so it never intercepts touches.
Ensure text placed on the gradient keeps sufficient color contrast against all stops.

Source#

components/ui/gradient.tsx

import React from "react";
import { View } from "react-native";
import Svg, { Defs, LinearGradient as SvgLinearGradient, Stop, Rect } from "react-native-svg";
import { cn } from "@/lib/utils";

export interface GradientPoint {
  x: number;
  y: number;
}

export interface GradientProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  colors?: string[];
  start?: GradientPoint;
  end?: GradientPoint;
  children?: React.ReactNode;
}

export function Gradient({
  colors = ["#18181b", "#3f3f46"],
  start = { x: 0, y: 0 },
  end = { x: 0, y: 1 },
  className,
  children,
  ...props
}: GradientProps) {
  // useId output contains ":" which is unsafe inside url(#...) references.
  const id = `grad-${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`;

  return (
    <View className={cn("overflow-hidden", className)} {...props}>
      <Svg
        pointerEvents="none"
        style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
      >
        <Defs>
          <SvgLinearGradient
            id={id}
            x1={`${start.x * 100}%`}
            y1={`${start.y * 100}%`}
            x2={`${end.x * 100}%`}
            y2={`${end.y * 100}%`}
          >
            {colors.map((color, i) => (
              <Stop
                key={i}
                offset={`${(i / Math.max(colors.length - 1, 1)) * 100}%`}
                stopColor={color}
              />
            ))}
          </SvgLinearGradient>
        </Defs>
        <Rect width="100%" height="100%" fill={`url(#${id})`} />
      </Svg>
      {children}
    </View>
  );
}

Previous← Form NextGrid →