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.9K
Book
165
Calendar
154
Theme Switcher
136
Snippet
124
Table
123
Toggle
91
Feedback
90
More in Buttons
View all
Button
5
Texture Button
97
Button Group
Eclipse Button
39
Button
4
HeroUI Button Group
Base Button
4
App Store Button
458
