# Overlastic

> Comprehensive skills for working with Overlastic

- Skill: `hairyf-skills/overlastic` (Agent Skill, multi-file: 14 files)
- Install (CLI): `npx skillmds@latest add hairyf-skills/overlastic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hairyf-skills/overlastic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: hairyf (https://skillmd.com/u/hairyf-skills)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/hairyf-skills/overlastic

---


> Based on Overlastic v0.8.7. A promise-based modal/dialog/popup library supporting React, Vue, and Svelte.

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Constructor | Core method for creating overlay constructors | [core-constructor](references/core-constructor.md) |
| Deferred | Promise variation with external control methods | [core-deferred](references/core-deferred.md) |
| Global Functions | Utilities for mounting elements and name management | [core-defines](references/core-defines.md) |
| useDisclosure | Hook for managing overlay lifecycle and state | [core-disclosure](references/core-disclosure.md) |

## Framework References

| Topic | Description | Reference |
|-------|-------------|-----------|
| React Integration | Using Overlastic with React components | [framework-react](references/framework-react.md) |
| Vue Integration | Using Overlastic with Vue 3 components | [framework-vue](references/framework-vue.md) |
| Svelte Integration | Using Overlastic with Svelte components | [framework-svelte](references/framework-svelte.md) |

## Advanced References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Provider Pattern | Using OverlaysProvider for context inheritance | [advanced-provider](references/advanced-provider.md) |
| Custom Components | Integrating existing component libraries | [advanced-customization](references/advanced-customization.md) |
| External Control | Controlling overlay lifecycle from outside | [advanced-external-control](references/advanced-external-control.md) |
| Declarative Usage | Using overlays in templates/JSX | [advanced-declarative](references/advanced-declarative.md) |

## Key Concepts

- **Constructor**: Receives component, props, and options to mount overlays
- **Deferred**: Promise-like object with `confirm` and `cancel` methods for external control
- **Mount Options**: Configuration for container, ID, index, and deferred instance
- **Lifecycle**: Components are destroyed after `duration` ends when deferred resolves/rejects
- **Imperative Usage**: `defineOverlay` and `renderOverlay` for callback-based invocation
- **Declarative Usage**: Components can be used in templates/JSX with props
- **Provider Pattern**: `OverlaysProvider` for context inheritance
- **Dual Mode Support**: Components work in both imperative and declarative modes