Mockup Component

ℹ️

Mockup is a versatile React component designed to showcase content within various mockup styles, such as a browser window, code editor, phone frame, or a simple window. It supports customization of the mockup type, HTTPS URL, and additional styling through className. This component is inspired by the DaisyUI (opens in a new tab) framework's design for mockups.

Example Preview

Mockup Example

Usage

import { Mockup } from "@/lib/utils";
 
// Render Mockup component with default or customized props
const MyMockupComponent = () => {
  return (
    <Mockup type="browser" https="https://example.com">
      <div className="p-5">
        <h1 className="text-4xl font-bold">Hello World</h1>
        <p className="text-base-content/70">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
          voluptatibus. Quasi, voluptas. Quisquam, quae voluptatum. Quisquam,
          quae voluptatum.
        </p>
      </div>
    </Mockup>
  );
};
 
export default MyMockupComponent;

Props

Prop name	Type	Default value	Required	Description
`type`	`'browser'`, `'code'`, `'phone'`, `'window'`	`'code'`	No	Type of mockup to display.
`https`	`string`	`'https://example.com'`	No	HTTPS URL for browser mockup.
`children`	`ReactNode`	-	Yes	Content to display within the mockup.
`className`	`string`	-	No	Additional CSS class names for styling.

ℹ️

Note: The Mockup component accepts additional HTML attributes (HTMLAttributes<HTMLDivElement>).

Example

Here is an example of using the Mockup component with default or customized props:

<Mockup type="window">
  <div className="p-5">
    <h1 className="text-4xl font-bold">Hello World</h1>
    <p className="text-base-content/70">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
      voluptatibus. Quasi, voluptas. Quisquam, quae voluptatum. Quisquam, quae
      voluptatum.
    </p>
  </div>
</Mockup>

This will render a mockup window with the provided content. You can customize the type, HTTPS URL, and styling as needed.

ℹ️

Note: The Mockup component is a React component designed to create realistic and visually appealing mockups for showcasing your projects or designs. With customizable options, you can easily integrate this component to enhance your project presentations. This component is inspired by the DaisyUI (opens in a new tab) framework's design for mockups. Check it out for more awesome components.

Loading Pagination