Take Issue

React components for collecting feedback and bug reports from your users. Screenshots, annotations, and automatic GitHub issue creation.

Installation

``bash
npm install takeissue


or

pnpm add takeissue

or

yarn add takeissue
`

Requirements

- React 18 or 19
- Tailwind CSS (v3 or v4)

Quick Start

$3

Sign up at takeissue.dev and create an API key from your dashboard.

$3

Wrap your app with TakeIssueProvider:

`tsx
// app/layout.tsx (Next.js) or your root component
import { TakeIssueProvider } from 'takeissue'

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (


apiKey={process.env.NEXT_PUBLIC_TAKE_ISSUE_API_KEY!}
onSuccess={(issue) => {
console.log('Issue submitted:', issue)
}}
>
{children}



)
}
`

$3

Use the useTakeIssue hook to open the feedback modal:

`tsx
import { useTakeIssue } from 'takeissue'

function MyComponent() {
const { openTakeIssue } = useTakeIssue()
return Report a Bug
}
`

Components

$3

The main provider component. Wrap your app with this.

`tsx
apiKey="ti_live_..." // Required: Your API key
apiUrl="https://www.takeissue.dev" // Optional: Custom API URL
enableCommandPalette={false} // Optional: Enable Cmd+K palette (default: false)
onSuccess={(issue) => {}} // Optional: Success callback
onError={(error) => {}} // Optional: Error callback
>
{children}

`

$3

Programmatically open the issue reporter:

`tsx
import { useTakeIssue } from 'takeissue'

function MyComponent() {
const { openTakeIssue } = useTakeIssue()

return (

Report a Bug

)
}
`

$3

A standalone form component for embedding in your own UI:

`tsx
import { TakeIssueForm } from 'takeissue'

function FeedbackPage() {
return (
onSuccess={(issue) => console.log('Submitted:', issue)}
onError={(error) => console.error('Error:', error)}
className="max-w-md mx-auto"
/>
)
}
`

Tailwind Configuration

Make sure Tailwind scans the package for classes:

Tailwind v4 (CSS config):
`css
/ globals.css /
@import "tailwindcss";

@source "../node_modules/takeissue";
`

Tailwind v3 (JS config):
`js
// tailwind.config.js
module.exports = {
content: [
// ... your content paths
'./node_modules/takeissue/*/.{js,mjs}',
],
}
`

Excluding Elements from Screenshots

Add data-takeissue-exclude to any element you don't want captured in screenshots:

`tsx



``

Features

- Screenshot Capture: Automatically captures the current page
- Annotation Tools: Draw, highlight, add arrows and text
- GitHub Integration: Creates issues directly in your repository
- Customizable: Use individual components or the full provider

License

MIT