cleen-ui-overlays

Build overlay UI elements such as modals, drawers, and tooltips with @cleen/ui.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-overlays
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cleen-ui-overlays
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-overlays
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-overlays

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents developers from reimplementing common overlay UI patterns like modals, drawers, and tooltips from scratch, ensuring consistency and leveraging the robust @cleen/ui library.

Core Features & Use Cases

  • Component Selection: Guides users to pick the correct overlay component (Modal, Drawer, Menu, Tooltip, etc.) for their specific need.
  • State Management: Demonstrates the use of useDisclosure for managing overlay visibility.
  • Use Case: When a user asks to "add a confirmation dialog to delete an item," this skill provides the exact Modal component code with proper state management and footer actions.

Quick Start

Use the cleen-ui-overlays skill to implement a modal for user confirmation.

Frequently Asked Questions about cleen-ui-overlays

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React overlays like modals and drawers without starting from scratch?

To build React overlays like modals and drawers, use the @cleen/ui framework which provides pre-built components such as Modal, Drawer, and Tooltip. This ensures consistent UI patterns without reimplementing common overlay logic from scratch.

What is the best way to manage visibility state for a confirmation dialog in React?

Managing visibility state for a confirmation dialog is handled by the `useDisclosure` hook from @cleen/ui. This hook manages open and close logic for modals, drawers, and popovers, allowing developers to trigger overlays reliably without manual state wiring.

Does the @cleen/ui library include components for tooltips and dropdown menus?

Yes, the @cleen/ui library includes dedicated components for tooltips and dropdown menus. It provides Tooltip, Dropdown, and Menu elements alongside Modal, Drawer, Popover, and Collapsible to cover various interactive overlay requirements.

How do I add a filter drawer to my React application?

To add a filter drawer to a React application, use the `FilterDrawer` component from @cleen/ui. Combine it with the `useDisclosure` hook to manage the drawer's open and closed states, providing a consistent UI for filtering data.

Can I trigger toast notifications using @cleen/ui overlay components?

You can trigger toast notifications using the `showNotification` function within the @cleen/ui framework. This function operates alongside other overlay components like modals and tooltips to deliver user feedback without requiring custom notification logic.