We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Modal

Modals are overlay UI elements that focus user attention on critical information or actions. They provide a controlled interaction point, ensuring users engage with important content before returning to the main interface.

Preview

Code

Enter your details

Password

Optional properties

Use the properties below to style the modal and copy the code to your project. Try clicking on them.

Property	Type	Description
`shape`	`flat` \| `pill` \| `curve`	Defines the modal's shape. `pill` is a fully rounded modal, `curve` has rounded corners, and `flat` is a classic square-cornered modal. Default is `flat`.
`size`	`compact` \| `tight` \| `wide` \| `base` \| `full`	Controls button sizing. `compact` has less padding, `tight` has even smaller padding and fonts (ideal for tab buttons), `wide` spans the full width of the parent container, and `base` follows the standard theme. `full` is the maximum size. Default is `base`.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the modal component.

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape and Size

Property	Description
`shape`	Defines the shape of the modal. Can be `flat`, `curve`, or `pill`.
`size`	Defined the size of the button. Can be `compact` \| `wide` \| `tight` \| `base` \| `full`.

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the modal.
`borderColor`	Border color of the modal.
`dismissColor`	Color of the dismiss icon
`dismissHoverColor`	Color of the dismiss icon when hovered

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the modal's corners.
`paddingLeft`	Left padding of the modal.
`paddingRight`	Right padding of the modal.
`paddingTop`	Top padding of the modal.
`paddingBottom`	Bottom padding of the modal.
`padding`	Padding around the modal's content.
`maxWidth`	Max width of the modal.
`maxHeight`	Max height of the modal.
`dismissFontSize`	Font size of the modal's dismiss icon.
`dismissFontWeight`	Font weight of the modal's dismiss icon.
`dismissLineHeight`	Line height of the modal's dismiss icon.
`dismissLetterSpacing`	Letter spacing of the modal's dismiss icon.