Density

Window

Window shows a desktop app window shell with rounded corners and a strong drop shadow.

import { Skeleton, View, Window } from "density-base-ui";

export default function WindowExample() {
  return (
    <View padding={false} style={{ maxWidth: "34rem" }}>
      <Window style={{ aspectRatio: "16 / 10" }}>
        <View
          gap="lg"
          layout="grid"
          padding={false}
          style={{ flex: 1, gridTemplateRows: "auto 1fr auto" }}
        >
          <Skeleton style={{ width: "35%" }} />
          <Skeleton style={{ flex: 1 }} />
          <Skeleton style={{ width: "70%" }} />
        </View>
      </Window>
    </View>
  );
}

Dismiss control

Set dismissable to show a Close control. Handle onDismiss to remove the window from its owner.

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

export default function WindowDismissableExample() {
  return <Window dismissable onDismiss={() => undefined}></Window>;
}

Padding

import { Skeleton, Window } from "density-base-ui";

export default function WindowPaddingExample() {
  return (
    <div
      style={{
        display: "grid",
        gap: "0.75rem",
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
      }}
    >
      <Window padding={false} style={{ aspectRatio: "3 / 2" }}>
        <Skeleton style={{ flex: 1 }} />
      </Window>
      <Window style={{ aspectRatio: "3 / 2" }}>
        <Skeleton style={{ flex: 1 }} />
      </Window>
    </div>
  );
}