Brand Theme Lines

Theme Lines

Four verbs, stacked — each landscape has its own. Say it, don’t explain it.

Preview

The five landscapes and their verbs

Sunny Days

EXPLORESEETRAVELGROW

Waters

PLAYSTRETCHLIFTBREATHE

Fields

RUNCLIMBCHASELAUGH

Flowers

MEETDANCEEATBELONG

Valleys

CLIMBGAZERESTRISE

Colours, and your own verbs

RUNCLIMBCHASELAUGH

WAKEPICKEAT

Usage

tsx

import { ThemeLines } from "zostel-ui";

<ThemeLines theme="fields" />                      {/* RUN · CLIMB · CHASE · LAUGH */}
<ThemeLines theme="valleys" size="md" color="grey" />
<ThemeLines theme="custom" customWords={["WAKE", "PICK", "EAT"]} />

Props

Prop	Type	Default	Description
`theme`	`"sunny-days" \| "waters" \| "fields" \| "flowers" \| "valleys" \| "custom"`	`"fields"`	A landscape’s verbs (adventure, explore and wellness still work: Fields, Sunny Days, Waters).
`customWords`	`string[]`	—	Your own verbs — short, present tense, capitals.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"lg"`	Type size.
`color`	`"white" \| "grey" \| "orange"`	`"white"`	Type colour.
`animated`	`boolean`	`false`	The verbs rise in one after another; instant for reduced motion.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

theme

Default: "fields"

A landscape’s verbs (adventure, explore and wellness still work: Fields, Sunny Days, Waters).

customWords

Type: string[]

Default: —

Your own verbs — short, present tense, capitals.

size

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

Default: "lg"

Type size.

color

Type: "white" | "grey" | "orange"

Default: "white"

Type colour.

animated

Type: boolean

Default: false

The verbs rise in one after another; instant for reduced motion.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

The verbs

Sunny Days: EXPLORE · SEE · TRAVEL · GROW. Waters: PLAY · STRETCH · LIFT · BREATHE. Fields: RUN · CLIMB · CHASE · LAUGH. Flowers: MEET · DANCE · EAT · BELONG. Valleys: CLIMB · GAZE · REST · RISE.