Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Who Received Your Data Account Block for React

A person's record of who their data went to: a row per recipient with the kinds of data it received, the day it last did and why, and a switch that stops the sharing where consent is the reason.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show people where their data went, with this data sharing panel for React with Base UI. A hairline frame with a plus mark on each corner holds a ruled list with a row per recipient: its tile and name, what it does for the person, the kinds of data it received as outline Badges (Email, Device info, Usage), the day it last received any and why it may have it, in words. The two recipients that rest on consent carry a Switch that stops the sharing, with a dot and the word Sharing or Stopped beside it, and a line that says what stops; the two that are needed to run the service show a Required badge with a lock and say why they cannot be turned off. A count above the list reads "4 recipients, 2 you can stop" from the data, the header's one Shine Button stops both optional recipients at once, and the foot's Undo walks back one change at a time. It's built from Switch, Badge, Button, Shine Button and Guides, with a CSS entrance only. For the privacy page of any app that passes data to analytics, payment, email or advertising companies.

FAQ

How do I list my real recipients?

Edit RECIPIENTS. Each has an id, a kind that picks the icon, a name and a role in a few words, the kinds of data it gets, an ISO last day, the basis in words, whether it is optional, and two sentences: on for while it is shared and off for once it is stopped (a required recipient needs no off). The count, the idle status and the bulk button all read from that list, so nothing else needs editing. Every date is formatted from the one AS_OF constant, never the clock.

What stays local, and how do I make stopping real?

Everything: a switch changes this page's state and the status line says "in this demo". To make it real, call your consent service in setShared and stopAll, change a row only when it answers and show a failure in the same status line. Be honest in the row about what stopping does to data the recipient already holds; the sample says it is deleted within 30 days, which is a promise you must be able to keep. Undo needs its own reverse call, or should be removed.

Why can some recipients not be stopped?

Because the service cannot run without them, and the row says so in words instead of showing a switch that does nothing: the payment processor is needed to charge for a pass, and the email delivery service to send mail the person asked for. They show a Required badge with a lock, and the reason is the row's own sentence. A disabled switch would be harder to read and fails the contrast rules, so there is none.

What does the header button do?

It stops every optional recipient that is still sharing, as one change, and says how many in the status line; one Undo brings them all back. When none is left it stays in place, marked as unavailable, and answers that everything optional is already stopped. It is the block's only colored control.

Does the panel change height?

No. Each row keeps a line for what is true now, sized for the longer of its two sentences, so switching a recipient or stopping all of them never moves anything below it. On a phone each row stacks its name, badges, facts and sentence, with the switch under them, and the foot with the status line and Undo stays pinned to the bottom of the screen.

Is it accessible?

Recipients are a real list; the badges are a list named for what that recipient received. Each switch is named "Share with Analytics provider", and state is a word and a dot, filled for Sharing and hollow for Stopped, never a color alone. The status line is a polite live region present from the start. Dates keep their order in a right-to-left page.

  • Pro

    Privacy Settings

    Privacy and consent

    A privacy panel with three presets that set five switches, a sentence that adds them up, and a row per setting that says in words what it means for you and what it shares.

  • Pro

    GDPR Consent Settings

    Privacy and consent

    A purposes register with a legal basis, retention and consent record per purpose, a rule that withdrawing must be as easy as giving, and three data requests counted down from 30 days.

  • Pro

    The people a person has blocked or muted, as two tabs of rows with initials, handle and date, an Unblock or Unmute that can be undone, and a handle field that adds someone from four typed accounts.

  • Pro

    A person's consent choices as an accordion of purposes with switches beside a consent receipt, an ordered log that gains a line for each choice and saves as a real PDF or JSON file.

  • Pro

    OAuth grants as a table: each app with its access level, grant date and last use, unused apps pinned to the top, scopes in plain words, a Revoke that can be undone and a bulk revoke that asks first.

  • Pro

    Export requests as a lifecycle: a request checked with the password, a four-stage track that moves one stage per press, and a real sample file to download once it is ready.