# 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:
```bash
bun run comparison:update
```

## Components

<div className="comparison-grid">

### Column

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/column_web.png" alt="Column on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/column_android.png" alt="Column on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/column_ios.png" alt="Column on iOS" />
  </div>
</div>

### Row

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/row_web.png" alt="Row on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/row_android.png" alt="Row on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/row_ios.png" alt="Row on iOS" />
  </div>
</div>

### Text

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/text_web.png" alt="Text on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/text_android.png" alt="Text on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/text_ios.png" alt="Text on iOS" />
  </div>
</div>

### Button

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/button_web.png" alt="Button on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/button_android.png" alt="Button on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/button_ios.png" alt="Button on iOS" />
  </div>
</div>

### Image

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/image_web.png" alt="Image on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/image_android.png" alt="Image on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/image_ios.png" alt="Image on iOS" />
  </div>
</div>

### Container

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/container_web.png" alt="Container on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/container_android.png" alt="Container on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/container_ios.png" alt="Container on iOS" />
  </div>
</div>

### Center

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/center_web.png" alt="Center on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/center_android.png" alt="Center on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/center_ios.png" alt="Center on iOS" />
  </div>
</div>

### List

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/list_web.png" alt="List on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/list_android.png" alt="List on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/list_ios.png" alt="List on iOS" />
  </div>
</div>

### Input

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/input_web.png" alt="Input on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/input_android.png" alt="Input on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/input_ios.png" alt="Input on iOS" />
  </div>
</div>

### Link

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/link_web.png" alt="Link on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/link_android.png" alt="Link on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/link_ios.png" alt="Link on iOS" />
  </div>
</div>

### TextArea

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/textarea_web.png" alt="TextArea on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/textarea_android.png" alt="TextArea on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/textarea_ios.png" alt="TextArea on iOS" />
  </div>
</div>

### Checkbox

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/checkbox_web.png" alt="Checkbox on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/checkbox_android.png" alt="Checkbox on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/checkbox_ios.png" alt="Checkbox on iOS" />
  </div>
</div>

### Select

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/select_web.png" alt="Select on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/select_android.png" alt="Select on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/select_ios.png" alt="Select on iOS" />
  </div>
</div>

### Spacer

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/spacer_web.png" alt="Spacer on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/spacer_android.png" alt="Spacer on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/spacer_ios.png" alt="Spacer on iOS" />
  </div>
</div>

### Stack

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/stack_web.png" alt="Stack on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/stack_android.png" alt="Stack on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/stack_ios.png" alt="Stack on iOS" />
  </div>
</div>

### Divider

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/divider_web.png" alt="Divider on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/divider_android.png" alt="Divider on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/divider_ios.png" alt="Divider on iOS" />
  </div>
</div>

### Grid

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/grid_web.png" alt="Grid on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/grid_android.png" alt="Grid on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/grid_ios.png" alt="Grid on iOS" />
  </div>
</div>

### Card

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/card_web.png" alt="Card on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/card_android.png" alt="Card on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/card_ios.png" alt="Card on iOS" />
  </div>
</div>

### Heading

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/heading_web.png" alt="Heading on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/heading_android.png" alt="Heading on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/heading_ios.png" alt="Heading on iOS" />
  </div>
</div>

### Switch

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/switch_web.png" alt="Switch on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/switch_android.png" alt="Switch on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/switch_ios.png" alt="Switch on iOS" />
  </div>
</div>

### Slider

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/slider_web.png" alt="Slider on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/slider_android.png" alt="Slider on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/slider_ios.png" alt="Slider on iOS" />
  </div>
</div>

### Spinner

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/spinner_web.png" alt="Spinner on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/spinner_android.png" alt="Spinner on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/spinner_ios.png" alt="Spinner on iOS" />
  </div>
</div>

### Badge

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/badge_web.png" alt="Badge on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/badge_android.png" alt="Badge on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/badge_ios.png" alt="Badge on iOS" />
  </div>
