## Data Export (S—325)

Request a copy of your data: pick what to include and the format, see the size, then track the export to download.

- URL: https://sundaeui.dev/components/data-export
- 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/data-export.json`
- Tags: export, download, settings, gdpr, data, privacy

Checkboxes choose categories, each with its rough size; the estimate updates as you tick. Format is JSON or CSV.
Requesting runs through preparing and ready states with progress; the download link expires after a set time, which is stated.

### Usage

```tsx
import { DataExport } from '@/components/sundae/data-export'

<DataExport />
```

### Props

- `categories` (`{ id: string; label: string; mb: number }[]`, required): What can be exported.
- `onRequest` (`(ids: string[], format: string) => void`): Called on request.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Account settings, compliance flows.

### When not to use

- Real-time sync: use an integration.

### Accessibility

- Categories are checkboxes; format is a radiogroup.
- Progress is a progressbar with a text status.
- Reduced motion removes the movement and keeps every state change.