Components

Overlay

Elevate Your UX with Layered Experiences.

The Overlay component empowers you to create dynamic, layered UI elements that sit above your main content, such as modals, popups, side menus, and more. Whether it’s a newsletter form, mobile menu, product preview, or a full-screen announcement, overlays help deliver focused content without disrupting the user’s current page.

Fully themeable, positionable, and responsive, this component combines flexibility with ease of use, giving you the control to design interactive elements that truly stand out.

Designed for Interaction

  1. Create mobile menus, forms, announcements.
    Easily trigger overlays via matching button ID.

  2. Sidebars, carts, mobile menus, or drawers.
    Control entry/exit with fade or slide effects.

  3. Attention-Grabbing Layouts.
    Centralize or anchor overlays.

Flexible Display & Control

  1. Precise Positioning.
    Top, bottom, left, right, or center.

  2. Scroll Lock Option.
    Prevent background scroll when active.

  3. Theming & Transitions.
    Apply fade or slide transitions.

Use Cases

Overlays are essential for layered UI design and modern interactivity. They allow you to display contextual content on demand, whether for user interaction, marketing goals, or navigational support.

Use cases include:

  • Modals for login, newsletter signup, or confirmations

  • Navigation Drawers for mobile menus or dashboards

  • Quick Views for product previews or expanded images

  • Announcements or alerts that require user focus

  • Interactive Widgets like calendars or schedulers

  • Overlays with forms, dynamic filters, or onboarding steps

Each Overlay is fully manageable via content, e.g., in your layouts, requiring no code but offering complete flexibility.

Configuration Options & Features

The Overlay component gives you unmatched flexibility for layered interface design. Create smooth, accessible, and branded overlays that support interaction and focus, eliminating the need for development intervention.

Triggerable, themeable, adaptable. Everything your layered UI needs, content-first, no code.

Id

The id acts as the trigger identifier. Buttons or links that reference this ID will toggle the visibility of the overlay.

Example:

  • Button with the action on the following id { id: 'overlay-newsletter' } toggles the overlay with id="overlay-newsletter".

This ensures precise control over when overlays appear or disappear.

Content

This is a nestable components area for adding any components you like, such as images, headings, forms, and containers. It defines what gets rendered inside the overlay.

Use it to build:

  • Navigation Menus

  • Messages

  • Images

  • Structured content like lists or icons

Content Position

Defines where the overlay content appears on screen:

  • Top

  • Bottom

  • Left

  • Right

  • Centered (default)

Choose based on the purpose: e.g., mobile nav = left, banner = top

Allow Scroll

A toggle that determines whether the background page scrolls while the overlay is visible.

  • Enabled: Background scroll remains possible

  • Disabled: Page is locked while overlay is active (best for modals)

Toggle Effect

Choose between two built-in transition animations enhancing visual appeal and UX clarity:

  • Fade: Smooth opacity transition

  • Slide: Directional sliding animation based on entry/exit

Component Theme

Apply a theme to the outer shell of the overlay, controlling background color, padding, z-index, etc.

Content Theme

Theme the inner content of the overlay separately, ideal for custom styling based on use cases (e.g., a dark overlay with a light form).