layout
Background
Animated visual backgrounds: starfield, galaxy with nebula glow, milky way wave ribbons, mesh gradient, or solid color.
Import
import { Background } from '@stella-ds/react'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'stars' | 'galaxy' | 'milkyway' | 'gradient' | 'solid' | 'stars' | Visual style |
| color | 'cosmos' | 'nebula' | 'aurora' | 'mixed' | 'mixed' | Color accent palette |
| theme | 'dark' | 'light' | 'dark' | Base theme |
| twinkle | boolean | true | Star twinkling animation |
| ribbons | number | 5 | Number of wave ribbons (milkyway variant) |
| tokenColor | string | undefined | Design-token color override (e.g. 'cosmos-500') |
| showGradient | boolean | true | Show blob overlay on gradient variant |
Preview
Content over galaxy background
Examples
Galaxy
<Background variant="galaxy" color="cosmos" theme="dark" style={{ height: 200 }}>
<p>Content over galaxy</p>
</Background>