HypenHypen

Component Comparison

Check for potential alignment issues across renderers with automated screenshots from each platform's component gallery

Component Comparison

This page is made to check for potential alignment issues across renderers, containing automated screenshots from each platform's component gallery. All screenshots are generated from the same Hypen source code.

To update these screenshots, run:

bun run comparison:update

Components

Column

WebColumn on Web
AndroidColumn on Android
iOSColumn on iOS

Row

WebRow on Web
AndroidRow on Android
iOSRow on iOS

Text

WebText on Web
AndroidText on Android
iOSText on iOS

Button

WebButton on Web
AndroidButton on Android
iOSButton on iOS

Image

WebImage on Web
AndroidImage on Android
iOSImage on iOS

Container

WebContainer on Web
AndroidContainer on Android
iOSContainer on iOS

Center

WebCenter on Web
AndroidCenter on Android
iOSCenter on iOS

List

WebList on Web
AndroidList on Android
iOSList on iOS

Input

WebInput on Web
AndroidInput on Android
iOSInput on iOS
WebLink on Web
AndroidLink on Android
iOSLink on iOS

TextArea

WebTextArea on Web
AndroidTextArea on Android
iOSTextArea on iOS

Checkbox

WebCheckbox on Web
AndroidCheckbox on Android
iOSCheckbox on iOS

Select

WebSelect on Web
AndroidSelect on Android
iOSSelect on iOS

Spacer

WebSpacer on Web
AndroidSpacer on Android
iOSSpacer on iOS

Stack

WebStack on Web
AndroidStack on Android
iOSStack on iOS

Divider

WebDivider on Web
AndroidDivider on Android
iOSDivider on iOS

Grid

WebGrid on Web
AndroidGrid on Android
iOSGrid on iOS

Card

WebCard on Web
AndroidCard on Android
iOSCard on iOS

Heading

WebHeading on Web
AndroidHeading on Android
iOSHeading on iOS

Switch

WebSwitch on Web
AndroidSwitch on Android
iOSSwitch on iOS

Slider

WebSlider on Web
AndroidSlider on Android
iOSSlider on iOS

Spinner

WebSpinner on Web
AndroidSpinner on Android
iOSSpinner on iOS

Badge

WebBadge on Web
AndroidBadge on Android
iOSBadge on iOS

Avatar

WebAvatar on Web
AndroidAvatar on Android
iOSAvatar on iOS

ProgressBar

WebProgressBar on Web
AndroidProgressBar on Android
iOSProgressBar on iOS

Video

WebVideo on Web
AndroidVideo on Android
iOSVideo on iOS

Audio

WebAudio on Web
AndroidAudio on Android
iOSAudio on iOS

Paragraph

WebParagraph on Web
AndroidParagraph on Android
iOSParagraph on iOS

Applicators

padding

Webpadding on Web
Androidpadding on Android
iOSpadding on iOS

margin

Webmargin on Web
Androidmargin on Android
iOSmargin on iOS

color

Webcolor on Web
Androidcolor on Android
iOScolor on iOS

backgroundColor

WebbackgroundColor on Web
AndroidbackgroundColor on Android
iOSbackgroundColor on iOS

opacity

Webopacity on Web
Androidopacity on Android
iOSopacity on iOS

width

Webwidth on Web
Androidwidth on Android
iOSwidth on iOS

height

Webheight on Web
Androidheight on Android
iOSheight on iOS

size

Websize on Web
Androidsize on Android
iOSsize on iOS

fillMaxSize

WebfillMaxSize on Web
AndroidfillMaxSize on Android
iOSfillMaxSize on iOS

border

Webborder on Web
Androidborder on Android
iOSborder on iOS

borderRadius

WebborderRadius on Web
AndroidborderRadius on Android
iOSborderRadius on iOS

cornerRadius

WebcornerRadius on Web
AndroidcornerRadius on Android
iOScornerRadius on iOS

fontSize

WebfontSize on Web
AndroidfontSize on Android
iOSfontSize on iOS

fontWeight

WebfontWeight on Web
AndroidfontWeight on Android
iOSfontWeight on iOS

fontFamily

WebfontFamily on Web
AndroidfontFamily on Android
iOSfontFamily on iOS

textAlign

WebtextAlign on Web
AndroidtextAlign on Android
iOStextAlign on iOS

lineHeight

WeblineHeight on Web
AndroidlineHeight on Android
iOSlineHeight on iOS

gap

Webgap on Web
Androidgap on Android
iOSgap on iOS

weight

Webweight on Web
Androidweight on Android
iOSweight on iOS

flex

Webflex on Web
Androidflex on Android
iOSflex on iOS

shadow

Webshadow on Web
Androidshadow on Android
iOSshadow on iOS

elevation

Webelevation on Web
Androidelevation on Android
iOSelevation on iOS

blur

Webblur on Web
Androidblur on Android
iOSblur on iOS

transform

Webtransform on Web
Androidtransform on Android
iOStransform on iOS

rotate

Webrotate on Web
Androidrotate on Android
iOSrotate on iOS

scale

Webscale on Web
Androidscale on Android
iOSscale on iOS

transition

Webtransition on Web
Androidtransition on Android
iOStransition on iOS

overflow

Weboverflow on Web
Androidoverflow on Android
iOSoverflow on iOS

zIndex

WebzIndex on Web
AndroidzIndex on Android
iOSzIndex on iOS

position

Webposition on Web
Androidposition on Android
iOSposition on iOS

gridColumns

WebgridColumns on Web
AndroidgridColumns on Android
iOSgridColumns on iOS

linearGradient

WeblinearGradient on Web
AndroidlinearGradient on Android
iOSlinearGradient on iOS

maxLines

WebmaxLines on Web
AndroidmaxLines on Android
iOSmaxLines on iOS