# Mac Studio Display

> Front-facing Apple Studio Display device frame with slim black bezel, aluminum stand, and foot - empty transparent screen by default; optional children slot.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/mac-studio-display).

- Page, with a live preview: https://shadcn.exchange/r/uiception/mac-studio-display
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/mac-studio-display-light-d9c858d27fd1e9c1.png
- Registry item: https://uiception.com/r/mac-studio-display.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/mac-studio-display.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/new-york/blocks/mac-studio-display/page.tsx`

```tsx
import MacStudioDisplay from "./components/mac-studio-display"

export default function Page() {
  return (
    <div className="px-4 py-4 md:px-6 md:py-6">
      <MacStudioDisplay />
    </div>
  )
}
```

### `registry/new-york/blocks/mac-studio-display/components/mac-studio-display.tsx`

```tsx
import { cn } from "@/lib/utils"

import MacStudioDisplayStand from "./mac-studio-display-stand"
import StudioDisplayScreen, {
  type StudioDisplayScreenProps,
} from "./studio-display-screen"

import "../styles/mac-studio-display.css"

type MacStudioDisplayProps = {
  className?: string
} & Omit<StudioDisplayScreenProps, "className">

export default function MacStudioDisplay({
  className,
  minHeight,
  aspectRatio = "16 / 9",
  children,
}: MacStudioDisplayProps) {
  return (
    <div
      className={cn(
        "msd-root mx-auto flex w-full max-w-3xl min-w-0 flex-col items-center drop-shadow-(--msd-shell-shadow)",
        className
      )}
      role="img"
      aria-label="Mac Studio Display device frame mockup"
    >
      <div className="relative z-1 w-full">
        <div className="msd-frame rounded-xl p-1 pb-0.5">
          <div className="relative overflow-hidden rounded-[0.625rem] bg-transparent">
            <span
              className="msd-camera absolute top-0.5 left-1/2 z-2 block size-1.5 -translate-x-1/2 rounded-full"
              aria-hidden
            />
            <StudioDisplayScreen minHeight={minHeight} aspectRatio={aspectRatio}>
              {children}
            </StudioDisplayScreen>
          </div>
        </div>
      </div>

      <MacStudioDisplayStand />
    </div>
  )
}
```

### `registry/new-york/blocks/mac-studio-display/components/studio-display-screen.tsx`

```tsx
import type { CSSProperties, ReactNode } from "react"

import { cn } from "@/lib/utils"

export type StudioDisplayScreenProps = {
  className?: string
  minHeight?: string | number
  aspectRatio?: string
  children?: ReactNode
}

export default function StudioDisplayScreen({
  className,
  minHeight = "15rem",
  aspectRatio,
  children,
}: StudioDisplayScreenProps) {
  const style = {
    ...(aspectRatio ? { aspectRatio } : {}),
    minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
  } satisfies CSSProperties

  return (
    <div
      className={cn(
        "relative z-1 box-border w-full overflow-hidden rounded-md border-10 border-(--msd-bezel) bg-(--msd-screen)",
        className
      )}
      style={style}
    >
      {children ? (
        <div className="msd-screen-slot absolute inset-0 flex size-full overflow-hidden">
          {children}
        </div>
      ) : null}
    </div>
  )
}
```

### `registry/new-york/blocks/mac-studio-display/components/mac-studio-display-stand.tsx`

```tsx
import { cn } from "@/lib/utils"

type MacStudioDisplayStandProps = {
  className?: string
}

export default function MacStudioDisplayStand({
  className,
}: MacStudioDisplayStandProps) {
  const clipId = "msd-stand-clip"

  return (
    <div
      className={cn(
        "msd-stand relative z-0 -mt-px flex w-[24%] max-w-52 min-w-28 flex-col items-stretch",
        className
      )}
      aria-hidden
    >
      <svg className="absolute size-0 overflow-hidden" aria-hidden>
        <defs>
          <clipPath
            id={clipId}
            clipPathUnits="objectBoundingBox"
          >
            <path d="M 0 0 L 0.32 0 A 0.18 0.24 0 0 0 0.68 0 L 1 0 L 1 1 L 0 1 Z" />
          </clipPath>
        </defs>
      </svg>

      <div
        className="msd-stand-arm relative h-24 w-full"
        style={{ clipPath: `url(#${clipId})` }}
      >
        <span className="msd-stand-arm-bezel" aria-hidden />
      </div>

      <div className="msd-stand-foot relative h-3 w-full rounded-b-sm" />
    </div>
  )
}
```

### `registry/new-york/blocks/mac-studio-display/styles/mac-studio-display.css`

```css
/* mac-studio-display — silver aluminum theme tokens, frame/stand gradients, camera pseudo-elements */

