Gradients and animation

Silva UI adds named gradient values to backgroundColor and color, plus an animation prop for lightweight entrance and attention motion. They work on every primitive that accepts BaseProps.

Gradient backgrounds

Use a gradient name anywhere you would normally set backgroundColor.

Preview
Code

import { Card, Heading, Paragraph, YStack } from "silva-ui"

export function LaunchCard() {
  return (
    <Card backgroundColor="aurora" p="large" borderRadius="xl">
      <YStack gap="small">
        <Heading level={2} color="white">Ship with confidence</Heading>
        <Paragraph color="white">A named gradient without app-owned CSS.</Paragraph>
      </YStack>
    </Card>
  )
}

Gradient text

Set color to a gradient name to render text with a clipped gradient fill. Keep a meaningful text label in the markup: the gradient is decorative styling, not content.

Preview
Code

<Heading level={1} color="ocean">
  Build the next thing
</Heading>

Available gradients

Name	Character
`aurora`	Blue, violet and pink
`sunrise`	Orange, red and magenta
`ocean`	Cyan, blue and indigo
`forest`	Green, teal and sky blue
`midnight`	Slate, indigo and purple

backgroundColor and color continue to accept normal Silva UI theme tokens. A gradient name is simply an additional supported value.

Named or theme-aware?

Named gradients are fixed library presets. When a component needs custom stops that automatically follow the nearest built-in or custom Theme, use the Box gradient prop instead. That API also supports linear, radial, and conic gradients.

Animation

Use animation for a prebuilt animation declaration. The component still renders as normal HTML before the animation starts.

Preview
Code

import { Card, Heading, Text, YStack } from "silva-ui"

export function ReleaseNotice() {
  return (
    <Card animation="slideUp" p="large" borderRadius="large" bg="card">
      <YStack gap="xs">
        <Heading level={2}>Version 1.1 is here</Heading>
        <Text animation="pulse" color="primary">New visual primitives included</Text>
      </YStack>
    </Card>
  )
}

Name	Behaviour
`fadeIn`	Fades in over 260ms
`slideUp`	Fades in while moving up over 360ms
`pulse`	Repeats a subtle opacity pulse

Use pulse only for information that is not essential to understand or operate the page. Do not rely on motion alone to communicate status.

Reuse the definitions

Import gradients or animations when a wrapper component needs the underlying named definitions. Most applications should use backgroundColor, color and animation directly.

import { animations, gradients } from "silva-ui"

console.log(gradients.aurora)
console.log(animations.slideUp)

Get started

Foundations

Components

Reference

Visuals

Gradients and animation

Gradient backgrounds

Gradient text

Available gradients

Named or theme-aware?

Animation

Reuse the definitions

​Gradients and animation

​Gradient backgrounds

​Gradient text

​Available gradients

​Named or theme-aware?

​Animation

​Reuse the definitions

Gradients and animation

Gradient backgrounds

Gradient text

Available gradients

Named or theme-aware?

Animation

Reuse the definitions