Phone Mockup Basic

PreviousNext

A versatile phone carousel component ideal for showcasing app screens, features, and product highlights.

Docs
solaceuiui

Preview

Loading preview…
app/docs/phone-mockup/phone-mockup-basic.tsx
import React from "react";
import {
  ImageItem,
  PhoneCarousel,
} from "@/components/docs-components/phone-carousel";

const exampleImages: ImageItem[] = [
  {
    src: "https://res.cloudinary.com/harshitproject/image/upload/v1746774805/Behance-screen.png",
    alt: "Behance app on iPhone",
  },
  {
    src: "https://res.cloudinary.com/harshitproject/image/upload/v1746774805/Notion-screen.png",
    alt: "Notion app on iPhone",
  },
  {
    src: "https://res.cloudinary.com/harshitproject/image/upload/v1746774806/One-screen.png",
    alt: "One app on iPhone",
  },
  {
    src: "https://res.cloudinary.com/harshitproject/image/upload/v1746774807/Reddit-nj7hwh.png",
    alt: "Reddit app on iPhone",
  },
];

export function PhoneMockupBasic() {
  return <PhoneCarousel images={exampleImages} />;
}

Installation

npx shadcn@latest add @solaceui/phone-mockup-basic

Usage

import { PhoneMockupBasic } from "@/components/ui/phone-mockup-basic"
<PhoneMockupBasic />