# Respect Safe Areas

**MUST** · **ID:** `layout-safe-areas` · **Category:** layout
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-safe-areas

> MUST: Respect safe areas (use env(safe-area-inset-*))

Account for notches and insets with safe-area variables

Mobile devices with notches and rounded corners have safe areas where content shouldn't be placed. Use CSS environment variables like env(safe-area-inset-top) to ensure your content isn't obscured by device UI elements.

## Bad — do not do this

`layout-safe-areas-bad`

```tsx
export function SafeAreasBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="relative">
          {/* Phone frame with notch */}
          <div className="bg-gray-900 text-white px-4 py-2 flex justify-center">
            <div className="w-20 h-5 bg-black rounded-b-xl" />
          </div>
          <div className="bg-primary text-primary-foreground px-4 py-3">
            <h3 className="font-semibold">App Header</h3>
          </div>
          <div className="p-4 min-h-[100px]">
            <p className="text-sm text-muted-foreground">Content area</p>
          </div>
          {/* Bottom nav without safe area */}
          <div className="bg-muted px-4 py-3 flex justify-around">
            <span className="text-xs">Home</span>
            <span className="text-xs">Search</span>
            <span className="text-xs">Profile</span>
          </div>
          <div className="h-6 bg-gray-900" /> {/* Home indicator area */}
        </div>
        <div className="p-3 bg-error/10 border-t border-error/20">
          <p className="text-xs text-error-foreground">
            Nav buttons overlap home indicator area
          </p>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        No safe-area-inset-bottom - UI hidden by home bar
      </p>
    </div>
  );
}
```

## Good — do this

`layout-safe-areas-good`

```tsx
export function SafeAreasGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="relative">
          {/* Phone frame with notch */}
          <div className="bg-gray-900 text-white px-4 py-2 flex justify-center">
            <div className="w-20 h-5 bg-black rounded-b-xl" />
          </div>
          <div className="bg-primary text-primary-foreground px-4 py-3">
            <h3 className="font-semibold">App Header</h3>
          </div>
          <div className="p-4 min-h-[100px]">
            <p className="text-sm text-muted-foreground">Content area</p>
          </div>
          {/* Bottom nav with safe area padding */}
          <div className="bg-muted px-4 pt-3 pb-8 flex justify-around">
            <span className="text-xs">Home</span>
            <span className="text-xs">Search</span>
            <span className="text-xs">Profile</span>
          </div>
          <div className="h-6 bg-gray-900 absolute bottom-0 left-0 right-0" />
        </div>
        <div className="p-3 bg-success/10 border-t border-success/20">
          <code className="text-xs text-success-foreground font-mono">
            padding-bottom: env(safe-area-inset-bottom)
          </code>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        safe-area-inset keeps UI above home bar
      </p>
    </div>
  );
}
```

## References

- [Safe Area Insets](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env)
- [Designing for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)