1 GitHub star = 1 new component.

Star the repo
Overlayssupportchatfloating

Support Chat Bubble

Floating corner help bubble with popout FAQ list.

We are online!
๐Ÿ’ฌ

Usage

Copy and paste this code into your React component:

tsx
import { HelpBubbleOverlay } from 'react-component-kit-ui/overlays';

<HelpBubbleOverlay>Content</HelpBubbleOverlay>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/HelpBubbleOverlay.tsx + HelpBubbleOverlay.css:

HelpBubbleOverlay.tsx
'use client';

import './HelpBubbleOverlay.css';

/** HelpBubbleOverlay โ€” ported from astro-component-kit. */
export interface HelpBubbleOverlayProps {
}

export function HelpBubbleOverlay({}: HelpBubbleOverlayProps) {
  return (
    <>
      <div className="help-bubble" data-rk-da86e5="">
        <div className="tip" data-rk-da86e5="">We are online!</div>
        <div className="icon" data-rk-da86e5="">๐Ÿ’ฌ</div>
      </div>
    </>
  );
}

export default HelpBubbleOverlay;
HelpBubbleOverlay.css
/* HelpBubbleOverlay โ€” ported from astro-component-kit (overlays/HelpBubbleOverlay.astro) */

.help-bubble:where([data-rk-da86e5]) { position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; z-index: 1000; }
.icon:where([data-rk-da86e5]) { width: 55px; height: 55px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,0.4); }
.tip:where([data-rk-da86e5]) { background: #fff; color: #000; padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

Quick Info

Category
Overlays
Filename
HelpBubbleOverlay.tsx
Dependencies
None โ€” pure React + CSS
Tags
supportchatfloating