## Profile Visibility (S—324)

Who can see each profile field: everyone, connections or only me per row, a preview-as switch, and bulk set all.

- URL: https://sundaeui.dev/components/visibility-settings
- 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/visibility-settings.json`
- Tags: permissions, settings, audience, visibility, profile, privacy

Each field has a three-way selector. Preview as switches the card at the top to what that audience would see, so the effect of a choice is visible right away.
Set all applies one level to every field at once; locked fields such as your name stay public.

### Usage

```tsx
import { VisibilitySettings } from '@/components/sundae/visibility-settings'

<VisibilitySettings />
```

### Props

- `fields` (`{ id: string; label: string; value: string; level: 0 | 1 | 2; locked?: boolean }[]`, required): Fields; 0 everyone, 1 connections, 2 only me.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Profile and account privacy settings.

### When not to use

- Fine-grained per-person sharing: use a share dialog.

### Accessibility

- Each selector is a radiogroup labelled with the field.
- The preview states which audience it shows.
- Reduced motion removes the movement and keeps every state change.