Legal Document

Component

About

A structured layout for rendering a terms-of-service or privacy-policy document with a summary, numbered sections with a table of contents, and a visible revision history.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Legal Document to your project and fits it to your theme.

Code

How Legal Document is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LegalDoc from "@/components/ui/legal-doc";

export default function LegalDocDemo() {
  return (
    <div className="w-full min-h-screen bg-background p-10">
      <LegalDoc
        title="Terms of Service"
        entity="Acme Cloud, Inc."
        updated="March 3, 2025"
        effective="April 1, 2025"
        summary="These terms describe what you can do with Acme Cloud, what we can do with it, and what happens if either of us gets it wrong. Reading them is the fastest way to find out before it matters."
        sections={[
          {
            id: "acceptance",
            title: "Acceptance of these terms",
            body: (
              <p>
                By creating an account or using Acme Cloud you agree to these
                terms. If you are using the service on behalf of an
                organization, you are agreeing on its behalf and confirming you
                have the authority to do so.
              </p>
            ),
          },
          {
            id: "accounts",
            title: "Accounts and access",
            body: (
              <>
                <p>
                  You are responsible for keeping your credentials secret and
                  for activity that happens under your account.
                </p>
                <ul>
                  <li>
                    Tell us immediately if you suspect unauthorized access.
                  </li>
                  <li>
                    Do not share login credentials across unrelated people.
                  </li>
                </ul>
              </>
            ),
          },
          {
            id: "data",
            title: "Your data",
            body: (
              <p>
                You keep ownership of anything you upload. We process it only to
                run the service and never sell it to third parties.
              </p>
            ),
          },
          {
            id: "termination",
            title: "Termination",
            body: (
              <p>
                Either of us may end this agreement at any time. We will give 30
                days&apos; notice before closing an account for inactivity, and
                immediate notice if we close one for a violation of these terms.
              </p>
            ),
          },
        ]}
        history={[
          {
            date: "Mar 3, 2025",
            what: "Clarified how the 30-day inactivity notice works.",
          },
          { date: "Nov 18, 2024", what: "Added the data retention section." },
          { date: "Jun 2, 2024", what: "Initial version." },
        ]}
        contact="Questions about these terms? Write to legal@acmecloud.example."
      />
    </div>
  );
}