Component thumbnails

The 44 thumbnails shown on the components gallery, live instead of as PNGs. Each frame below is exactly what gets captured, so a thumbnail that looks wrong can be fixed here. Run pnpm --filter brand previews to shoot them into public/images/components.

Alert

alert.png

Heads up!

You can add components to your app using the CLI.

Alert dialog

alert-dialog.png

Delete this item?

This cannot be undone. The listing and its photos go with it.

Avatar

avatar.png

xs

sm

md (default)

lg

xl

2xl

Badge

badges.png

PrimarySecondarySuccessWarningInfoOutlineDestructive

Breadcrumbs

breadcrumbs.png

Button

buttons.png

Card

card.png

Buyer protection

Included on every order.

We hold the money until the item arrives and is what the listing said it was.

Cart

cart.png

Vintage denim jacket
Levi'sM•Good
8900
Leather crossbody bag
CoachLike new
1200015000

Items€209.00

Buyer protection€11.15

Chat bubbles

chat-bubbles.png

Hi! Is this still available?

14:30

Yes it is! Are you interested?

14:31

Would you accept €75?

14:33

I can do €80, it's in great condition

14:34

Deal! How do we proceed?

14:35

Checkbox

checkbox.png

Unchecked Checked Disabled

Chip

chip.png

Combobox

combobox.png

Small

Medium (default)

Large

Cropper

cropper.png

Date picker

date-picker.png

Dialog

dialog.png

Dialog title

This is a dialog description.

Dialog body content goes here.

Field group

field-group.png

File upload

file-upload.png

Drop files here or click to upload

PNG, JPG, WEBP up to 5MB

Floating label input

floating-label-input.png

Street and house number

City

Icon tile

icon-tile.png

Inline prompt

inline-prompt.png

This is a neutral message.

Operation completed successfully.

Please review before continuing.

Something went wrong.

Try our new feature!

Input

input.png

Input group

input-group.png

Input OTP

input-otp.png

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Item cards

item-cards.png

Vintage leather bag

CoachGood

R$120.00

Silk floral dress

ZaraM•Like new

R$85.00

Classic sneakers

Nike42•Good

R$200.00

Denim jacket oversized

Levi'sG•Very good

R$150.00

Item detail

item-detail.png

Vintage leather bag

R$138.30

Description

Beautiful vintage leather bag in excellent condition. Handcrafted from premium Italian leather with brass hardware.

Member since Jun 2024

Brazil

Last seen 7 months ago

Verified information

Email
Phone number
Google
Facebook

Item rows

item-rows.png

size=sm

Compact row

48px thumbnail

4200

size=default

Default row

64px thumbnail (default)

8500

size=lg

Large row

80px thumbnail with larger text

12000

size=xl

Extra large row

Extra large row

96px thumbnail with larger text

1450018000

size=xl + badge + favorites + views

Vintage leather bag

Full metadata at XL size

Available24128

22000

Offers

offers.png

€75.00€89.00

New offer

14:30

€110.00€120.00

Accepted

15:00

€50.00€89.00

Declined

15:30

Order card

order-card.png

Pagination

pagination.png

Password input

password-input.png

Radio

radio.png

Default

Comfortable

Compact

Reviews

reviews.png

4.7

(3)

2 years ago

Perfect condition, exactly as described. Fast shipping!

2 years ago

Great item, well packaged. Slightly delayed shipping.

2 years ago

Love it! Seller was very responsive.

Select

select.png

Sheets

sheets.png

Sheet title

A panel that slides in from an edge.

Sheet body content goes here.

Stepper

stepper.png

Stepper progress

stepper-progress.png

Step 2 of 4

Summary

summary.png

Switch

switch.png

Notifications Dark mode Disabled

Tabs

tabs.png

24 items for sale.

Textarea

textarea.png

Thumbnail

thumbnail.png

xs

sm

md

lg

xl

2xl

Toast

toast.png

Item saved successfully

Tooltip

tooltip.png

This is a tooltip

Tracker

tracker.png