vwf .

Display Gallery

Avatars, badges, and display components

Links

Embedded Links - 'text-xs'

An embedded default link in a text

An embedded primary link in a text

An embedded secondary link in a text

An embedded disabled link in a text

Embedded Links - 'default'

An embedded default link in a text

An embedded primary link in a text

An embedded secondary link in a text

An embedded disabled link in a text

Embedded Links - 'text-base' (native a styles)

An embedded default link text

An embedded primary link text

An embedded secondary link text

An embedded disabled link text

Badge Sizes

Same color xs to xl

xsExtra SmallSmallMediummdLargeExtra LargeExtra X Large

Different colors xs to xl

xsExtra SmallSmallMediummdLargeExtra LargeExtra X Large

Badge Colors

Subtle Colors

Subtle background, colored text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Accent Colors

Accent background, colored text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Outerline Colors

Transparent background, colored border and text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Solid Colors

Solid background, white text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Secondary Colors

White background, fog border, tertiary text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Ghost Colors

Transparent background, no border, colored text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Simple Colors

Background with arbitrary transparency, colored text at opacity 100% of background color:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Gradient Colors

Gradient background, white text:

SkyEarthSlateTealOceanNavyBlushRosePlumVioletIndigoGrapeTangyAmberSiennaPeachSunsetSunriseOliveRustCocoaSuccessWarningError

Interactive Badges

Subtle Colors

Subtle interactive, shadow on hover

Accent Colors

Accent interactive, click to see toast in the same color:

Outerline Colors

Outerline interactive, click to toggle active/inactive state, see toast with updated count:

Solid Colors

Solid interactive, click to toggle active/inactive state, see toast with updated count:

Secondary Colors

Secondarry interactive, click to see alarm clock in same color:

Ghost Colors

Ghost interactive, click to see ghost same color:

Simple Colors

Simple interactive, click to see lightbulb same color:

Gradient Colors

Gradient interactive, click to see gradient colors:

Old Badge Card

Accent Colors

PrimarySecondaryTertiarySkyEarthSunsetSunriseTealOceanPlumGrapeindigoAmbertangySuccessWarningErrorInfo

Solid Colors

PrimarySecondaryTertiarySkyEarthSunsetSunriseTealOceanPlumGrapeindigoAmbertangySuccessWarningErrorInfo

Outline Colors

PrimarySecondaryTertiarySkyEarthSunsetSunriseTealOceanPlumGrapeIndigoAmberTangySuccessWarningErrorInfo

Badges with Icons

Badges with Icons

3 newOnlineUrgent12 itemsPremium

Interactive Badges

Filter Badges (For Service Discovery)

Colors and types

SubtleAccentSemanticOutlineGradientSolid

Semantic colors and types

Outline:

SuccessWarningErrorInfo

Subtle:

SuccessWarningErrorInfo

Subtle Alt:

SuccessWarningErrorInfo

Accent:

SuccessWarningErrorInfo

Solid:

SuccessWarningErrorInfo

Solid Alt:

SuccessWarningErrorInfo

Solid App

SuccessWarningErrorInfo

Gradient:

SuccessWarningErrorInfo

Avatar Component

Sizes

JD

xs

JS

sm

AC

md

MG

lg

DK

xl

SB

2xl

TC

3xl

MZ

4xl

SD

5xl

EN

6xl

Variants

DE
SK
EA
SU
SU
VI
PL
EA
SU
IN
WA
WA

With Status Indicators

ON
AW
BU
OF

Shapes

CI
SQ
RO

With Icons

Avatar Group

JD
JS
AC
MG
+2

Avatar with Text

JD
John Doe
Product Designer
JS
Jane Smith
Engineering Manager

Avatar Component

Responsive Size Grid

XS

xs

SM

sm

MD

md

LG

lg

XL

xl

2X

2xl

3X

3xl

4X

4xl

5X

5xl

6X

6xl

7X

7xl

8X

8xl

With Real Images & Status

User 1
User 2
User 3
User 4
User 5
User 6
User 7
User 8

UserAvatar Component

Gradient Combinations

SP
CK
PB
NE

Team Avatar Groups

Small Team (3 members + overflow)

+2

Large Team (5 members + overflow)

+7

Avatar Lists (Mobile-Friendly)

John Doe
Product Designer
Jane Smith
Engineering Manager
Alex Johnson
CEO & Founder
Maria Garcia
Marketing Lead

Skeleton Loading States

Text Skeletons

Card Skeleton

Avatar Skeletons

Button Skeletons

Empty States

Demo Empty State

Demo state rendered

Try adjusting your filters or search terms

Basic Empty State

No results found

Try adjusting your filters or search terms

Illustrated Empty State - Messages

No messages yet

Start a conversation with your neighbors

Illustrated Empty State - Services

No services in your area

Be the first to offer a service in your neighborhood

Inline Empty State

No bookings scheduled

Mobile-Specific Components

Bottom Sheet Actions

Floating Action Buttons

List Components

Basic List

  • Walk the dog
  • Buy groceries
  • Call neighbor about garden
  • Schedule service appointment

Interactive List with Details

  • JD
    John Doe
    Dog Walking Service
    Online2 mins ago
    Available Mon-Fri, 2pm-6pm
  • JS
    Jane Smith
    Home Cleaning
    Away1 hour ago
    Professional cleaning services
  • AJ
    Alex Johnson
    Tutoring Services
    OfflineYesterday
    Math and Science help

Navigation List

Check List

Accept Terms of Service
I agree to the terms and conditions
Subscribe to newsletter
Get weekly updates from your neighborhood
Enable notifications
Receive alerts for new services
Recommended
Share location
Help us find services near you

Theme Color Combinations

Primary Combinations

Sky
SK
Earth
EA
Sunset
EA
Sunrise
EA

Explore More Components

Browse other component categories