Pattern Background

Decorative background patterns inspired by Indian folk art. Choose between gond art circles or geometric triangles for subtle visual texture behind content.

Preview

Gond Pattern

Gond Art Pattern

Geometric Pattern

Usage

tsx

import { PatternBackground } from "zostel-ui";

// Gond art pattern (default)
<PatternBackground>
  <YourContent />
</PatternBackground>

// Geometric triangle pattern
<PatternBackground pattern="geometric">
  <YourContent />
</PatternBackground>

// With custom styling
<PatternBackground
  pattern="gond"
  className="rounded-xl p-8 min-h-[200px]"
>
  <Card>Content over pattern</Card>
</PatternBackground>

Props

Prop	Type	Default	Description
`pattern`	`"gond" \| "geometric"`	"gond"	The pattern style to display
`children`	`ReactNode`	—	Content to render over the pattern
`className`	`string`	—	Additional CSS classes

pattern

Type: "gond" | "geometric"

Default: "gond"

The pattern style to display

children

Type: ReactNode

Default: —

Content to render over the pattern

className

Type: string

Default: —

Additional CSS classes

Previous Brand Header Next Gradient