Components
Loading preview...
Display popup content that requires attention or provides additional information.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/modalimport { 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>
);
}