The ScreenWrapper acts as the core structural foundation of the library, ensuring a consistent layout across all application views. It abstractly manages essential interface constraints, such as safe area insets, keyboard-avoiding behavior, and standardized padding, without adding unnecessary complexity to the component tree. By centralizing these low-level layout requirements, the ScreenWrapper allows developers to focus entirely on building functional features while maintaining a stable and responsive environment for the user interface.

Examples:

This section showcases a collection of common UI components. These components are designed to enhance the user experience and provide a consistent and intuitive interface.

Dialogs and modals are interactive elements that display important information or prompt user input in web applications. They are used to draw attention and require explicit user interaction to dismiss or close. Dialogs are triggered by "Dialog" functions, while modals are shown using the "useModal" hook and also have pre-defined "Modal" containers.

Simple Card

Card with Card.Header

Card.Header with rightSection

Card with Card.Divider

And custom gap (xl)