A licence written as three plain columns, what is allowed outright, what needs an email first and what is refused, each item marked by the icon for its column.
A licence written as three plain columns, what is allowed outright, what needs an email first and what is refused, each item marked by the icon for its column.
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/legal58?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/legal58?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/legal58.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).
The installed file exports legal58Demo alongside the block: the exact props behind the preview above. Spread it to get a working permissions page in one line.
import { Legal58, legal58Demo } from "@/components/beste/block/legal58";
export default function ReprintsPage() {
return <Legal58 {...legal58Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Legal58 } from "@/components/beste/block/legal58";
export default function ReprintsPage() {
return (
<Legal58
eyebrow="Reprints"
heading="What you may do with anything published here"
description="Written in plain words instead of a licence."
groups={[
{
tone: "allowed",
title: "Yes, go ahead",
items: ["Quote a few paragraphs with a link back.", "Translate anything, if the translation is free to read."],
},
{
tone: "ask",
title: "Ask us first",
items: ["Republishing a full piece on another site."],
},
{
tone: "refused",
title: "No",
items: ["Training a model on the archive."],
},
]}
contactText="Anything that is not on this page?"
contactLink={{ label: "Ask and we will answer in a day", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Badge6 label above the hairline rule |
heading | string | – | Section heading under the rule |
description | string | – | Supporting paragraph |
groups | PermissionGroup[] | [] | One column per permission tone |
contactText | string | – | Line in the panel under the columns |
contactLink | ContactLink | – | Link beside that line |
className | string | – | Extra classes for the outer section |
type PermissionGroup = {
tone: "allowed" | "ask" | "refused";
title: string;
items: string[];
};
type ContactLink = {
label: string;
href: string;
};tone picks the marker: a check for allowed, an envelope for ask first and a cross for refused. The column title is separate, so the wording is yours while the icon stays consistent.legal45
EULA card with numbered clauses covering license grant, restrictions, IP, warranties, and liability. Each clause has a title and full legal text.
legal56
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.
legal31
Displays open source package attributions with license types, authors, and links to repositories. Includes a search filter for large dependency lists. Required for OSS license compliance.
legal13
Displays license type with allowed permissions and limitations in checkmark format. Perfect for open-source projects or software documentation pages.