pi-design-deck 0.2.0 → 0.3.0

package/skills/design-deck/references/component-gallery/components/overlays.md

@@ -0,0 +1,208 @@
+# Overlays
+
+Components that appear above the main content layer.
+
+---
+
+## Drawer
+
+**Also known as:** Tray · Flyout · Sheet
+
+[Browse all 38 examples →](https://component.gallery/components/drawer/)
+
+### Design System Implementations
+
+- [Ant Design](https://ant.design/components/drawer) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/sv2tKuKixVFBrk40OuIXfqzO_5zB1GRIrinxkq5_4BQ_Z1p5cMf.webp)
+- [Atlassian Design System](https://atlassian.design/components/drawer/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/MPfNjrf03eJt5JpKQ8y5Fin6mayxbYo71XLS1sz4VsE_ZPmeq1.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/drawer/web-QAxL5e0N) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/Ir_eVQnNETM9F-wZWSGNWa5B2pcbH8jiaoXO-sKQPFg_1c3M64.webp)
+- [Base Web](https://baseweb.design/components/drawer/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/iLEU0H0piCiS4jzAMV1YVVQKzyQ7XY89AQOl_8vR-mg_ZaTPez.webp)
+- [Blueprint](https://blueprintjs.com/docs/#core/components/drawer) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/oDdrstDCQ_eaR0_w1Mi6o4gtzg35VE6D-fbXdFQBj3o_ZeTCpT.webp)
+- [BottomSheet](https://cauldron.dequelabs.com/components/BottomSheet) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/daBiD33fH_9bVeLhd17Zrp3o0a8dP0wBHW1J3XHGBD4_1LNlvy.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Drawer) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/1I1enieZAac5OOXyC_WTNj-J_yy-ySRkXH5mdjY4Pjc_8bCED.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/drawer) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/IhtJlvnaCziJ5Lt05P-UssnQunBw8G9d8e2XfW8yUQs_1GRwYq.webp)
+- [Coral](https://design.talend.com/?path=/docs/navigation-floatingdrawer--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/TZHDUIzxdg0YaJxyDo3cGDgh-kdldO2UHVysu0qMlto_1ul2CI.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/drawer/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/k2rH1CmMMgjtPTL19oXNLb7dhxwauzZUyeceRwYbfg0_ZSl1dO.webp)
+- [Bottom sheet](https://playbook.ebay.com/design-system/components/bottom-sheet) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/DgjmUcLL6M4f0WUM6wGed2ERzMss5R_JoGCDo8gaI9c_Z1Arzh2.webp)
+- [Panel](https://playbook.ebay.com/design-system/components/panel) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/4nPeM6P5mv7JJwNwYsuDHx-aCzVODWP-CK403gHwn44_2umzLk.webp)
+- [Flowbite](https://flowbite.com/docs/components/drawer/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/bvI7Fa4GxavFfKlNFKBLWqsI8G3VZshL2zk9NLe7XnY_Z1oEEhm.webp)
+- [Geist Design System](https://vercel.com/geist/drawer) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/5qneRaHdfvrfZbSsRxMDUfZ1NL6nvdgmN9QOYY-sAYw_QvxTK.webp)
+- [Flyout](https://helios.hashicorp.design/components/flyout) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/5hR0_MqLVSX-RmsnM-MZcBBb2R6KntK00-FMLE5UFX8_2vSVvF.webp)
+- [HeroUI](https://www.heroui.com/docs/components/drawer) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/qJBogQBK5x9SwAdSdJqA8DcXf6P4a89q-6Qbes7eDcg_Z1Wld6U.webp)
+- [Instructure-UI](https://instructure.design/#DrawerLayout) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/1ZMf2so8EdJJLwmark3ptjUiNGUb0AxrSGgROddM3HQ_10xeAi.webp)
+- [Side sheet](https://m3.material.io/components/side-sheets/guidelines) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/6wfHCGz-snCDeeRzMKqnL_BmxhJzWyiAjA3_FWLWjXU_ZxvGBH.webp)
+- [Side Drawer](https://design.ns.nl/4a05a30ad/p/17e19a-side-drawer) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/2T4JAkqNIAidJ_MV-Vduf6IRd_Amx-q9GvbvEh8-iUQ_nMBoO.webp)
+- [NewsKit](https://www.newskit.co.uk/components/drawer/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/sl5i4NIIEl5U9LSs-8-V7ajd4YmUYTiMukkskH22bRg_1Ra7gT.webp)
+- [Nord Design System](https://nordhealth.design/components/drawer/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/lQWfAzsB-Oy72zvtEMlWJMzEQxur4UEJuJtqQatUYGc_ZGIdiI.webp)
+- [Orbit](https://orbit.kiwi/components/drawer/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/GeK_wL94SeqAFve3Nr1N-3efd_mh6iX0H9wMr23Hh-Y_1zQ0JP.webp)
+- [Pajamas](https://design.gitlab.com/components/drawer) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/wFEl9avpWBjXwc2dZtQmy5XMMNe957N2Az5shhBjGZM_2jWk8h.webp)
+- [PatternFly](https://www.patternfly.org/components/drawer) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/Ea4662tzpsMI4Ofg3fq9EAn5PrKPUQsps7EKy4hliSU_1V8rgg.webp)
+- [Notification drawer](https://www.patternfly.org/components/notification-drawer) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/wR0u2p6jZxGHqo5XoYooK8WxL4nn23WX1EP_UyDHWQM_JpovL.webp)
+- [Flyout](https://designsystem.porsche.com/v3/components/flyout/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/iC_-cSYa87aGMO8A53ng16WZiDV4wcCXklZ-n4qmcNk_Z2rhmNK.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/drawer/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/lw0R_LwYJ4Le8XyLDThmiYabaPgSeecZ77hjBnXtxWM_lCIkK.webp)
+- [Seeds](https://sproutsocial.com/seeds/components/drawer) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/GY9xUZxxJSh0pi7ipk7vhvr3l3bTkAk1FQqAbUrXSV4_1dLwBp.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/drawer) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/UiI7vUaiHhSgiU5mdfqDUmNpmxKdkk87-EtnF6aPwqY_Z2nS0Ip.webp)
+- [Sheet](https://ui.shadcn.com/docs/components/sheet) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/YiZaU3oU4N_PLagY7OSRNolB_3Oj-eNvYhT4tKJ_FvI_b57kt.webp)
+- [Shoelace](https://shoelace.style/components/drawer) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/jcdqUmAW0EGyKPU-jS6ZCyzmkZhvN-b6AQoCO9WeICM_Z26oX7Y.webp)
+- [Tray](https://spectrum.adobe.com/page/tray/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/LmjBhgsOwbEaGaP0a6l70Ij-5kOj5mGmcHkDhrLlf88_1r3AiU.webp)
+- [Bottom Sheet](https://www.subzero.axis.bank.in/components/bottom-sheet) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/hzLcyKEBHwTuPLQnRCgRJOzGrNpIWy46YnTCXtFnXFA_ZXCPFU.webp)
+- [Navigation drawer](https://design.visa.com/components/navigation-drawer/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Wwfed_zWkgjjQ-uqdOAQQnK6Q_PT8m8uYunQGHWeifo_1LWknA.webp)
+- [Panel](https://design.visa.com/components/panel/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/_4RfTGUKfbnVTJEf17iYtYYrSJzG-lagMmThL6fBAR4_DGQK7.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/dialogs/drawer) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/b6gy_QQMcTpA3mI7YAiSOwRuzdoNJnfGrChp2orVwBk_ZNw1yw.webp)
+- [Web Awesome](https://webawesome.com/docs/components/drawer/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/QweoT5QyRYWmtP7lalXaGCZ25VfZK4lE_LvVgBexpJ0_12p16K.webp)
+- [Side panel](https://canvas.workday.com/components/containers/side-panel) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/XkydT6B5fWUB_lnz9kqStADs4Kqs0clER3Ajd8aOpi0_ZHpDDT.webp)
+
+---
+
+## Modal
+
+**Also known as:** Dialog · Popup · Modal window
+
+[Browse all 82 examples →](https://component.gallery/components/modal/)
+
+### Design System Implementations
+
+- [Ant Design](https://ant.design/components/modal) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/R7CGv1Ia1omh23cx0neG0XmMy3MDS7VDRzgsYO4tUfU_BMkpu.webp)
+- [Dialog](https://ariakit.org/components/dialog) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/uyx4sZX4010-SnK4QHA9wZwzILcAY6rLnp9m6Re8SIw_n9vK2.webp)
+- [Modal dialog](https://atlassian.design/components/modal-dialog/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/zgXdDa4vTPRBO1J2nopORREl2tTr4Ty7R8m3hlqUSdM_ZkX2mR.webp)
+- [Dialog](https://www.skyscanner.design/latest/components/dialog/android-UEZUoZUT) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/S4MSB1_GkT53vD-zfTGGRlkzk3o-XJkPYed4rIWyg14_ZzSl3V.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/modal/web-T4Oa73RC) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/0-SwT_QOchemfipQTRZRWXkPvbFjeOl0M4_Li2uqni8_ZHWGqz.webp)
+- [Base Web](https://baseweb.design/components/modal/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/gGdctOYJ8L4sR4CxEXmnMQFngVzljE2_VLnZO6BJISo_Z1yBJ5V.webp)
+- [Alert](https://blueprintjs.com/docs/#core/components/alert) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/JKpv7NXOMBSiTgGxrc0fWbsqWp1V_i3ai97tLuz0a5w_Z2wSI2.webp)
+- [Dialog](https://blueprintjs.com/docs/#core/components/dialog) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/VlzAJr7z80Z0leQxzFSwKvn9ZPYjnqk4r2m7jLlsQiE_1atphp.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-modal) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/wO-gxbFMzsJ8RBfTrMgWR_-WB2A8NJTI31eJRB5iygU_2bCHm3.webp)
+- [Bootstrap](https://getbootstrap.com/docs/4.3/components/modal/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/aAJDCZkCR3DtmVmihJQN3CUzMtTCqoc0by5_R0S593w_Z24GFAw.webp)
+- [Bulma](https://bulma.io/documentation/components/modal/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/Vc_2y-FApntiFdKcUzzVO_JVPdz_CR6wWsAoOqxI43k_ZTnkiC.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/modal/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/24WNBxmumFZo8ClapqJ1oT044rIwPe9ZcYROyV4_kag_ieaj.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Modal) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/jU9vOxoL3syoKhQXF1zl3joSjTuVdDpAPuP64K79KdM_1vU21Y.webp)
+- [Cedar](https://cedar.rei.com/components/modal) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/P68YjlrfC58Vk1T1vui-J-wNi9Xch8f3Z8ACaMUxesM_Z1WbV4w.webp)
+- [Dialog](https://chakra-ui.com/docs/components/dialog) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/bV-w8LdZGwyxE9XBfGcqJso13TphenwR9jrMtbibYmw_Z5gGKx.webp)
+- [Clarity Design System](https://clarity.design/documentation/modal) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/gMyDsHq7LxQVa98rWkaSCHsul1xcACdvcQ_BPPOoNSw_1ObreR.webp)
+- [Coral](https://design.talend.com/?path=/docs/layout-modal--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/fSNKjBAdWJAUIq4-YUpQGy3Q2PsOk7GHxbnQIexkU0U_Z2GYsy.webp)
+- [Crayons](https://crayons.freshworks.com/components/core/modal/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/8KE3hE_Huh38VeUTNllc8ocmxgj6tQ3vfNGifbWGo8k_BRo6G.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/9596dd-modal/b/08a8f6) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/XZ5lCz2VO6ns4As81VVPPEh8oUbEOOl6_rpbi9A2zSM_249eoW.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/modal/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/IC3gp62crkyRFM5o4pudh5A7OKpwfgrZYQbm2nslA70_ZXNCB0.webp)
+- [Alert Dialog](https://ebay.gitbook.io/mindpatterns/messaging/alert-dialog) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source
+- [Confirm Dialog](https://ebay.gitbook.io/mindpatterns/messaging/confirm-dialog) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/RPt8sTFQyOnfWDRyTRlyZGGyRpr5I9WkZ7SDFuytdEw_2bEsM9.webp)
+- [Dialog](https://ebay.gitbook.io/mindpatterns/disclosure/dialog) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/W6B6crnWA9TZrCr0tDJ8fnYyRqR87CoJj1HEMCeg6UI_2r4zBi.webp)
+- [Input Dialog](https://ebay.gitbook.io/mindpatterns/disclosure/prompt-dialog) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/waxVmaNruZ8vIuf6sEaXuSscPxZyhgN7BiKKx_lOiWk_Z1cDB9O.webp)
+- [Dialog](https://playbook.ebay.com/design-system/components/dialog) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/wL5tPbSaUOzbtCUL0U9ui6VW8IYltw7JNKvIRvCfc8A_Z1lYXe6.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/containers/modal/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/W2k3dBCrOHuJ_EWDX2-ArhRo-JpcVuxKqXMQwjyaTCY_262hK9.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/25ad63-modal) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/v0SYc70LzSinrqg-EmC5hu-Po2QBFMZKmOePdNeTOCI_gpTer.webp)
+- [Dialog](https://evergreen.segment.com/components/dialog) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/qkKYgdhQjHwR1x9BGJmGvHWenCom6Nqk5b4MFAU6e38_Z2jA0OA.webp)
+- [Flowbite](https://flowbite.com/docs/components/modal/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/dh9w1sKf4Q0xbhcRkMz69TMx2GqpNCgwCB48CVqaPmo_Z1fYON0.webp)
+- [Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/xgwQYOEihYUQJFVK0XlPbVVNltRIrsBLlX8vzH0LAN4_1l2f8s.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/modal) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/-txK9uNYrffhdUDahXI-SbRiIP1VyiPWyPE82M8WZfw_Z28QGmY.webp)
+- [Forma 36](https://f36.contentful.com/components/modal) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/5AacePWN0encYhrnkqza8lsgprCSYt9t9PVDoxRfGvo_HTHNS.webp)
+- [Geist Design System](https://vercel.com/geist/modal) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/qomsIsWCxe8_AQzFtTUXVzCKImSrCDRSWhntV6q-l5Y_Z1akBXd.webp)
+- [Dialog](https://genericcomponents.netlify.app/generic-dialog/demo/index.html) — generic-components · Web Components — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/YaCSKen5dGJVWcMImxaHV8oUfjTAH13RwASRFhwk0dw_2n8FaG.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/modal) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/sfcNnRv9TixyZubCn4lBKh8XHGenfT4e5nicyWv76s0_ZAFGMd.webp)
+- [ModalAlert](https://gestalt.pinterest.systems/web/modalalert) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/1UayCAyQxnA33e7sKV1Q4cSMIZ824uJyYI_YMczhXrU_1l4Fl8.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/modal/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/obETYavGfb0u3oYmNN9U7sMVr5r0_fkq6M0A0CX2lLs_2tAN9D.webp)
+- [Dialog](https://headlessui.com/react/dialog) — Headless UI · React, Vue — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/AjNo7KZsfMvtnnFHLjx9T7zzZsVAC-7uPdrdGuAmAKI_Z19lfUt.webp)
+- [Helios](https://helios.hashicorp.design/components/modal) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/lDvqrxFc3uvPqnEqcmSa7mtBtAkvuwW7M3jmXUvd4pI_1zMUsc.webp)
+- [Dialog](https://hds.hel.fi/components/dialog) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Lyr5bVnIqLXmMq6uAEbEPt-Z1vSqPMHY-xHMEGACGRI_XagFx.webp)
+- [HeroUI](https://www.heroui.com/docs/components/modal) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/CPUkHnciuGALNQDCjZy-Vmi1hSxvDid919wDRYwipG4_TFP6x.webp)
+- [Instructure-UI](https://instructure.design/#Modal) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/e8Nv62Tfy4jCaRLklQxW77WuTRz48uE2MkwS6tita8g_Z1hEVaf.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/modals/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/6QZQYWGOFPvoErsYcvJ7lzx4EszRAdSaYil2nErUl6M_Z1VKzja.webp)
+- [Prompt](https://www.lightningdesignsystem.com/components/prompt/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/cY0l1-MsMwkcNINLXu8cEzYGoMygQfqND2exg-Lo7Zk_Z1jU9XH.webp)
+- [Dialog](https://m3.material.io/components/dialogs/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/MZiPRJOM2aznX7ZsyWsc1ws3ZjM8o7T6TlgOltRCPoI_Z2idaIw.webp)
+- [Dialog](https://momentum.design/components/dialog) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/gjhGRB7muoONvWC5Ixv30RitZNWMPxCJ8iy2yFs4k0A_2wrDqp.webp)
+- [Dialog](https://design.morningstar.com/systems/product/components/dialog) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/hAbQLWyHrvnkAJhhuwuf-GIAOtu6iKaH-cOCqdkhyYc_2mWHsX.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/modal) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/W3-j2gYuzaXZ-dmnH8sWU7Pot58VRS5fvIQGJPXw0CM_Z1kwjv8.webp)
+- [Notification](https://design.morningstar.com/systems/product/components/notification) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/WSbrOoxUNmv-MX0OcPj9ifUF2EQAXJBAy9Gzumw47a8_Z2aP4hj.webp)
+- [Mozilla Protocol](https://protocol.mozilla.org/components/detail/modal.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/O5sZKOJnpOjKZs0Qy4FL3hAocUH_6zaC8EVYMYShKk4_6wcS7.webp)
+- [Dialog](https://design.ns.nl/4a05a30ad/p/62bb46-dialog) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/Tv3H2pFu5cQ9d-jTBCJSux9K9njveA31xcQVvy--JJ4_Z26jK82.webp)
+- [NewsKit](https://www.newskit.co.uk/components/modal/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/chrG9aqaMbHgIcLIuRb3i2bWALcQg_tzWIWSreMC-w0_2my585.webp)
+- [Nord Design System](https://nordhealth.design/components/modal/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/sU-SfrVlnmC1KBCxatHWROMXx8b1_XFs6OEkmA-zNo4_2p3F3t.webp)
+- [Timeout modal](https://ons-design-system.netlify.app/components/timeout-modal/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/YCxm-yqgODSjcep_P1plXLcOukBrfQzxu10dmok4iio_s6B4x.webp)
+- [Dialog](https://orbit.kiwi/components/dialog/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/0SwxYTxt1TiY3bxluS5CYl-Q7WQXcuYLplx7gHCGbsc_Z7xvJf.webp)
+- [Orbit](https://orbit.kiwi/components/modal/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/GKBbdJZumKehtoqIhzC05XkHIqHCpBbVVrRkCZfVk8A_1Qg9xO.webp)
+- [Pajamas](https://design.gitlab.com/components/modal) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/gX7bQStTGSlXW3Xa0w7JJT8wcwjPkq1UIkouyfi_ACE_Z1XKQQw.webp)
+- [Paste](https://paste.twilio.design/components/modal) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/wbw7k_UoUiVx8nNqubYXMOwi2PIQ2jZxbUIQY6qIX9w_ZQWYRe.webp)
+- [About modal](https://www.patternfly.org/components/about-modal) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/YuAcrbHZ3Wtfu5_t3hUo6Vr99iarfNd-jZZl_A8xPac_yi2dR.webp)
+- [PatternFly](https://www.patternfly.org/components/modal) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/qZDGEw0Kxwc-RiNXtC7IJRqGHURriu7mEUfujIbT8jU_Z1RtANe.webp)
+- [Pharos](https://pharos.jstor.org/components/modal) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/qooP63JraAIAZIh2PZNgprvkyy6Ntl32ApbY8jea9qc_Z2ubJqX.webp)
+- [Polaris](https://polaris.shopify.com/components/overlays/modal) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/jxsCNYuiltddUe58OIMviAe8DcnnDSrq-PPKQzXuTTo_Z1dXYth.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/modal/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/RuRnHAIzJBS4GR_UDDFFVeRLnj9hwILjE-WwhakDPW4_1ca2G2.webp)
+- [Dialog](https://primer.style/design/components/dialog) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/zRHF982FIQhvxeTycyNbPcZswTZeZckuR6K5RXGrp0o_Vrxuf.webp)
+- [Dialog](https://quasar.dev/vue-components/dialog) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/ZiePerS64h4yEOCetXp56QKw58S7naSpiwIsD8eKuA8_Z2agYjT.webp)
+- [Alert Dialog](https://radix-ui.com/primitives/docs/components/alert-dialog) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/oiUxDMlZ2-d3Ee-6XdkMTDOmdNu2HBlBWasGMPiENlA_ZEaHh6.webp)
+- [Dialog](https://radix-ui.com/primitives/docs/components/dialog) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/Q1Kv7J3kyKFJOp8-LkQ-Cj6TQzxVca1jg1xekSFuE0g_1BACPD.webp)
+- [Alert Dialog](https://reach.tech/alert-dialog) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/6m0RO4gMcbttBDaZsIrw2VK-ebdRbHZkWt6qwMo1PGg_1CUtYk.webp)
+- [Dialog (Modal)](https://reach.tech/dialog) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/i0_0QByGHOxDFra_mctKFFTiJPiogwEp06XAQDIBn0E_2cHi6i.webp)
+- [Dialog](https://ux.redhat.com/elements/dialog/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/3cWN9TJd2qj5AyXEDGc7-vYpoZWiC8OlmTXqWNTtOMU_Z1OqYEQ.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Interactive/Modal) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/fLTG1G6Q39THrRDo-5zSUdZl2z61d7_Kay0at0IKKZY_1MeewQ.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/modal/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/nHLbiEhMrPemLkhhxacFwQrdxexGN8b8V6HtP9gVWH0_Z1j6TF3.webp)
+- [Seeds](https://sproutsocial.com/seeds/components/modal) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/fEWEkXqT-dxE7gUppN9RtHs_Ho0xHT5-_MQ886-to4g_D2Yam.webp)
+- [Alert Dialog](https://ui.shadcn.com/docs/components/alert-dialog) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/7xYyZ3kZnYBt_TvANuCAnmuZxyUJh-ghbVRBQSr_820_7Vbcd.webp)
+- [Dialog](https://ui.shadcn.com/docs/components/dialog) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/xwyBQoCA7rb1XjGzJBZK0EqtAEtGuGlkW1s445A4DlQ_ZFn5Tu.webp)
+- [Dialog](https://shoelace.style/components/dialog) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/f4lhJqWK04VpMYBUpfd9qjsGhBSIEjr1X0soW3IsyEg_49Mqu.webp)
+- [Stacks](https://stackoverflow.design/product/components/modals) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/aAudy7227-55q2At6ijwojZn0fj2uMeHMwp68ue92NY_Z2daHyh.webp)
+- [Dialog](https://www.subzero.axis.bank.in/components/dialog) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/XeI3fkvPCh7MlnKfUQEuTsV-IqpNShJBmW_MH6Eia9s_Z19vohW.webp)
+- [Web Dialog](https://www.subzero.axis.bank.in/components/web-dialog) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/-kNlm7h48GdmUVnXAkMX7GeAh-2vh2eisX67bJ34BQc_Z1KGPb0.webp)
+- [Dialog](https://design.visa.com/components/dialog/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/ukSTBr2sIgEsjpxqYaqWUVgykt5otGJEaVsRlXhjE9M_1EB16z.webp)
+- [Dialog](https://webawesome.com/docs/components/dialog/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/7KB_8lXhfyxPPzWSMI6uujwB4C3N-_vZPCoBjhubBQw_Z19VT2b.webp)
+- [Wise Design](https://wise.design/components/modal) — Wise Design · Mobile — Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/cH4v2sJIIEqASIYwP1N74aa5MRxEMBcJp5qPrWrp0gY_DR6Wz.webp)
+
+---
+
+## Popover
+
+[Browse all 50 examples →](https://component.gallery/components/popover/)
+
+### Design System Implementations
+
+- [Ant Design](https://ant.design/components/popover) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/MqUBwuPcuaLoTZHvxRnjP60X0oKvWZzkz_iPZ5ark9U_kbrjR.webp)
+- [Popconfirm](https://ant.design/components/popconfirm) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/xnW4XB8jn-BWW_k3b0wF0-87JBsN9c5W2UG6QmWkbxY_1sqUof.webp)
+- [Ariakit](https://ariakit.org/components/popover) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/S1hnFfZaka3fuqzyK4SwJabMzJ-2XpSxgd-WSKFSa-A_Z24VTJj.webp)
+- [Hovercard](https://ariakit.org/components/hovercard) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/-K-86TOQ0HyxuUdv89CIf1jumyJ8W0p_KJ6pJDeCfoc_1uv8Jc.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/popover) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Uwwm3KUAO3KKgtnZ0nIaq0mbexQ0-yIieuUC7KTwki4_rqWIH.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/popover/web-ViBRNHX6) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/QujWA6cmp5eOh53GLFCWsqcIxzxoW8_dt8Vp9DwWZVs_ZO0iUc.webp)
+- [Base Web](https://baseweb.design/components/popover/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/0IVwrRAVrWx4DVb_6e7_wTADl4DC6BpS0RTwRIdeNzk_Z164gg1.webp)
+- [Blueprint](https://blueprintjs.com/docs/#core/components/popover) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/Gg68xfUQfgki1iZW6gqBUnFzvKTzZFrAdedkx4UK37A_Z2jIJ7r.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-popover) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/9ti_USA0OZJwTh8qVzp9HZU43XrAksffDQzj9jNIkNo_2u7hOz.webp)
+- [Bootstrap](https://getbootstrap.com/docs/4.3/components/popovers/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/CHcnNj2axLaVEWxNKBxwUxOwOYIkB4eWhd0KXH6anP4_Z18iGvK.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/popover/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/QvcVStx_CBjgx5s2E-zKvR-cagaXYYu78BhGhpcsliE_QoCSf.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Popover) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/I7WhEJhMx-lTjil3pDfCCRDZXvRjwhXafHyJ5lJKbC4_2puXAb.webp)
+- [Cedar](https://cedar.rei.com/components/popover) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/6RcBwoYvVHRJCzF8JaNUtdrNsyHZU-F5HTdmaFUqzj8_Z2j11KD.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/popover) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/iEu-8WMbKNySqukki8ppLO8cwVjN4GeP18x-6S7KbdQ_1oe3Jr.webp)
+- [Coral](https://design.talend.com/?path=/docs/messaging-popover--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/VatQWdSGndl1i8im_HcyScy60pRl80oEV2RUtDrdTCw_ZbU628.webp)
+- [Crayons](https://crayons.freshworks.com/components/core/popover/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/karCknQYDiv9rbVQAgQy9kqz5ZO0DKoO3_4PWfW_TCI_Z1Mkdhx.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/3086dd-popover/b/129609) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/C_HUcDOP84eaPbCcNWsInA-KXjhCSbY4Zf6Fzi5yfA8_22HVDK.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/popover/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/xkwgS4Hy5MS2SyAlrkUt8KAIP8GKiruqFt_RLLw3tHE_Z1zomdO.webp)
+- [eBay Playbook](https://playbook.ebay.com/design-system/components/popover) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/t3AJjjipVELX1EiF4Z_LIBUnryFSJCM4qYxaa1nNZKo_Zr60Ez.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/containers/popover/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/9qsD9xe2x_Bu0heZcp4gkYYXIMh4TEMuZ3M71NcPsTU_77ocG.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/32d29c-popover) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/26_YSg1bqcZ3OrrQ2XjiIZvk0eysa-aAmEdAm8YE8gA_2vqy0O.webp)
+- [Evergreen](https://evergreen.segment.com/components/popover) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/Pa41266ISYXx5F8LwphSWYpE3CykMvIas1jvMxVUO8M_Z1d98f0.webp)
+- [Flowbite](https://flowbite.com/docs/components/popover/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/Q7bVwet9h5B61znbj-0UmTX7O7NMP9Fi33Hbqg4bFFY_wBu1D.webp)
+- [Forma 36](https://f36.contentful.com/components/popover) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/TCWj4bJuxVciG67d9od6agQgfiLnQDt9QyibHV7GBI4_1ionM9.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/popover) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/KJ5Ee5FVzrXkjzEYymnstBLcUhu7UveAeCQ5-JVlMgE_22t41r.webp)
+- [Headless UI](https://headlessui.com/react/popover) — Headless UI · React, Vue — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/vOrlCAgRjfxRmSsNiQaIKR_j1zW1xcpSobwkCsFa75A_Z1v2jEf.webp)
+- [HeroUI](https://www.heroui.com/docs/components/popover) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/oOybQd-Rd8kjnimruRWHUwM9CvdwP4LD1l13nsK4pTs_ZP5vj5.webp)
+- [Instructure-UI](https://instructure.design/#Popover) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/LqsvhgcetBsULdrG4rVGDhKTl4Oe12PwZNzUilqQ_lQ_qjQL.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/popovers/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/Dz-phXWnvmVgo9yuliE8IYaUjS-0tum4HCbPDJoWj44_Z1bSmjB.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/popover) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/JGq9yFrf1dOjxswnI7bYveC0Qi3uuLNK_RBnF0x_vkI_1hJvtf.webp)
+- [NewsKit](https://www.newskit.co.uk/components/popover/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/EdGSZI0si5hoxYVGKmeoTbSE6yFE9E38DoBswcyK1zc_zODvO.webp)
+- [Popout](https://nordhealth.design/components/popout/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/w_Gt0Rxb6fNPKUAjI-IW1en1q0PfBYL-omP9gsrFOzo_1b4M46.webp)
+- [Orbit](https://orbit.kiwi/components/popover/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/MikQpSrNo7dxvOJmjZWqBsI0AJsWA5WaqRNfFKiFGho_Z1pLXa9.webp)
+- [Pajamas](https://design.gitlab.com/components/popover) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/Z9RPJSVbvSb2doklH4JWWaCahJ2WUJ3HACqPfeMPmag_Z1pgj2I.webp)
+- [Paste](https://paste.twilio.design/components/popover) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/HPvQdhngOK2QZ57KGffppSuPFBxYcAwdGA7V3BTTQho_Z2ujEcH.webp)
+- [PatternFly](https://www.patternfly.org/components/popover) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/U0Ud81aqh_oxnzsbOBN2vx1Lk14eHf1JqWM3HyGb048_Z2lQXgy.webp)
+- [Polaris](https://polaris.shopify.com/components/overlays/popover) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/eEelIkNTtDVcA8qvO_p7GRdeuumJ-Cr2lMEVa3rhFEM_i7V3F.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/popover/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/zHAdKQvQ84Vtgu5kdxks_9wYCDIwGZKCMt3emUyUxJ4_AwomG.webp)
+- [Primer](https://primer.style/design/components/popover) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/60gLuz5Fo7W7YHZ5oyDvei4pSF81eKcmryb9kC24Xis_ZQ7ov9.webp)
+- [Radix Primitives](https://radix-ui.com/primitives/docs/components/popover) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/zXTa1hJHta8dIBz7zlgabdxGJafqvaOaQFPvize3Vgs_252jok.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/popover/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/hos_IP-1owJigEbI4-Sr2L9oLFXxIc8deyyYUGw3QRc_2jQVow.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Notifications/Popover) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/iW1rapH4aFYcJ6vKDCV5_S1Qc2Oz6e9WHLAgEqFvftc_2o1e4W.webp)
+- [Popout](https://sproutsocial.com/seeds/components/popout) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/w19XNAdHmPd1QHDzmuh_6nFX39TLXswBxABJfRNbqYE_1qEPzn.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/popover) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/6hHV18genUWCrQ1nEkfjOhz1iKxdDlSc3-wNSbApRdY_yNRaK.webp)
+- [Spectrum](https://spectrum.adobe.com/page/popover/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/3bb5EvH6RaGSMGPqi0vQ_gQm_tyO2pq3aUSIl6TbIQU_1VAoDI.webp)
+- [Stacks](https://stackoverflow.design/product/components/popovers) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/egEAwEuiX8k2KWusnnS_mu93OZycRR5RwRY4HriqUTg_1TxGUf.webp)
+- [Thumbprint ](https://thumbprint.design/components/popover/usage/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/eUA6aJ8t6u_9b6znGeRua1ZDUxVBL8EIKYItNITeNzU_Zt4W1t.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/dialogs/popover) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/89uFMMM7EZ61dVFG0sRdxEdWQrjrpyZ8fny4RHNettU_Z1rOKnq.webp)
+- [Web Awesome](https://webawesome.com/docs/components/popover/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/CqLTOoH_EY-ASXLsCOlLKM8C6OuHkObxWgL-rG7-v2Q_Z2ehUNx.webp)
+- [Wise Design](https://wise.design/components/popover) — Wise Design · Mobile — Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/IOH9Lh3QHM33FqMN2Atl1ao5qipTGILRQLSXBzahTCQ_Z2j40Wo.webp)
+
+---
+
+*Data from [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com). 170 examples across 3 components.*

package/skills/design-deck/references/component-gallery/components/utilities.md

@@ -0,0 +1,29 @@
+# Utilities
+
+Accessibility and helper components.
+
+---
+
+## Visually hidden
+
+**Also known as:** Screenreader only
+
+[Browse all 11 examples →](https://component.gallery/components/visually-hidden/)
+
+### Design System Implementations
+
+- [VisuallyHidden](https://ariakit.org/components/visually-hidden) — Ariakit · React — Code examples, Open source, Accessibility
+- [Offscreen](https://cauldron.dequelabs.com/components/Offscreen) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source
+- [Visually Hidden](https://chakra-ui.com/docs/components/visually-hidden) — Chakra UI · React, CSS-in-JS — Code examples, Open source
+- [Visually Hidden](https://www.duetds.com/components/visually-hidden/) — Duet Design System · Angular, Vue, React — Code examples
+- [generic-components](https://genericcomponents.netlify.app/generic-visually-hidden/demo/index.html) — generic-components · Web Components — Code examples, Accessibility, Open source
+- [ScreenReaderContent](https://instructure.design/#ScreenReaderContent) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source
+- [Visible, Hidden & ScreenReaderOnly](https://www.newskit.co.uk/components/visibility/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source
+- [Nord Design System](https://nordhealth.design/components/visually-hidden/) — Nord Design System · Web Components — Code examples, Usage guidelines
+- [Screen Reader Only](https://paste.twilio.design/components/screen-reader-only) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source
+- [Visually Hidden](https://reach.tech/visually-hidden) — Reach UI · React — Accessibility, Code examples, Open source
+- [Screen Reader Only](https://seek-oss.github.io/seek-style-guide/screen-reader-only) — Seek style guide · React — Code examples, Unmaintained
+
+---
+
+*Data from [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com). 11 examples across 1 components.*