# Apple Pro Display XDR
> Apple Pro Display XDR mockup for React and shadcn/ui with an aluminum frame, screen modes, and an animated macOS dock.
Source: https://www.cult-ui.com/docs/components/apple-pro-display-xdr
## Example
```tsx title="apple-pro-display-xdr-demo.tsx"
"use client"
import { AppleProDisplayXDR } from "@/components/ui/apple-pro-display-xdr"
export default function AppleProDisplayXDRDemo() {
return (
)
}
```
Apple Pro Display XDR is a React display mockup component for shadcn/ui, animated with Motion. Use it to showcase desktop apps on landing pages, or pass your own screen content.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/apple-pro-display-xdr
```
### Manual
**Install the required dependencies:**
```bash
npm install @tabler/icons-react motion
```
**Install the tooltip component from shadcn/ui:**
```bash
npx shadcn@latest add tooltip
```
**Copy and paste the following code into your project.**
```tsx title="apple-pro-display-xdr.tsx"
"use client"
/**
* Apple Studio Display–style hero: aluminum frame, glass stack, screen bezel,
* camera / “recording” LED, optional built-in demos, and a magnifying macOS dock.
* Click the screen (not the dock) to cycle demos unless `screenContent` is set.
*/
import type { CSSProperties, ReactNode, SVGProps } from "react"
import {
createContext,
useCallback,
useContext,
useEffect,
useId,
useMemo,
useRef,
useState,
} from "react"
import Image from "next/image"
import { IconDownload } from "@tabler/icons-react"
import {
motion,
useMotionValue,
useReducedMotion,
useSpring,
useTransform,
type MotionValue,
} from "motion/react"
import { cn } from "@/lib/utils"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/base-tooltip"
// ---------------------------------------------------------------------------
// Scene + frame tokens
// ---------------------------------------------------------------------------
/** Fills the cable-management cutout so the hole reads as depth, not transparency */
const SCENE_BG = "#000000"
/** Brush-metal bezel, chamfers, and hardware accents */
const ALUMINUM = {
brushLo: "#c2c2c4",
brushHi: "#d8d8da",
chamfer: "#e8e8ea",
bezel: "#000000",
cameraDot: "#1a1a1a",
led: "#30d158",
}
/** Outer shell padding; pairs with `R_*` for nested rounded rects */
const FRAME_PX = 5
const R_OUTER = 10
const R_GLASS = 8
const R_SCREEN = 6
/** Black inner frame insets (asymmetric bottom clears “chin” / dock visual) */
const BEZEL = { top: 11, side: 7, bottom: 16 }
/** Drop-shadow tint on hover; index aligns with `MODES` / `modeIndex` */
const SCREEN_GLOW = [
"rgba(196, 72, 58, 0.35)",
"rgba(88, 140, 220, 0.32)",
"rgba(210, 170, 90, 0.3)",
"rgba(150, 110, 230, 0.34)",
] as const
// ---------------------------------------------------------------------------
// Dock icons (inline SVG; Finder uses `useId` for unique gradient IDs)
// ---------------------------------------------------------------------------
const SpotifyIcon = (props: SVGProps) => (
)
const SafariIcon = (props: SVGProps) => (
)
const AppStoreIcon = (props: SVGProps) => (
)
const DiscordIcon = (props: SVGProps) => (
)
const ClaudeAIIcon = (props: SVGProps) => (
)
const FigmaIcon = (props: SVGProps) => (
)
const GoogleCalendarIcon = (props: SVGProps) => (
)
const ZoomIcon = (props: SVGProps) => (
)
/** macOS Finder tile; gradient IDs must be unique when multiple instances exist */
function FinderDockIcon(props: SVGProps) {
const gradId = useId().replaceAll(":", "")
return (
)
}
/** Left-to-right dock order; `color` seeds each tile’s gradient */
const dockApps = [
{ name: "Finder", icon: FinderDockIcon, color: "#0076FF" },
{ name: "Google Calendar", icon: GoogleCalendarIcon, color: "#ffffff" },
{ name: "Safari", icon: SafariIcon, color: "#ffffff" },
{ name: "Claude Code", icon: ClaudeAIIcon, color: "#E96A45" },
{ name: "Zoom", icon: ZoomIcon, color: "#0066F7" },
{ name: "Figma", icon: FigmaIcon, color: "#ffffff" },
{ name: "Spotify", icon: SpotifyIcon, color: "#ffffff" },
{ name: "Discord", icon: DiscordIcon, color: "#737DF8" },
{ name: "App Store", icon: AppStoreIcon, color: "#ffffff" },
] as const
const STUDIO_DOCK_MAGNET_PX = 118
const STUDIO_DOCK_MAX_EXTRA_SCALE = 0.44
/** Smoothstep curve: 1px baseline → up ~44% larger at cursor, falloff by `STUDIO_DOCK_MAGNET_PX` */
function studioDockScaleFromDistance(distancePx: number): number {
const d = Math.abs(distancePx)
if (d >= STUDIO_DOCK_MAGNET_PX) {
return 1
}
const t = 1 - d / STUDIO_DOCK_MAGNET_PX
return 1 + STUDIO_DOCK_MAX_EXTRA_SCALE * t * t * (3 - 2 * t)
}
interface StudioDockContextValue {
/** Viewport X from `mousemove`; `Infinity` when pointer left the dock */
mouseX: MotionValue
reduceMotion: boolean
}
const StudioDockContext = createContext(null)
function useStudioDock() {
const ctx = useContext(StudioDockContext)
if (!ctx) {
throw new Error("Studio dock context missing")
}
return ctx
}
/** Wraps the dock: tracks cursor X and resets to “idle” scale when mouse leaves */
function StudioDock({
children,
className,
style,
ariaLabel,
reduceMotion,
}: {
children: ReactNode
className?: string
style?: CSSProperties
ariaLabel: string
reduceMotion: boolean
}) {
const mouseX = useMotionValue(Number.POSITIVE_INFINITY)
const value = useMemo(
() => ({ mouseX, reduceMotion }),
[mouseX, reduceMotion]
)
return (
mouseX.set(Number.POSITIVE_INFINITY)}
onMouseMove={(e) => mouseX.set(e.clientX)}
style={style}
>
{children}
)
}
/** Single dock tile: magnet scale from distance to nav `mouseX`, lift + z-index when enlarged */
function StudioDockIcon({
label,
children,
showRunningDot,
}: {
label: string
children: ReactNode
showRunningDot?: boolean
}) {
const { mouseX, reduceMotion } = useStudioDock()
const ref = useRef(null)
const scaleSync = useTransform(mouseX, (mx) => {
if (!Number.isFinite(mx)) {
return 1
}
const el = ref.current
if (!el) {
return 1
}
const b = el.getBoundingClientRect()
const dist = mx - b.left - b.width / 2
return studioDockScaleFromDistance(dist)
})
const scale = useSpring(scaleSync, {
mass: 0.12,
stiffness: reduceMotion ? 8000 : 380,
damping: reduceMotion ? 160 : 26,
})
const y = useTransform(scale, (s) => -Math.max(0, s - 1) * 14)
const z = useTransform(scale, (s) => (s > 1.025 ? 10 : 1))
return (
e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
ref={ref}
style={{ scale, y, zIndex: z }}
type="button"
>
{children}
}
/>
{showRunningDot ? (
) : null}
{label}
)
}
export type StudioScreenMode = "grading" | "wallpaper" | "photo" | "gradient"
export interface AppleStudioDisplayProps {
className?: string
/** When set, replaces built-in screen demos */
screenContent?: ReactNode
/** Initial variant when using built-in content */
initialMode?: StudioScreenMode
}
/** Fake color grading UI (Resolve-style chrome + scopes placeholder) */
function GradingScreen() {
return (
{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/noNoninteractiveElementInteractions: decorative LED reaction */}
{screenContent ?? }
{/* Full-area hit target; dock uses pointer-events-auto */}
{/* Specular streak across glass (non-interactive) */}
{/* Contact shadow under display */}
{/* Stand: slim hinge seam, tapered column, foot with rubber feet */}
}
/>
Cable management
)
}
export default AppleProDisplayXDR
```
**Update the import paths to match your project setup.**
**The built-in wallpaper demo loads `next/image` from `public/images/apple-wallpaper.jpg`. Add
that asset or pass `screenContent` / adjust the source in the component.**
## Usage
`AppleProDisplayXDR` is a client component. Optionally pass `screenContent` to fully control the display area; otherwise the default cycling demos and dock run on click.
```tsx
import { AppleProDisplayXDR } from "@/components/apple-pro-display-xdr";
export function Hero() {
return (
);
}
```