</div>

### Avatar

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/avatar_web.png" alt="Avatar on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/avatar_android.png" alt="Avatar on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/avatar_ios.png" alt="Avatar on iOS" />
  </div>
</div>

### ProgressBar

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/progressbar_web.png" alt="ProgressBar on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/progressbar_android.png" alt="ProgressBar on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/progressbar_ios.png" alt="ProgressBar on iOS" />
  </div>
</div>

### Video

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/video_web.png" alt="Video on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/video_android.png" alt="Video on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/video_ios.png" alt="Video on iOS" />
  </div>
</div>

### Audio

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/audio_web.png" alt="Audio on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/audio_android.png" alt="Audio on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/audio_ios.png" alt="Audio on iOS" />
  </div>
</div>

### Paragraph

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/paragraph_web.png" alt="Paragraph on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/paragraph_android.png" alt="Paragraph on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/paragraph_ios.png" alt="Paragraph on iOS" />
  </div>
</div>

</div>

## Applicators

<div className="comparison-grid">

### padding

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/padding_web.png" alt="padding on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/padding_android.png" alt="padding on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/padding_ios.png" alt="padding on iOS" />
  </div>
</div>

### margin

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/margin_web.png" alt="margin on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/margin_android.png" alt="margin on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/margin_ios.png" alt="margin on iOS" />
  </div>
</div>

### color

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/color_web.png" alt="color on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/color_android.png" alt="color on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/color_ios.png" alt="color on iOS" />
  </div>
</div>

### backgroundColor

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/backgroundColor_web.png" alt="backgroundColor on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/backgroundColor_android.png" alt="backgroundColor on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/backgroundColor_ios.png" alt="backgroundColor on iOS" />
  </div>
</div>

### opacity

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/opacity_web.png" alt="opacity on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/opacity_android.png" alt="opacity on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/opacity_ios.png" alt="opacity on iOS" />
  </div>
</div>

### width

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/width_web.png" alt="width on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/width_android.png" alt="width on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/width_ios.png" alt="width on iOS" />
  </div>
</div>

### height

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/height_web.png" alt="height on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/height_android.png" alt="height on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/height_ios.png" alt="height on iOS" />
  </div>
</div>

### size

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/size_web.png" alt="size on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/size_android.png" alt="size on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/size_ios.png" alt="size on iOS" />
  </div>
</div>

### fillMaxSize

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/fillMaxSize_web.png" alt="fillMaxSize on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/fillMaxSize_android.png" alt="fillMaxSize on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/fillMaxSize_ios.png" alt="fillMaxSize on iOS" />
  </div>
</div>

### border

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/border_web.png" alt="border on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/border_android.png" alt="border on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/border_ios.png" alt="border on iOS" />
  </div>
</div>

### borderRadius

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/borderRadius_web.png" alt="borderRadius on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/borderRadius_android.png" alt="borderRadius on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/borderRadius_ios.png" alt="borderRadius on iOS" />
  </div>
</div>

### cornerRadius

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/cornerRadius_web.png" alt="cornerRadius on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/cornerRadius_android.png" alt="cornerRadius on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/cornerRadius_ios.png" alt="cornerRadius on iOS" />
  </div>
</div>

### fontSize

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/fontSize_web.png" alt="fontSize on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/fontSize_android.png" alt="fontSize on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/fontSize_ios.png" alt="fontSize on iOS" />
  </div>
</div>

### fontWeight

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/fontWeight_web.png" alt="fontWeight on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/fontWeight_android.png" alt="fontWeight on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/fontWeight_ios.png" alt="fontWeight on iOS" />
  </div>
</div>

### fontFamily

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/fontFamily_web.png" alt="fontFamily on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/fontFamily_android.png" alt="fontFamily on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/fontFamily_ios.png" alt="fontFamily on iOS" />
  </div>
</div>

