## Feature Examples

### Structure
- description: Mobile preview widget consists of a mobile device frame placed on a background that emphasizes it. The frame has a header with a speaker and a camera, a screen and a footer. The screen is an empty container that accepts any kind of content (text, image or other) as a child item. It is 320 px wide and 480 px tall, and content that overflows it scrolls.
- example:
```jsx
<MobilePreviewWidget>
  <StorybookComponents.Placeholder height="100%">
    Preview content area
  </StorybookComponents.Placeholder>
</MobilePreviewWidget>;
```

### Skin
- description: Change the color of the background with `skin` prop. It supports 3 skins: - `neutral` (default) is for all common cases. - `gradient` is for larger preview areas. - `custom` lets you set the exact background color with `backgroundColor` prop, using a design system color name or any CSS color value.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <MobilePreviewWidget>
    <Box
      align="center"
      verticalAlign="middle"
      height="100%"
      padding="24px"
      backgroundColor="D80"
    >
      <Text>Neutral (default) background</Text>
    </Box>
  </MobilePreviewWidget>
  <MobilePreviewWidget skin="gradient">
    <Box
      align="center"
      verticalAlign="middle"
      height="100%"
      padding="24px"
      backgroundColor="D80"
    >
      <Text>Gradient background</Text>
    </Box>
  </MobilePreviewWidget>
  <MobilePreviewWidget skin="custom" backgroundColor="B10">
    <Box
      align="center"
      verticalAlign="middle"
      height="100%"
      padding="24px"
      backgroundColor="D80"
    >
      <Text>Custom background, backgroundColor set to B10</Text>
    </Box>
  </MobilePreviewWidget>
</StorybookComponents.Stack>;
```

### Dimensions
- description: Control the size of the background area with `width` and `height` props. Both accept a value in % or px and default to `100%`. The device frame keeps its own size and stays centered, so the props only make a difference when the area is larger than the frame.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <MobilePreviewWidget width="480px">
    <Box
      align="center"
      verticalAlign="middle"
      height="100%"
      padding="24px"
      backgroundColor="D80"
    >
      <Text>480 px width, default height</Text>
    </Box>
  </MobilePreviewWidget>
  <MobilePreviewWidget height="760px">
    <Box
      align="center"
      verticalAlign="middle"
      height="100%"
      padding="24px"
      backgroundColor="D80"
    >
      <Text>Default width, 760 px height</Text>
    </Box>
  </MobilePreviewWidget>
</StorybookComponents.Stack>;
```

### Scrollable content
- description: Content taller than the screen scrolls inside the device frame, so long pages can be previewed without changing the size of the widget.
- example:
```jsx
<MobilePreviewWidget>
  <Box direction="vertical" gap="SP3" padding="24px" backgroundColor="D80">
    <Heading size="medium">Summer Yoga Retreat</Heading>
    <Text size="small" secondary>
      Aug 14–16, 2026 · Lisbon
    </Text>
    <Text size="small">
      Three days of morning flows, breathwork and sunset meditation by the
      ocean. All levels welcome.
    </Text>
    <Button size="small">Book your spot</Button>
    <Divider />
    <Heading size="small">What's included</Heading>
    <Text size="small">Two daily yoga sessions</Text>
    <Text size="small">Plant-based meals</Text>
    <Text size="small">Beachfront accommodation</Text>
    <Divider />
    <Heading size="small">Schedule</Heading>
    <Text size="small">Friday: arrival and welcome dinner</Text>
    <Text size="small">Saturday: sunrise flow and surf lesson</Text>
    <Text size="small">Sunday: closing circle and brunch</Text>
    <Button size="small" priority="secondary">
      Share event
    </Button>
  </Box>
</MobilePreviewWidget>;
```

## Common Use Case Examples

### Settings preview
- description: Place a mobile preview widget next to a settings form so users see how their changes look on a mobile screen as they make them.
- example:
```jsx
() => {
  const [bannerText, setBannerText] = React.useState(
    'Get 20% off your first order',
  );
  const [showButton, setShowButton] = React.useState(true);

  return (
    <Card>
      <Card.Header
        title="Mobile banner"
        subtitle="Changes appear in the preview as you make them."
      />
      <Card.Divider />
      <Card.Content>
        <Layout>
          <Cell span={5}>
            <Layout>
              <Cell>
                <FormField label="Banner text" labelSize="small">
                  <Input
                    value={bannerText}
                    onChange={(e) => setBannerText(e.target.value)}
                  />
                </FormField>
              </Cell>
              <Cell>
                <FormField
                  label="Show button"
                  labelSize="small"
                  labelPlacement="left"
                >
                  <ToggleSwitch
                    size="small"
                    checked={showButton}
                    onChange={() => setShowButton(!showButton)}
                  />
                </FormField>
              </Cell>
            </Layout>
          </Cell>
          <Cell span={7}>
            <MobilePreviewWidget>
              <Box direction="vertical" height="100%" backgroundColor="D80">
                <Box
                  direction="vertical"
                  align="center"
                  gap="SP2"
                  padding="24px"
                  backgroundColor="B10"
                >
                  <Text size="small" weight="bold" light>
                    {bannerText}
                  </Text>
                  {showButton && (
                    <Button size="tiny" skin="light">
                      Shop now
                    </Button>
                  )}
                </Box>
                <Box direction="vertical" gap="SP2" padding="24px">
                  <Heading size="small">New arrivals</Heading>
                  <Text size="small">
                    Linen shirts, summer dresses and more.
                  </Text>
                </Box>
              </Box>
            </MobilePreviewWidget>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
```