layout
Background
星をテーマにしたアニメーションを含む背景コンポーネント。
インポート
import { Background } from '@stella-ds/react'Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| 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
使用例
Galaxy
<Background variant="galaxy" color="cosmos" theme="dark" style={{ height: 200 }}>
<p>Content over galaxy</p>
</Background>