Theme Lines

Stacked action words displayed in decreasing opacity, creating a bold typographic brand element. Ships with presets like "adventure" and "explore" or accepts custom words.

Preview

Theme Presets

Adventure

RUNCLIMBCHASELAUGH

Explore

EXPLORESEETRAVELGROW

Wellness

PLAYSTRETCHLIFTBREATHE

Custom

TRAVELDISCOVERCONNECTGROW

Colors

RUNCLIMBCHASELAUGH
RUNCLIMBCHASELAUGH
RUNCLIMBCHASELAUGH

Usage

tsx
import { ThemeLines } from "zostel-ui";

// Default adventure preset
<ThemeLines />

// Explore preset
<ThemeLines theme="explore" />

// Custom words
<ThemeLines customWords={["DREAM", "BUILD", "SHIP", "REPEAT"]} />

// With size and color
<ThemeLines size="xl" color="orange" />

// Animated entrance
<ThemeLines animated />

Props

theme
Type: "adventure" | "explore" | "wellness" | "custom"
Default: "adventure"

Preset word group to display

customWords
Type: string[]
Default: —

Custom array of words (overrides theme preset)

size
Type: "sm" | "md" | "lg" | "xl"
Default: "lg"

Text size of the words

color
Type: "white" | "grey" | "orange"
Default: "white"

Color of the text

animated
Type: boolean
Default: false

Enable staggered fade-up animation

className
Type: string
Default: —

Additional CSS classes
Previous Tagline Band Next Brand Header