Gradient

Brand gradient backgrounds with four curated variants: Sunset (orange-to-pink), Ocean (blue tones), Forest (green tones), and Brand (orange-to-magenta).

Preview

Gradient Variants

sunset

ocean

forest

brand

Usage

tsx

import { Gradient } from "zostel-ui";

// Brand gradient (default)
<Gradient className="p-8 rounded-xl">
  <h2 className="text-white">Hello</h2>
</Gradient>

// Sunset variant
<Gradient variant="sunset" className="p-8 rounded-xl">
  <h2 className="text-white">Sunset Vibes</h2>
</Gradient>

// Ocean variant
<Gradient variant="ocean" />

// Forest variant
<Gradient variant="forest" />

Props

Prop	Type	Default	Description
`variant`	`"sunset" \| "ocean" \| "forest" \| "brand"`	"brand"	The gradient color scheme to apply
`children`	`ReactNode`	—	Content to render over the gradient
`className`	`string`	—	Additional CSS classes

variant

Type: "sunset" | "ocean" | "forest" | "brand"

Default: "brand"

The gradient color scheme to apply

children

Type: ReactNode

Default: —

Content to render over the gradient

className

Type: string

Default: —

Additional CSS classes

Previous Pattern Background Next Animation Wrapper