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";
export default function DefaultDemo() {
const [open1, setOpen1] = useState(false);
return (
<div>
<Button onClick={() => setOpen1(true)} size="small">
Open Modal
</Button>
<Modal.Modal active={open1} onClickOutside={() => setOpen1(false)}>
<Modal.Body>
<Modal.Header>
<Modal.Title>Create Token</Modal.Title>
<Modal.Subtitle>
Enter a unique name for your token to differentiate it from other
tokens and then select the scope.
</Modal.Subtitle>
</Modal.Header>
<div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
Some content contained within the modal.
</div>
</Modal.Body>
<Modal.Actions>
<Modal.Action onClick={() => setOpen1(false)} type="secondary">
Cancel
</Modal.Action>
<Modal.Action onClick={() => setOpen1(false)}>Submit</Modal.Action>
</Modal.Actions>
</Modal.Modal>
</div>
);
}