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

Web

Android

iOS

Row

Web

Android

iOS

Text

Web

Android

iOS

Button

Web

Android

iOS

Image

Web

Android

iOS

Container

Web

Android

iOS

Center

Web

Android

iOS

List

Web

Android

iOS

Input

Web

Android

iOS

Link

Web

Android

iOS

TextArea

Web

Android

iOS

Checkbox

Web

Android

iOS

Select

Web

Android

iOS

Spacer

Web

Android

iOS

Stack

Web

Android

iOS

Divider

Web

Android

iOS

Grid

Web

Android

iOS

Card

Web

Android

iOS

Heading

Web

Android

iOS

Switch

Web

Android

iOS

Slider

Web

Android

iOS

Spinner

Web

Android

iOS

Badge

Web

Android

iOS

Avatar

Web

Android

iOS

ProgressBar

Web

Android

iOS

Video

Web

Android

iOS

Audio

Web

Android

iOS

Paragraph

Web

Android

iOS

Applicators

padding

Web

Android

iOS

margin

Web

Android

iOS

color

Web

Android

iOS

backgroundColor

Web

Android

iOS

opacity

Web

Android

iOS

width

Web

Android

iOS

height

Web

Android

iOS

size

Web

Android

iOS

fillMaxSize

Web

Android

iOS

border

Web

Android

iOS

borderRadius

Web

Android

iOS

cornerRadius

Web

Android

iOS

fontSize

Web

Android

iOS

fontWeight

Web

Android

iOS

fontFamily

Web

Android

iOS

textAlign

Web

Android

iOS

lineHeight

Web

Android

iOS

gap

Web

Android

iOS

weight

Web

Android

iOS

flex

Web

Android

iOS

shadow

Web

Android

iOS

elevation

Web

Android

iOS

blur

Web

Android

iOS

transform

Web

Android

iOS

rotate

Web

Android

iOS

scale

Web

Android

iOS

transition

Web

Android

iOS

overflow

Web

Android

iOS

zIndex

Web

Android

iOS

position

Web

Android

iOS

gridColumns

Web

Android

iOS

linearGradient

Web

Android

iOS

maxLines

Web

Android

iOS