pipkins

Examples

Components you can build with pipkins. Each one is a few lines: copy the call and pass your own ids.

16202432404864
nonecirclesquirclesquare

Sizes and shapes

Basics
pipkin(user.id, { size: 32, background: "circle" })

Moods

Basics
pipkin(user.id, { mood: "sleepy" })
maya×theo#0 … #3

Families

Basics
pipkin(breed("maya", "theo", { child: 2 }))

Loading

States
pipkin(user.id, { animate: true })
+3
ruby, leo and 12 others liked this

Facepile

Social
team.map((m) => pipkin(m.id, { size: 40, background: "circle" }))
juno 2m

Love the new empty state.

kofi just now

Can we keep the bunny?

Reply…

Comment thread

Social
pipkin(comment.author, { size: 32, background: "circle" })
Did we pick a mascot yet?
Everyone gets their own.
Mine looks grumpy today

Chat

Social
pipkin(message.from, { size: 28, background: "circle" })
Thanks @m
Maya Chen@maya
Mila Novak@mila
Omar Haddad@omar

Mentions

Social
matches.map((u) => pipkin(u.handle, { size: 26 }))
Maya Chen
Design lead · Design crew
Happy to help · replies fast
MessageProfile

Hover card

Social
pipkin(user.id, { size: 60, background: "circle" })
Ruby Okafor
@ruby
128 posts2.3k followers

Profile

Social
pipkin(user.handle, { size: 80, background: "circle" })
priya mentioned you in Onboarding
2m
Design crew has a new member
1h
kofi replied to your comment
3h
crew-bot deployed a preview
5h

Notifications

Social
pipkin(n.actor, { size: 34, background: "circle" })
1
ruby2,340
2
leo2,100
3
mila1,980
4
finn1,720
5
nora1,505

Leaderboard

Social
pipkin(player.name, { size: 30, background: "circle" })
zoe
Active
priya
In a meeting
noah
Away
ava
Focusing

Presence

Collaboration
pipkin(m.id, { mood: m.away ? "sleepy" : "neutral" })
Design crew
4 members
Design crew
Platform
Founders

Team switcher

Collaboration
fuse(team.members.map((m) => m.id))
DesignNew empty state
Due Fri
EngFuse avatars in team list
Due Mon

Task cards

Collaboration
card.assignees.map((id) => pipkin(id, { size: 24 }))

Live cursors

Collaboration
pipkin(user.id, { size: 22 })
You're all caught upNo new messages. Your pipkin is taking a nap.Start a conversation

Empty state

States
pipkin(user.id, { mood: "sleepy", size: 96 })
404This page wandered off. Seeded with the missing URL, every broken link gets its own lost pipkin.Take me home

404

States
pipkin(location.pathname, { mood: "worried" })