### textAlign

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/textAlign_web.png" alt="textAlign on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/textAlign_android.png" alt="textAlign on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/textAlign_ios.png" alt="textAlign on iOS" />
  </div>
</div>

### lineHeight

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/lineHeight_web.png" alt="lineHeight on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/lineHeight_android.png" alt="lineHeight on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/lineHeight_ios.png" alt="lineHeight on iOS" />
  </div>
</div>

### gap

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/gap_web.png" alt="gap on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/gap_android.png" alt="gap on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/gap_ios.png" alt="gap on iOS" />
  </div>
</div>

### weight

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/weight_web.png" alt="weight on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/weight_android.png" alt="weight on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/weight_ios.png" alt="weight on iOS" />
  </div>
</div>

### flex

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/flex_web.png" alt="flex on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/flex_android.png" alt="flex on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/flex_ios.png" alt="flex on iOS" />
  </div>
</div>

### shadow

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/shadow_web.png" alt="shadow on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/shadow_android.png" alt="shadow on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/shadow_ios.png" alt="shadow on iOS" />
  </div>
</div>

### elevation

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/elevation_web.png" alt="elevation on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/elevation_android.png" alt="elevation on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/elevation_ios.png" alt="elevation on iOS" />
  </div>
</div>

### blur

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/blur_web.png" alt="blur on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/blur_android.png" alt="blur on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/blur_ios.png" alt="blur on iOS" />
  </div>
</div>

### transform

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/transform_web.png" alt="transform on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/transform_android.png" alt="transform on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/transform_ios.png" alt="transform on iOS" />
  </div>
</div>

### rotate

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/rotate_web.png" alt="rotate on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/rotate_android.png" alt="rotate on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/rotate_ios.png" alt="rotate on iOS" />
  </div>
</div>

### scale

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/scale_web.png" alt="scale on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/scale_android.png" alt="scale on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/scale_ios.png" alt="scale on iOS" />
  </div>
</div>

### transition

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/transition_web.png" alt="transition on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/transition_android.png" alt="transition on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/transition_ios.png" alt="transition on iOS" />
  </div>
</div>

### overflow

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/overflow_web.png" alt="overflow on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/overflow_android.png" alt="overflow on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/overflow_ios.png" alt="overflow on iOS" />
  </div>
</div>

### zIndex

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/zIndex_web.png" alt="zIndex on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/zIndex_android.png" alt="zIndex on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/zIndex_ios.png" alt="zIndex on iOS" />
  </div>
</div>

### position

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/position_web.png" alt="position on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/position_android.png" alt="position on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/position_ios.png" alt="position on iOS" />
  </div>
</div>

### gridColumns

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/gridColumns_web.png" alt="gridColumns on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/gridColumns_android.png" alt="gridColumns on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/gridColumns_ios.png" alt="gridColumns on iOS" />
  </div>
</div>

### linearGradient

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/linearGradient_web.png" alt="linearGradient on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/linearGradient_android.png" alt="linearGradient on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/linearGradient_ios.png" alt="linearGradient on iOS" />
  </div>
</div>

### maxLines

<div className="platform-row">
  <div className="platform-item">
    <span className="platform-label">Web</span>
    <img src="/comparison/maxLines_web.png" alt="maxLines on Web" />
  </div>
  <div className="platform-item">
    <span className="platform-label">Android</span>
    <img src="/comparison/maxLines_android.png" alt="maxLines on Android" />
  </div>
  <div className="platform-item">
    <span className="platform-label">iOS</span>
    <img src="/comparison/maxLines_ios.png" alt="maxLines on iOS" />
  </div>
</div>

</div>

<style>{`
  .comparison-grid {
    margin-top: 2rem;
  }

  .comparison-grid h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fd-border);
  }

  .platform-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .platform-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .platform-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fd-muted-foreground);
  }

  .platform-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--fd-border);
    background: var(--fd-card);
  }

  @media (max-width: 768px) {
    .platform-row {
      grid-template-columns: 1fr;
    }
  }
`}</style>