ScreenshotFrame

Code

import { ScreenshotFrame } from "@fadymondy/nasaq/web";export function BoardShot() {  return (    <ScreenshotFrame variant="browser" title="app.mahaam.com/board" label="Mahaam board with three columns">      <img src="/board.png" alt="" />    </ScreenshotFrame>  );}

Data Display · beta

Live examples and controls: ScreenshotFrame in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/screenshot-frame.json

Wraps a screenshot (an image or live mock markup) in a window, browser or phone frame so marketing pages can show the product without imitating a real operating system. The frame uses neutral greys only; the screenshot carries the brand.

When to useCopy Anchor Link

• Product pages and docs that show the product UI.
• Inside FeatureStory as the media.

When not to useCopy Anchor Link

• Plain photos or illustrations: use an <img> in a figure.
• Interactive content the user should operate: with label set, the content is inert. Render it without a label, or without the frame.
• Code samples: use a code block.

ImportCopy Anchor Link

import { ScreenshotFrame, type ScreenshotFrameProps } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ScreenshotFrame } from "@fadymondy/nasaq/web";

export function BoardShot() {
  return (
    <ScreenshotFrame variant="browser" title="app.mahaam.com/board" label="Mahaam board with three columns">
      <img src="/board.png" alt="" />
    </ScreenshotFrame>
  );
}

AnatomyCopy Anchor Link

ScreenshotFrame                     data-slot="screenshot-frame", data-variant   <figure>
├─ chrome                           window/browser: rounded card with ring; phone: rounded bezel
│  ├─ bar                           data-slot="screenshot-frame-bar" (window, browser only)
│  │  ├─ three dots                 aria-hidden
│  │  └─ title                      dir="ltr", centred
│  └─ screen                        data-slot="screenshot-frame-screen" (role="img" when label is set)
│     └─ children
└─ figcaption                       when caption is set

APICopy Anchor Link

ScreenshotFrameCopy Anchor Link

ScreenshotFrameProps extends Omit<ComponentProps<"figure">, "title">. Remaining props go to the <figure>.

ExamplesCopy Anchor Link

Desktop window with captionCopy Anchor Link

import { ScreenshotFrame } from "@fadymondy/nasaq/web";

export function WindowShot() {
  return (
    <ScreenshotFrame
      title="Mahaam"
      label="Project board with tasks grouped by status"
      caption="Every task in one board."
    >
      <img src="/board.png" alt="" className="w-full" />
    </ScreenshotFrame>
  );
}

Phone with Arabic copyCopy Anchor Link

import { ScreenshotFrame } from "@fadymondy/nasaq/web";

export function PhoneShot() {
  return (
    <ScreenshotFrame variant="phone" label="شاشة المهام في تطبيق مهام" caption="مهامك في جيبك.">
      <img src="/mobile-tasks.png" alt="" className="size-full object-cover" />
    </ScreenshotFrame>
  );
}

Live mock instead of an imageCopy Anchor Link

import { ScreenshotFrame } from "@fadymondy/nasaq/web";

export function LiveMock() {
  return (
    <ScreenshotFrame variant="browser" title="nasaq.dev" label="Landing page hero">
      <div className="p-8">
        <h3 className="text-h2">Build in Arabic first</h3>
      </div>
    </ScreenshotFrame>
  );
}

AccessibilityCopy Anchor Link

• With label: the screen is one role="img" named by label; children are aria-hidden and inert, so nothing inside is focusable or announced. Write what the screenshot shows, not "screenshot of".
• Without label: children stay in the accessibility tree. Give an inner <img> a real alt, or use this for interactive mocks.
• The traffic-light dots and spacer are aria-hidden.
• The frame is a figure; caption becomes its figcaption.

The caller localises label, title and caption.

RTL & i18nCopy Anchor Link

• title is forced dir="ltr": window titles and addresses stay left-to-right on Arabic pages.
• The frame chrome does not mirror; the dots stay at the left of the bar, like a real window.
• The caption is centred and follows the page direction.
• Screenshot content is not mirrored. Provide a localised screenshot per locale.
• No built-in strings.

Styling & tokensCopy Anchor Link

• Tokens: bg-nq-surface-raised, ring-border, bg-nq-line-strong (dots), bg-secondary (address pill), bg-background (screen), rounded-card, text-caption, text-muted-foreground.
• Target with [data-slot=screenshot-frame], [data-variant=phone], [data-slot=screenshot-frame-bar], [data-slot=screenshot-frame-screen].
• The frame fills its container width; set the width with className (max-w-3xl). Do not recolour with raw hex.

Do / Don'tCopy Anchor Link

• Do set label for image screenshots.
• Do use one frame style per page.
• Do ship a localised screenshot for each locale.
• Don't put controls the user must operate inside a labelled frame.
• Don't colour the chrome with brand colours.
• Don't put long text in title; it truncates.

RelatedCopy Anchor Link

• FeatureStory · Tabs · Card

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-data-display-screenshot-frame--docs