## Feedback Pins (S—375)

Design review on a screen: tap anywhere to drop a numbered pin, write the note, then resolve pins as they are fixed.

- URL: https://sundaeui.dev/components/feedback-pins
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/feedback-pins.json`
- Tags: collaboration, comments, annotation, design-review, pins, feedback

Tapping the canvas drops a pin and opens a small note field anchored to it. Notes are listed under the canvas with their number; selecting either highlights both.
Resolved pins turn hollow and move to the end of the list. Filter between open and all.

### Usage

```tsx
import { FeedbackPins } from '@/components/sundae/feedback-pins'

<FeedbackPins />
```

### Props

- `pins` (`{ id: number; x: number; y: number; text: string; done?: boolean }[]`): Starting pins, x/y in percent.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Design tools, QA, client approvals.

### When not to use

- Threaded discussions: use a comment thread.

### Accessibility

- Pins are buttons named with their number and note.
- The canvas also accepts Enter to add a pin at its centre.
- Reduced motion removes the movement and keeps every state change.