Macbook

A responsive MacBook frame component that wraps any content inside a realistic MacBook Air, MacBook Pro or MacBook Neo display, with multiple sizes and colors.

macbook-01

import { Macbook } from "@/components/ui/apple/macbook" 

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
       <Macbook>
       <iframe 
          src={"https://design-agency.designali.com/"} 
          className="block size-full border-0"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          referrerPolicy="strict-origin-when-cross-origin"
        /> 
       </Macbook>
    </div>
  )
}

macbook-02

Medium

"use client"

import { useState } from "react"
import { Macbook } from "@/components/ui/apple/macbook"

type MacbookcSize = "sm" | "md" | "lg" | "xl"

export function MacbookDashboardDemo() {
  const [size, setSize] = useState<MacbookcSize>("md")

  const options: { value: MacbookcSize; label: string }[] = [
    { value: "sm", label: "Small" },
    { value: "md", label: "Medium" },
    { value: "lg", label: "Large" },
    { value: "xl", label: "Extra Large" },
  ]

  return (
    <div className="flex flex-col items-center justify-center gap-12 p-8">
      {/* Tabs / Radio Toggle */}
      <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {options.map((option) => (
          <button
            key={option.value}
            onClick={() => setSize(option.value)}
            className={`rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${
              size === option.value
                ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
                : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
            }`}
          >
            {option.label}
          </button>
        ))}
      </div>

      {/* Active Macbookc Display */}
      <div className="flex flex-col items-center">
        <Macbook size={size} color="indigo">
          <div className="flex h-full items-center justify-center">
            <span className="text-2xl font-semibold">
              {options.find((opt) => opt.value === size)?.label}
            </span>
          </div>
        </Macbook>
      </div>
    </div>
  )
}

macbook-03

MacBook Neo — citrus

"use client"

import { useState } from "react"

import { Macbook } from "@/components/ui/apple/macbook"

const variants = [
  {
    value: "macbook-air",
    label: "MacBook Air",
    colors: ["sky-blue", "midnight", "starlight", "silver"],
  },
  {
    value: "macbook-pro",
    label: "MacBook Pro",
    colors: ["black", "silver"],
  },
  {
    value: "macbook-neo",
    label: "MacBook Neo",
    colors: ["silver", "indigo", "blush", "citrus"],
  },
] as const

type MacbookVariant = (typeof variants)[number]["value"]
type MacbookColor = (typeof variants)[number]["colors"][number]

export function MacbookVariantDemo() {
  const [activeVariant, setActiveVariant] =
    useState<MacbookVariant>("macbook-neo")

  const [activeColor, setActiveColor] =
    useState<MacbookColor>("citrus")

  const currentVariant = variants.find(
    (variant) => variant.value === activeVariant
  )!

  const handleVariantChange = (variant: MacbookVariant) => {
    setActiveVariant(variant)

    const selectedVariant = variants.find(
      (item) => item.value === variant
    )!

    setActiveColor(selectedVariant.colors[0])
  }

  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      {/* Model Tabs */}
      <div className="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {variants.map((variant) => (
          <button
            key={variant.value}
            onClick={() => handleVariantChange(variant.value)}
            className={`rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${
              activeVariant === variant.value
                ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
                : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
            }`}
          >
            {variant.label}
          </button>
        ))}
      </div>

      {/* Color Tabs */}
      <div className="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {currentVariant.colors.map((color) => (
          <button
            key={color}
            onClick={() => setActiveColor(color)}
            className={`rounded-md px-4 py-2 text-sm font-medium capitalize transition-all duration-200 ${
              activeColor === color
                ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
                : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
            }`}
          >
            {color.replace("-", " ")}
          </button>
        ))}
      </div>

      {/* Active MacBook */}
      <div className="flex flex-col items-center">
        <Macbook
          size="lg"
          variant={activeVariant}
          color={activeColor}
        >
          <div className="flex h-full items-center justify-center bg-background">
            <p className="text-2xl font-medium capitalize">
              {currentVariant.label} — {activeColor.replace("-", " ")}
            </p>
          </div>
        </Macbook>
      </div>
    </div>
  )
}

macbook-04

import { Macbook } from "@/components/ui/apple/macbook"

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Macbook variant="macbook-pro">
        <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </Macbook>
    </div>
  )
}

macbook-05

import { Macbook } from "@/components/ui/apple/macbook"

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Macbook size="md" variant="macbook-air" color="starlight">
        <video
          src="/vid/colorful-spheres.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="h-full w-full object-cover"
        />
      </Macbook>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://designali.com/r/macbook.json

Usage

import { Macbook } from "@/components/ui/macbook"

<Macbook>
  <div className="p-6">Your content here</div>
</Macbook>

Variant

<Macbook variant="macbook-pro" color="black">
  <div className="p-6">MacBook Pro</div>
</Macbook>

Size

<Macbook size="lg">
  <div className="p-6">Large MacBook</div>
</Macbook>

Color

<Macbook variant="macbook-air" color="sky-blue">
  <div className="p-6">Sky Blue MacBook Air</div>
</Macbook>

Custom frame image

<Macbook>
  <div className="p-6">Custom frame</div>
</Macbook>

Props

Prop	Type	Default
`children`	`ReactNode`	—
`className`	`string`	—
`variant`	`"macbook-air" \| "macbook-pro" \| "macbook-neo"`	`"macbook-air"`
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`
`color`	`"sky-blue" \| "midnight" \| "starlight" \| "silver" \| "black" \| "indigo" \| "blush" \| "citrus"`	`"silver"`
`"Macbook"`

Available colors

Variant	Colors
`macbook-air`	`sky-blue`, `midnight`, `starlight`, `silver`
`macbook-pro`	`black`, `silver`
`macbook-neo`	`silver`, `indigo`, `blush`, `citrus`

Notes

The screen area is an absolutely positioned container, so children scroll vertically inside it when they overflow.
Sizes map to fixed widths (24rem, 36rem, 48rem, 64rem) with a 16/10 aspect ratio. Use className (for example max-w-full) to keep the MacBook inside small viewports.
If the selected color isn't available for the chosen variant, the first color of that variant is used. For example, variant="macbook-pro" with color="blush" falls back to black.
silver exists in all three variants, so the default works everywhere.
Passing image overrides both variant and color.

iPhone Studio Display