About
Display popup content that requires attention or provides additional information.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Modal to your project and fits it to your theme.
Code
How Modal is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { useState } from "react";
import { Button } from "@/components/ui/button-1";
import { Modal } from "@/components/ui/modal";
const ArrowLeft = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z"
/>
</svg>
);
export default function StickyDemo() {
const [open2, setOpen2] = useState(false);
return (
<div>
<Button onClick={() => setOpen2(true)} size="small">
Open Modal
</Button>
<Modal.Modal active={open2} onClickOutside={() => setOpen2(false)} sticky>
<Modal.Body>
<Modal.Header>
<Modal.Title>Create Token</Modal.Title>
</Modal.Header>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
</Modal.Body>
<Modal.Actions>
<div className="flex gap-4">
<Modal.Action onClick={() => setOpen2(false)} type="secondary">
Cancel
</Modal.Action>
<Modal.Action
onClick={() => setOpen2(false)}
prefix={<ArrowLeft />}
type="secondary"
>
Previous
</Modal.Action>
</div>
<Modal.Action onClick={() => setOpen2(false)}>Submit</Modal.Action>
</Modal.Actions>
</Modal.Modal>
</div>
);
}
Dependencies
More by tigran tumasov
View all
Product Hunt Badge
1.8K
Book
162
Calendar
152
Theme Switcher
135
Snippet
124
Table
123
Toggle
89
Feedback
88
More in Buttons
View all
Button
14
Button
34
Texture Button
92
Button Save
46
Button
64
Button Group
3
App Store Button
454
Notification Button
103
