Surfer Logo
🏄‍♂️
Back to Categories

Data Display

Components for displaying and visualizing data with Surfer design system styling

Avatar
Profile pictures with fallbacks using Surfer design tokens

Sizes

CNCNCNCN

Fallbacks

ABJS
Badge
Status indicators and labels styled with Surfer design tokens

Variants

DefaultSecondaryDestructiveOutline

With Icons

StarredLikedPremium

Status Badges

ActivePendingInfo
Pill Badges
New pill-shaped badges with Surfer design system

Pill Variants

PrimarySecondarySuccessWarningDangerInfo

Pill Sizes

XSSmallMediumLarge

Status Indicators

ActivePendingErrorInfo

Pill with Dots

OnlineAwayBusy

Removable Badges

DesignFrontendReact
Card
Flexible container component styled with Surfer design tokens
Simple Card
This is a simple card with title and description.

Card content goes here. This can contain any React components.

Card with Actions
New
A card with actions and status badges.
JD

John Doe

2 hours ago

Table
Data tables styled with Surfer design tokens
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
Calendar
Date selection component styled with Surfer design tokens
July 2025
Progress
Progress indicators styled with Surfer design tokens
Default Progress67%
Success Progress85%
Warning Progress45%
Small Progress30%
Skeleton
Loading placeholders styled with Surfer design tokens
Aspect Ratio
Responsive aspect ratio containers using Surfer design tokens

16:9 Ratio

16:9 Aspect Ratio

1:1 Ratio

Square

Separator
Visual dividers styled with Surfer design tokens

Horizontal

Content above separator

Content below separator

Vertical

Left
Middle
Right
Chart
Data visualization components styled with Surfer design tokens

Bar Chart

Line Chart

Pie Chart