## Permission Prompt (S—222)

A pre-permission screen for camera, mic or notifications: explains why, then shows granted, denied or how-to-fix states.

- URL: https://sundaeui.dev/components/permission-prompt
- Category: UI components · 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/permission-prompt.json`
- Tags: camera, permissions, privacy, onboarding, microphone, notifications

Ask in context before the browser prompt: a short reason, what you will and won’t do, and Allow / Not now. The result card changes with the answer.
If denied, it shows the exact steps to re-enable in browser settings instead of asking again.

### Usage

```tsx
import { PermissionPrompt } from '@/components/sundae/permission-prompt'

<PermissionPrompt />
```

### Props

- `kind` (`'camera' | 'microphone' | 'notifications' | 'location'`, default `'notifications'`): What to ask for.
- `request` (`() => Promise<'granted' | 'denied'>`, required): Calls the real browser API.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Before any browser permission prompt, at the moment it is needed.

### When not to use

- On first page load before the user has done anything.

### Accessibility

- The card is a dialog-like region with a heading; the result is announced.
- Buttons say exactly what happens (“Allow notifications”).
- Reduced motion removes the movement and keeps every state change.