VibeKit React

A lightweight React component library for integrating VibeKit modals into your applications. Zero dependencies, fully customizable, unstyled by default.

Installation

npm install @vibe-kit/onboard

Usage

React/Next.js Usage

The simplest way to use VibeKit is with the VibeKitButton component:

import { VibeKitButton } from '@vibe-kit/onboard';

function App() {
  return (
    <div>
      <VibeKitButton 
        token="your-vibekit-token-here"
        buttonText="🖖 Add VibeKit to your app"
        className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600"
        // Add your own styles - components are unstyled by default
      />
    </div>
  );
}

Props

VibeKitButton Props

Prop	Type	Default	Description
token	string	required	Your VibeKit token
buttonText	string	"🖖 Add VibeKit to your app"	Text displayed on the button
className	string	""	CSS class for the button
style	React.CSSProperties	{}	Inline styles for the button
children	React.ReactNode	undefined	Custom button content (overrides buttonText)

VibeKitModal Props

Prop	Type	Default	Description
isOpen	boolean	required	Whether the modal is open
onClose	() => void	required	Function called when modal should close
url	string	undefined	URL to display in the iframe
title	string	"Modal"	Title for the modal (for accessibility)
width	number	900	Modal width in pixels
height	number	620	Modal height in pixels
children	React.ReactNode	undefined	Custom content (used instead of iframe if provided)

Features

• ✅ Zero dependencies - No third-party libraries required
• ✅ Unstyled by default - Complete styling freedom
• ✅ TypeScript support - Full type safety
• ✅ Next.js compatible - Works with SSR/SSG
• ✅ Responsive - Adapts to different screen sizes
• ✅ Accessible - Keyboard navigation and ARIA support
• ✅ Framework agnostic - Works with any CSS solution (Tailwind, styled-components, CSS modules, etc.)
• ✅ Vanilla JS support - Works without React
• ✅ Message handling - Supports iframe communication
• ✅ Auto-resize - Modal adjusts to content height

🎨 Styling

VibeKit components are completely unstyled by default. This gives you full control over the appearance. See our Styling Guide for examples with:

• Tailwind CSS
• Styled Components
• CSS Modules
• Material-UI
• Chakra UI
• Vanilla CSS
• And more!

Browser Support

• Chrome/Edge 88+
• Firefox 87+
• Safari 14+

License

MIT