@cyguin/feedback

Drop-in user feedback widget for Next.js — capture thumbs, star ratings, or free-text feedback from inside any page.

Install

npm install @cyguin/feedback

Setup

1. Create the API route

Create app/api/feedback/[...cyguin]/route.ts in your Next.js app:

import { createFeedbackHandler } from '@cyguin/feedback/server';
import { createInMemoryAdapter } from '@cyguin/feedback/adapters/in-memory';

const adapter = createInMemoryAdapter();
const handler = createFeedbackHandler({ adapter });

export { handler as GET, handler as POST, handler as PATCH };

For production with Supabase:

import { createFeedbackHandler } from '@cyguin/feedback/server';
import { createSupabaseAdapter } from '@cyguin/feedback/adapters/supabase';

const adapter = createSupabaseAdapter(supabaseClient);
const handler = createFeedbackHandler({ adapter });

export { handler as GET, handler as POST, handler as PATCH };

2. Run migrations

CREATE TABLE feedback (
  id TEXT PRIMARY KEY,
  user_id TEXT,
  type TEXT NOT NULL,
  body TEXT NOT NULL,
  url TEXT NOT NULL,
  created_at INTEGER NOT NULL,
  reviewed INTEGER NOT NULL DEFAULT 0
);

3. Add the widget

import { FeedbackWidget } from '@cyguin/feedback/react';

// Thumbs mode
<FeedbackWidget type="thumbs" />

// Star rating mode (default 5 stars)
<FeedbackWidget type="rating" maxStars={5} />

// Free text mode
<FeedbackWidget type="text" placeholder="Share your feedback..." />

All three modes submit to your API and show a "Thanks for your feedback!" message for 3 seconds.

Theming

Use --cyguin-* CSS custom properties on a parent element or :root:

.feedback-widget {
  --cyguin-bg: #ffffff;
  --cyguin-bg-subtle: #f5f5f5;
  --cyguin-border: #e5e5e5;
  --cyguin-border-focus: #f5a800;
  --cyguin-fg: #0a0a0a;
  --cyguin-fg-muted: #888888;
  --cyguin-accent: #f5a800;
  --cyguin-accent-dark: #c47f00;
  --cyguin-accent-fg: #0a0a0a;
  --cyguin-radius: 6px;
  --cyguin-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

Switch to dark theme with the theme prop:

<FeedbackWidget type="thumbs" theme="dark" />

Dark theme applies these overrides automatically:

--cyguin-bg: #0a0a0a;
--cyguin-bg-subtle: #1a1a1a;
--cyguin-border: #2a2a2a;
--cyguin-fg: #f5f5f5;
--cyguin-shadow: 0 1px 4px rgba(0,0,0,0.4);

Supabase Adapter Setup

import { createFeedbackHandler } from '@cyguin/feedback/server';
import { createSupabaseAdapter } from '@cyguin/feedback/adapters/supabase';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!);
const adapter = createSupabaseAdapter(supabase);

const handler = createFeedbackHandler({
  adapter,
  secret: process.env.FEEDBACK_SECRET,
});

export { handler as GET, handler as POST, handler as PATCH };

Required environment variable: FEEDBACK_SECRET — Bearer token for admin API access.

API Routes

| Method | Route | Description | |--------|-------|-------------| | GET | /api/feedback | List feedback (admin, requires Bearer token) | | POST | /api/feedback | Submit new feedback | | PATCH | /api/feedback/:id/reviewed | Toggle reviewed flag |

License

MIT