Density

Window mockup

Use WindowMockup to show an empty desktop app window shell with rounded corners and a strong drop shadow.

import { WindowMockup } from "density-base-ui";

export default function WindowMockupExample() {
  return (
    <div style={{ maxWidth: "34rem", width: "100%" }}>
      <WindowMockup style={{ aspectRatio: "16 / 10" }} />
    </div>
  );
}

Props

Prop Attribute Values Default
presentation data-dn-presentation overlay overlay
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other native div props Mixed Native None

Padding

import { WindowMockup } from "density-base-ui";

export default function WindowMockupPaddingExample() {
  return (
    <div
      style={{
        display: "grid",
        gap: "0.75rem",
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <WindowMockup padding="none" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="2xs" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="xs" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="sm" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="md" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="lg" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="xl" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="2xl" style={{ aspectRatio: "3 / 2" }} />
      <WindowMockup padding="3xl" style={{ aspectRatio: "3 / 2" }} />
    </div>
  );
}