Data Rights Request shadcn/tailwind block

Legal56: Data Rights Request

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.

Upgrade Now

Installation

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

bash

npx shadcn add "https://ui.beste.co/r/legal56?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

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.

Quick start

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.

tsx

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:

tsx

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.",
      }}
    />
  );
}

Props

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;
};

Behavior notes

typeOptions drives the select, and the first option is the defaultValue, so the form always opens on a valid selection rather than a placeholder.
The 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.
Every field carries bg-background explicitly, since they sit on a bg-muted panel and would otherwise blend into it.
Field ids come from useId, so labels stay correctly associated with several instances on one page.
The form is uncontrolled and holds no state. There is no 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.
Right cards are flex flex-col with the description marked flex-1, so the response windows align along the bottom across the matrix.
The matrix lines are the gap, not borders: 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.

Data Rights RequestPRO

Legal56: Data Rights Request

Installation

Quick start

Props

Behavior notes

More Legal blocks

GDPR Data Rights Panel

Trust And Compliance Overview

Rights Comparison Table

Data Request Process Timeline

Privacy Policy Page

NDA Template Card