skills.rest
tchiphuong
tchiphuongCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

heroui-overlays

Create Hero UI overlay components for React frontends.

Updated Feb 27, 2025
Search Tags:#ui components#modal#dialog#drawer#overlays#popover#tooltip
One-click install
npx skills add https://github.com/tchiphuong/UniManage --skill heroui-overlays
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-overlays
Source: https://github.com/tchiphuong/UniManage/tree/main/.agent/skills/heroui-overlays
Command: npx skills add https://github.com/tchiphuong/UniManage --skill heroui-overlays

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides pre-built, accessible, and customizable overlay components like Modals, Dialogs, Popovers, Tooltips, and Drawers, streamlining UI development within the UniManage application.

Core Features & Use Cases

  • Modals & Dialogs: For user input, confirmations, and critical alerts.
  • Popovers & Tooltips: For contextual information and quick help.
  • Drawers: For side panels, filters, or navigation.
  • Use Case: Display a confirmation dialog before a user deletes an important record, or show a form in a modal for editing user details.

Quick Start

Use the heroui-overlays skill to display a confirmation dialog before deleting an item.

Frequently Asked Questions about heroui-overlays

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

FAQPage Schema
How do I create a confirmation dialog before deleting a record in React?▼

To create a confirmation dialog before deleting a record, use this Skill's AlertDialog component to prompt users for critical action confirmation within your React interface. It leverages Hero UI v3 for accessible implementation.

What React components are available for building side panel interfaces and drawers?▼

For building side panel interfaces and drawers, this Skill provides pre-built Drawer components to facilitate side navigation, filters, and panel views using Hero UI v3 within your UniManage frontend.

Does this Skill provide pre-built tooltips and popovers for displaying contextual information?▼

Yes, this Skill provides pre-built tooltips and popovers specifically designed for displaying contextual information and quick help within your React application without requiring custom implementation.

Can I use these overlay components to show a form in a modal for editing user details?▼

Yes, you can use the Modal component to display a form in a modal for editing user details, streamlining user input and data modification workflows directly within the UniManage application.

What is the best way to implement accessible overlay components in a React frontend?▼

The best way to implement accessible overlay components is using this Skill's suite of pre-built Modals, Dialogs, Popovers, and Tooltips, which leverage React and Hero UI v3 to ensure accessibility and customization.

Related Skills

Explore More Software Engineering Skills→
tchiphuongtchiphuong

heroui-controls

Create React interactive UI elements with Hero UI v3 components.

Community
Basic
emaginebremaginebr
1

react-modal

Create modal dialogs in React using the react-bootstrap Modal component.

Official
Basic
IgniteUIIgniteUI
47

igniteui-angular-components

Provide UI components for Angular applications with reactive forms support.

Official
Intermediate
shawnlivermoreshawnlivermore

cleen-ui-overlays

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

Community
Intermediate