react-steam-deck

A zero-dependency, schematic Steam Deck mockup frame for React — put your game (or anything else) on the Deck's screen.

Built for marketing sites and press pages of Deck-verified games: instead of a generic tablet-with-dots mockup, you get a device silhouette that actually reads as a Steam Deck — drawn at the real device's proportions (298×117 mm body, 7" 16:10 screen), with the control positions measured from a front reference photo: D-pad and A/B/X/Y at the top outboard corners, thumbsticks inboard beside them, the square trackpads below, STEAM / quick-access pills, and the speaker grilles.

• Zero dependencies — one file, React only
• Pure SVG — crisp at any size, no image assets
• Your content on the screen — children render inside the glass
• Themeable — line color, accent color, and screen background are props
• Also ships a plain steam-deck.svg for non-React use (Figma, plain HTML, image embeds)

Install

npm install react-steam-deck

Or skip the dependency entirely — it's a single zero-dependency file, so you can just copy src/index.tsx into your project.

Usage

import { SteamDeckFrame } from "react-steam-deck";

<SteamDeckFrame>
  <img src="/screenshots/my-game.jpg" alt="My game running on Steam Deck" />
</SteamDeckFrame>;

The frame is responsive — it fills its container's width and keeps the device's aspect ratio. Children are absolutely positioned inside the screen glass, so a plain <img> or a <div> with your own layout both work.

<SteamDeckFrame
  lineColor="rgba(121, 216, 255, 0.4)"
  accentColor="#57d9ff"
  screenBackground="url(/nebula.jpg) center / cover"
>
  <div style={{ display: "grid", placeContent: "end start", height: "100%", padding: 24 }}>
    <strong>My Game</strong>
    <span>Steam Deck Verified</span>
  </div>
</SteamDeckFrame>

Props

Prop	Type	Default	Description
children	ReactNode	—	Rendered inside the screen glass
lineColor	string	rgba(148, 180, 200, 0.45)	Stroke color for the line work
accentColor	string	#ff8a3d	A button + thumbstick cap rings
screenBackground	string	#04070b	CSS background of the screen behind children
showButtonLabels	boolean	true	Render A/B/X/Y letters and the STEAM label
labelFontFamily	string	system-ui, sans-serif	Font for the button labels
title	string	"Steam Deck handheld outline"	Accessible name of the illustration
className	string	—	Class on the wrapper element
style	CSSProperties	—	Style on the wrapper element

Plain SVG

Not using React? steam-deck.svg is the same drawing as a standalone file. The screen area is the rectangle at x=298 y=46 w=604 h=380 in the 1200×472 viewBox (as percentages: left 24.83%, top 9.75%, width 50.33%, height 80.5%) — overlay your content there.

License & trademark note

MIT © Austin Spraggins.

This project is a fan-made schematic illustration and is not affiliated with, sponsored, or endorsed by Valve Corporation. Steam and Steam Deck are trademarks of Valve Corporation. Don't use this component in a way that implies endorsement by Valve.