.msd-root {
  --msd-silver-light: #e9e9eb;
  --msd-silver-mid: #d4d4d7;
  --msd-silver-dark: #b9b9be;
  --msd-silver-deep: #97979d;
  --msd-bezel: #060608;
  --msd-screen: #141416;
  --msd-frame-highlight: rgb(255 255 255 / 0.7);
  --msd-frame-shadow: rgb(0 0 0 / 0.18);
  --msd-shell-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.28);
  --msd-shell-ring: rgb(0 0 0 / 0.14);
}

.dark .msd-root {
  --msd-shell-shadow: 0 28px 56px -16px rgb(0 0 0 / 0.55);
  --msd-shell-ring: rgb(255 255 255 / 0.1);
}

.msd-frame {
  background: linear-gradient(
    180deg,
    var(--msd-silver-light) 0%,
    var(--msd-silver-mid) 55%,
    var(--msd-silver-dark) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--msd-frame-highlight),
    inset 0 -1px 0 var(--msd-frame-shadow),
    0 0 0 1px var(--msd-shell-ring);
}

.msd-camera {
  background: radial-gradient(
    circle at 38% 32%,
    #2e2e38 0%,
    #17171e 42%,
    #0a0a0e 78%,
    #050507 100%
  );
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.7),
    inset 0 1px 1.5px rgb(0 0 0 / 0.6),
    inset 0 -0.5px 0 rgb(255 255 255 / 0.05);
}

.msd-camera::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #181820 0%, #08080c 100%);
  box-shadow: inset 0 0 1px rgb(0 0 0 / 0.8);
}

.msd-camera::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 30%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(255 255 255 / 0.35) 0%,
    rgb(255 255 255 / 0.08) 55%,
    transparent 100%
  );
}

.msd-stand-arm {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0) 35%),
    linear-gradient(
      90deg,
      var(--msd-silver-deep) 0%,
      var(--msd-silver-mid) 4%,
      var(--msd-silver-light) 16%,
      var(--msd-silver-light) 84%,
      var(--msd-silver-mid) 96%,
      var(--msd-silver-deep) 100%
    );
  box-shadow: inset 0 10px 10px -6px rgb(0 0 0 / 0.32);
}

/* Bottom bezel depth — front face of the arm's thickness */
.msd-stand-arm-bezel {
  position: absolute;
  right: -2%;
  bottom: 0;
  left: -2%;
  z-index: 1;
  height: 14%;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.28) 0%,
    rgb(0 0 0 / 0.14) 1px,
    var(--msd-silver-light) 2px,
    var(--msd-silver-mid) 50%,
    var(--msd-silver-dark) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / 0.55),
    inset 0 -1.5px 2px rgb(0 0 0 / 0.14);
  pointer-events: none;
}

.msd-stand-foot {
  margin-top: -1px;
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(
      90deg,
      rgb(0 0 0 / 0.16) 0%,
      rgb(0 0 0 / 0) 5%,
      rgb(0 0 0 / 0) 95%,
      rgb(0 0 0 / 0.16) 100%
    ),
    linear-gradient(
      180deg,
      var(--msd-silver-light) 0%,
      var(--msd-silver-mid) 55%,
      var(--msd-silver-deep) 100%
    );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    inset 0 -1.5px 1px rgb(0 0 0 / 0.24),
    0 1px 2px rgb(0 0 0 / 0.18);
}

.msd-screen-slot > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
```