https://github.com/superagent-ai/vibekit-react
A React component library for seamless integration of VibeKit Onboard into your application.
https://github.com/superagent-ai/vibekit-react
Last synced: 7 months ago
JSON representation
A React component library for seamless integration of VibeKit Onboard into your application.
- Host: GitHub
- URL: https://github.com/superagent-ai/vibekit-react
- Owner: superagent-ai
- Created: 2025-06-18T06:00:43.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-06-18T06:20:51.000Z (7 months ago)
- Last Synced: 2025-06-18T07:26:26.753Z (7 months ago)
- Language: TypeScript
- Size: 962 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VibeKit React
A lightweight React component library for integrating VibeKit modals into your applications. **Zero dependencies, fully customizable, unstyled by default.**
## Installation
```bash
npm install @vibe-kit/onboard
```
## Usage
### React/Next.js Usage
The simplest way to use VibeKit is with the `VibeKitButton` component:
```tsx
import { VibeKitButton } from '@vibe-kit/onboard';
function App() {
return (
);
}
```
## 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**](./STYLES.md) 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