Showcase Window

A container for desktop app previews, showing features or screenshots in a polished frame for promotional pages.

1. Copy the component file

Create a new file called showcase-window.jsx in your reusable components folder (for example /src/components/) and paste the following code into it.

import { memo, useMemo } from "react";
import styles from "./showcase-window.module.css";

const ShowcaseWindow = (props) => {
  const {
    title,
    children,
    className,
    ...restProps
  } = props;

  const titleElementId = useMemo(() => (
    `showcase-window-title-${Math.random().toString(36).substring(2)}`
  ), []);

  return (
    <div
      aria-label="Showcase"
      aria-describedby={titleElementId}
      role="region"
      {...restProps}
      className={[
        className,
        styles["showcase-window"]
      ].join(" ")}
    >
      <div 
        aria-hidden={true}
        className={styles["header"]}
      >
        <div className={styles["controls"]}>
          <span className={styles["close"]}></span>
          <span className={styles["minimize"]}></span>
          <span className={styles["maximize"]}></span>
        </div>
        <div 
          className={styles["title"]}
          id={titleElementId}
        >
          {title}
        </div>
      </div>
      <div className={styles["panel"]}>
        {children}
      </div>
    </div>
  );
};

export default memo(ShowcaseWindow);

2. Copy the CSS module file

In the same folder, create a file called showcase-window.module.css and paste the following CSS.

.showcase-window {
  --window-min-width: 320px;
  --window-header-height: 32px;
  --window-background-color: #ffffff;
  --window-shadow-color: rgba(0, 0, 0, 0.15);
  --window-header-background-color: #f0f0f0;
  --window-control-icon-size: 12px;
  --window-control-icons-gap: 8px;

  @media (prefers-color-scheme: dark) {
    --window-background-color: #1e1e1e;
    --window-shadow-color: rgba(0, 0, 0, 0.5);
    --window-header-background-color: #2b2b2b;
  }

  display: flex;
  flex-direction: column;
  min-width: var(--window-min-width);
  min-height: var(--window-header-height);
  background: var(--window-background-color);
  border-radius: 12px;
  box-shadow: 0px 4px 20px var(--window-shadow-color);
  overflow: hidden;

  >.header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    height: var(--window-header-height);
    background: var(--window-header-background-color);

    >.controls {
      position: absolute;
      left: 12px;
      display: flex;
      align-items: center;
      gap: var(--window-control-icons-gap);

      >span {
        display: inline-block;
        width: var(--window-control-icon-size);
        height: var(--window-control-icon-size);
        border-radius: 50%;

        &.close {
          background: #ff5f56;
        }

        &.minimize {
          background: #ffbd2e;
        }

        &.maximize {
          background: #27c93f;
        }
      }
    }

    >.title {
      flex-shrink: 0;
      font-size: 0.95rem;
      font-weight: 500;
      max-width: calc(100% - calc(calc(var(--window-control-icon-size) + var(--window-control-icons-gap)) * 6));
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  >.panel {
    height: 100%;
  }
}

3. Use the component

Now you can import and use the component anywhere in your project.

import ShowcaseWindow from "@/components/essentials/showcase-window/showcase-window";

const ShowcaseWindowPreview = () => {
  return (
    <div style={containerStyles}>
      <ShowcaseWindow
        title="MosaicUI Components"
        style={{
          height: "100%",
        }}
      >
        {/* Add your showcase content here */}
        <iframe
          src="/components"
          title="MosaicUI Components"
          style={frameStyles}
        />
      </ShowcaseWindow>
    </div>
  )
};

const containerStyles = {
  padding: "32px", 
  width: "100%",
  minWidth: "0",
  maxWidth: "994px",
  height: "540px",
};

const frameStyles = {
  width: "100%",
  height: "100%",
  border: "none",
};

export default ShowcaseWindowPreview;

Props

Configure the component with the following props:

Prop	Type	Required	Default	Description
title	`string`	Yes	—	The title displayed in the frame header. Helps users understand what the showcase is presenting.
children	`ReactNode`	Yes	—	The content to display inside the frame, such as screenshots, app previews, videos, or other components.
className	`string`	No	—	Optional CSS class for custom styling of the ShowcaseWindow container.
style	`React.CSSProperties`	No	—	Optional inline styles to customize the ShowcaseWindow container directly.