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

PropTypeDefaultDescription
isOpenbooleanfalseControls whether the popup is visible
onClosefunction-Function to call when closing the popup
bgstring'#ffffff'Background color of the popup content
baseBgstring'#f0f0f0'Background color of the popup container
textColorstring'#000000'Text color of the popup content
borderColorstring'#000000'Border color of the popup
classNamestring''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: