golife-ui
Design system Overview
v1.3.0
golife-ui · The Zendy design language

Your way. Everywhere.

One familiar feeling. Every screen, every platform. The building blocks of Zendy, made to work together.

The foundations

A shared starting point for everything we make.

Colors

A little warmth. A lot of clarity.

AaManrope
Friendly by nature.
Typography

Our voice, in every word.

Spacing & shape

Room for the things that matter.

Small pieces. Big possibilities.

Reusable components, ready for your next idea.

React components
ButtonsActions with a little personality.
Size
Disabled state
<Button variant="primary" size="regular" onClick={handleAction}>Get started</Button>

Inputs

A simple field. A clear next step.

Badge & Switch

AvailableSomething new
Keep me in the loop

More ways to make it yours.

Form controls, navigation, feedback and display.

Checkbox

Forms
<Checkbox label="Email me about new experiences" checked={checked} onCheckedChange={setChecked} />

Radio group

Forms
Delivery
<RadioGroup label="Delivery" options={options} value={delivery} onValueChange={setDelivery} />

Select

Forms
<Select label="Your city" options={cities} value={city} onValueChange={setCity} />

Textarea

Forms
0/200
<Textarea aria-label="Gift message" onChange={e => setMessage(e.target.value)} value={message} />

Tabs

Navigation

Something thoughtful. Something they’ll love.

<Tabs label="Gift views" options={tabs} value={tab} onValueChange={setTab} />

Accordion

Navigation

Let them choose something they love, from local places that make every day special.

<Accordion items={items} value={openItem} onValueChange={setOpenItem} />

Alert

Feedback
You’re all set
Your changes have been saved.
<Alert title="You’re all set" tone="mint" onDismiss={dismiss}>Your changes have been saved.</Alert>

Progress

Feedback
Profile complete40%
<Progress label="Profile complete" value={progress} />

Avatar

Display
AMSTJL
Your people

A familiar face, or initials.

<Avatar name="Alex Morgan" size="regular" />

Skeleton

Display
<Skeleton variant="avatar" /> <Skeleton variant="text" />

Dialogs & cards

Dialog, Card and five composable card parts.

Dialog

Display name: Alex Morgan

import { Dialog, Button, Input } from '@golife-ab/golife-ui/react';

const [open, setOpen] = useState(false);
const [name, setName] = useState('Alex');

<Button onClick={() => setOpen(true)}>Edit profile</Button>
<Dialog open={open} onOpenChange={setOpen}
  title="Edit profile" description="Update your display name."
  footer={<Button onClick={() => { save(name); setOpen(false); }}>Save</Button>}>
  <Input aria-label="Name" value={name}
    onChange={e => setName(e.target.value)} />
</Dialog>

Card

Your profile

A little more you.

Active

Alex Morgan

import { Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, Badge, Button } from '@golife-ab/golife-ui/react';

<Card tone="default">
  <CardHeader>
    <CardTitle>Your profile</CardTitle>
    <CardDescription>A little more you.</CardDescription>
  </CardHeader>
  <CardContent><Badge>Active</Badge></CardContent>
  <CardFooter>
    <Button onClick={edit}>Edit profile</Button>
  </CardFooter>
</Card>

Card parts & theming

CardHeader

Your profile

<CardHeader><CardTitle>Your profile</CardTitle></CardHeader>
CardTitle

Your profile

<CardTitle>Your profile</CardTitle>
CardDescription

A little more you.

<CardDescription>A little more you.</CardDescription>
CardContent
Active
<CardContent><Badge>Active</Badge></CardContent>
CardFooter
<CardFooter><Button onClick={save}>Save</Button></CardFooter>
ThemeProvider
<ThemeProvider colors={colors}><Button>Save</Button></ThemeProvider>