Every right below is exercised from this page. We do not require a reason, a template letter, or a phone call first.
A complete copy of the personal data on your account, including what our support team can read.
Within 30 days
The same data in a machine-readable export another provider can import without transformation.
Within 30 days
Amend inaccurate details yourself, or ask us to when a record is locked for clinical reasons.
Within 14 days
Erasure of everything we are not legally required to retain, with a written list of what stays and why.
Within 30 days
We confirm receipt the same working day and tell you the exact date your response is due.
A legal section listing four data rights as hairline cards, each with an icon tile and a response window, beside a soft panel holding a working request form with a request type, email, and free-text detail.
A legal section listing four data rights as hairline cards, each with an icon tile and a response window, beside a soft panel holding a working request form with a request type, email and free-text detail.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/legal56?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/legal56?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/legal56.tsx, the shadcn/ui input, select and textarea components it depends on, and the badge23 and button21 components it uses for the eyebrow and the submit action.
The installed file exports legal56Demo alongside the block: the exact props behind the preview above. Spread it to get a working page in one line.
import { Legal56, legal56Demo } from "@/components/beste/block/legal56";
export default function DataRightsPage() {
return <Legal56 {...legal56Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Download, Eye } from "lucide-react";
import { Legal56 } from "@/components/beste/block/legal56";
export default function DataRightsPage() {
return (
<Legal56
badge={{ label: "Your data rights" }}
heading="Ask for your records and get them, without a lawyer"
description="Every right below is exercised from this page."
rights={[
{
icon: Eye,
title: "See what we hold",
description: "A complete copy of the personal data on your account.",
window: "Within 30 days",
},
{
icon: Download,
title: "Take it elsewhere",
description: "The same data in a machine-readable export.",
window: "Within 30 days",
},
]}
formTitle="Make a request"
form={{
typeLabel: "What are you asking for",
typeOptions: ["A copy of my data", "An export I can take elsewhere", "Erasure"],
emailLabel: "The email on the account",
emailPlaceholder: "you@practice.com",
detailLabel: "Anything that helps us find you",
detailPlaceholder: "Practice name, previous email, or a reference number",
submitLabel: "Send the request",
finePrint: "We confirm receipt the same working day.",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
rights | RightCard[] | [] | The rights themselves, two-up from sm |
formTitle | string | – | Heading in the request panel |
form | RequestForm | – | Every label, placeholder and option in the form |
className | string | – | Extra classes for the outer section |
import type { LucideIcon } from "lucide-react";
type RightCard = {
icon: LucideIcon;
title: string;
description: string;
window: string;
};
type RequestForm = {
typeLabel: string;
typeOptions: string[];
emailLabel: string;
emailPlaceholder: string;
detailLabel: string;
detailPlaceholder: string;
submitLabel: string;
finePrint: string;
};typeOptions drives the select, and the first option is the defaultValue, so the form always opens on a valid selection rather than a placeholder.SelectTrigger carries data-[size=default]:h-11 rather than a plain h-11. shadcn's own data-attribute rule outranks an unqualified height class, so without the qualifier the select would render shorter than the input beside it.bg-background explicitly, since they sit on a bg-muted panel and would otherwise blend into it.useId, so labels stay correctly associated with several instances on one page.onSubmit, so the request call is wired by the integrator.window is required on every right and carries its own border-t, so a response time cannot be quietly omitted from a card.flex flex-col with the description marked flex-1, so the response windows align along the bottom across the matrix.gap-px over a bg-border container with bg-card cells, clipped by the container's overflow-hidden.Wiring the form up
This block renders the fields and leaves submission to you. For validation, error states and submit handling, the patterns in React Hook Form, TanStack Form, and Formisch cover this shape of request form, including the select.
legal4
Lists user data rights (access, rectify, erase, restrict, export) with request buttons. Perfect for GDPR compliance portals allowing users to exercise their rights.
legal53
A compliance section pairing four hairline certification cards, each with an accent icon and a tone-coded status pill, with a hairline definition list of data handling specifics and a security pack request.
legal51
Two-column comparison table showing data rights and privacy features by plan tier. Badge-styled values for Free vs Pro plans.
legal12
Shows NDA details with type (mutual/unilateral), duration, and key terms covered. Perfect for presenting confidentiality agreement summaries with download options.