Modals in AueraUI support various sizes to fit different use cases.

Automatically adjusts its width based on content.

A small modal ideal for simple alerts or confirmation dialogs.

A standard-size modal suitable for most general purposes.

A larger modal for displaying more content, such as forms or data.

An extra-large modal for complex interfaces or extensive content.

Covers 83% of the screen width, offering an immersive experience.

Expands to cover the entire screen for maximum focus.

Modals can be positioned at different locations on the screen.

Appears at the top of the screen, useful for notifications.

Centers the modal on the screen for standard interactions.

Appears at the bottom of the screen, often used for mobile-friendly modals.

Modals support different transition effects for smooth animations.

A smooth 'walk-in' effect where the modal gradually appears.

The modal drops in from above, adding a dynamic effect.

Slides in from the side, great for sidebar modals.

The radius property defines the border-radius of modals, allowing for smooth and rounded corners. Different sizes provide varying levels of curvature to enhance the visual appeal of modals.

The medium radius applies a subtle rounding to modal corners, providing a slight softness without excessive curvature. Ideal for maintaining a balanced and modern look.

The large radius increases the curvature of modal corners, creating a more pronounced rounded effect. This is useful for a softer, more approachable UI design.

Extra-large radius gives modals a highly rounded appearance, making them feel more fluid and organic. Suitable for designs emphasizing smoothness and elegance.

The 2x large radius applies an even more pronounced curvature, giving modals a pill-like appearance. This style works well in designs that favor a softer, friendly aesthetic.

The 3x large radius provides the most extreme rounding, making modals appear almost fully rounded at the edges. This effect is ideal for highly stylized, modern, and playful UI elements.

This section covers the structure of modal overlays and general containers.

The Modal Container is responsible for managing and rendering all modal overlays within the application. It ensures that modals are properly layered, positioned, and controlled.

The Container serves as the main wrapper for all overlays in the application, including modals and drawers This ensures that they are properly managed within the broader UI structure.