Component

Modal

Name: Forge
Rating: 5 (1 reviews)
Author: Webba Creative

Modal dialogs for important content that requires user attention.

tsx

import { Modal } from 'wss3-forge'

Usage

•

Use modals for important actions that require user confirmation

•

Always provide a way to close the modal (close button, backdrop click)

•

Keep modal content focused and concise

•

Use Modal.Footer for action buttons

•

Use Modal.Section for grouped content

Examples

Default Modal with Form

Edit Profile

Update your information

Name

tsx

1<Modal
2  open={isOpen}
3  onClose={() => setIsOpen(false)}
4  title="Edit Profile"
5  subtitle="Update your information"
6>
7  <VStack gap="md">
8    <Input label="Name" />
9    <Input label="Email" type="email" />
10  </VStack>
11  <Modal.Footer>
12    <Button variant="secondary">Cancel</Button>
13    <Button>Save Changes</Button>
14  </Modal.Footer>
15</Modal>

Dropdown

Popover

Last updated: December 2025

Modal

Usage

Examples

Default Modal with Form

Edit Profile

Cookies