Popup

A customizable, pixel-art styled popup component for displaying modal content.

Basic Usage

import React, { useState } from 'react';
import { Button, Popup } from 'pixel-retroui';

function App() {
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  const openPopup = () => setIsPopupOpen(true);
  const closePopup = () => setIsPopupOpen(false);

  return (
    <div>
      <Button onClick={openPopup}>Open Popup</Button>

      <Popup
        isOpen={isPopupOpen}
        onClose={closePopup}
      >
        Your popup content here
      </Popup>
    </div>
  );
}

Props

Prop	Type	Default	Description
isOpen	boolean	false	Controls whether the popup is visible
onClose	function	-	Function to call when closing the popup
bg	string	'#ffffff'	Background color of the popup content
baseBg	string	'#f0f0f0'	Background color of the popup container
textColor	string	'#000000'	Text color of the popup content
borderColor	string	'#000000'	Border color of the popup
className	string	''	Additional CSS classes to apply to the popup

Custom Popup

Customize your popup's appearance by selecting a preset theme or creating your own color scheme.

Theme:

<div>
  <Button onClick={openPopup}>Open Popup</Button>
  
  <Popup
    isOpen={isPopupOpen}
    onClose={closePopup}
    bg="#fefcd0"
    baseBg="#c381b5"
    textColor="black"
    borderColor="black"
  >
    Your popup content here
  </Popup>
  </div>

Additional Examples

With Custom Content and Classes

<div>
  <Button bg="gray" onClick={openPopup}>Open form</Button>
  <Popup
    bg="darkgray"
    baseBg="gray"
    isOpen={isPopupOpen}
    onClose={closePopup}
    className="text-center">
      <h1 className="text-3xl mb-4">Welcome!</h1>
      <p className="mb-4"> Please login to continue.</p>
      <form onSubmit={handleSubmit} className=" flex flex-col gap-4 items-center">
        <Input bg="#f2f2f2" placeholder="Username" />
        <Input bg="#f2f2f2" type="password" placeholder="Password" />
        <Button bg="gray" type="submit" className=" w-20">
          Login
        </Button>
      </form>
    </Popup>
</div>

Preview: