Ruru UI

Installation

npx ruru-ui-cli@latest add modal

Here is an example of how to use the Modal component.

The Modal component can be used with a custom trigger button.

The Modal component can be used with a single button.

The Modal component can be used with disabled actions.

The Modal component can be used with a custom width.

The component that you see on preview

Here's how the props table would look for the Modal component, formatted in the same style:

Name	Type	Default	Description
children	ReactNode	`undefined`	The children of the Modal component.
onClickOutside	() => void	`undefined`	The function to call when the user clicks outside the modal.

Name	Type	Default	Description
fullWidth	boolean	`false`	Determines if the action button should take the full width.
onClick	() => void \| Promise<void>	`undefined`	The function to call when the user clicks the action.

Name	Type	Default	Description
children	ReactNode	`undefined`	The children of the Modal component.
onClick	() => void	`undefined`	The function to call when the user clicks the trigger.
asChild	boolean	`false`	Render as a child component.

Name	Type	Default	Description
className	string	`""`	Additional class names for the container.
children	ReactNode	`undefined`	The children of the component.

Name	Type	Default	Description
className	string	`""`	Additional class names for the paragraph element.
children	ReactNode	`undefined`	The children of the paragraph element.