Skip to main content
Clever Ops

Plain Language Glossary

Legal terms translated, serif terms with always-visible plain-English glosses and measured disclosure rows for the full explanation. An accessible React glossary in Tailwind.

Preview & code

Loading Plain Language Glossary preview

Installation

pnpm dlx shadcn@latest add @cleverui/plain-language-glossary

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { PlainLanguageGlossary } from '@/components/blocks/plain-language-glossary'
Exampletsx
'use client'

import { PlainLanguageGlossary } from '@/components/blocks/plain-language-glossary'

export default function PlainLanguageGlossaryDemo() {
  return (
    <PlainLanguageGlossary
      eyebrow="Plain language"
      heading="The terms, translated"
      intro="The law has its own vocabulary. You should not need it to understand your own matter."
      defaultOpen={0}
      terms={[
        {
          term: 'Without prejudice',
          short: 'A protected offer made to settle, it cannot be used against you later in court.',
          explanation:
            'When we mark a letter or conversation “without prejudice”, we are trying to settle the dispute. What is said under that cover generally cannot be shown to a judge as evidence of admission or weakness. It lets both sides speak candidly about compromise.',
          example:
            'We make a without-prejudice offer of $180,000 to settle a claim. If talks fail, that figure stays off the court record.',
        },
        {
          term: 'Discovery',
          short: 'The formal exchange of documents and information each side must produce.',
          explanation:
            'Discovery is the process by which parties list and exchange documents relevant to the issues. It is not optional theatre, courts expect full, honest disclosure. We review what must go out and what the other side must give us.',
          example:
            'In a contract dispute, discovery may include emails, board minutes, and draft agreements from the negotiation period.',
        },
        {
          term: 'Indemnity',
          short: 'A promise to cover someone else’s loss if a specified risk eventuates.',
          explanation:
            'An indemnity shifts financial risk. If the named event happens, the indemnifying party pays the other’s loss. The wording of the clause, what it covers, what it excludes, and for how long, is where the real work sits.',
          example:
            'A supplier indemnifies a retailer against claims that the product infringes a third party’s patent.',
        },
        {
          term: 'Limitation period',
          short: 'The deadline by which a claim must be started, or the right is usually lost.',
          explanation:
            'Most claims have a statutory clock. Once it expires, the court will generally refuse to hear the case, even if the underlying complaint is strong. Knowing when the clock started, and whether it has been paused, is essential early advice.',
          example:
            'A claim for breach of a simple contract may need to be filed within six years of the breach, depending on the jurisdiction.',
        },
        {
          term: 'Privilege',
          short: 'Legal protection that keeps certain communications confidential from the other side.',
          explanation:
            'Legal professional privilege protects confidential communications made for the dominant purpose of obtaining legal advice or for litigation. It is a right of the client, not the lawyer, and it can be waived by careless disclosure.',
          example:
            'Your email to us seeking advice on a draft contract is privileged; forwarding that email to a counterparty may waive the protection.',
        },
        {
          term: 'Undertaking',
          short: 'A solemn promise to the court or to another party, breaking it has serious consequences.',
          explanation:
            'An undertaking is not a casual assurance. Given to a court, it can be enforced as if it were an order. Given between parties, it still carries professional and commercial weight. We never offer one lightly.',
          example:
            'A party undertakes not to dispose of assets pending the hearing of an injunction application.',
        },
      ]}
    />
  )
}

API reference

PlainLanguageGlossary accepts the following props.

PropTypeDefaultDescription
eyebrowstring'Plain language'spaced small-caps serif, never mono in this register
headingstring'The terms, translated'
introstringone measured sentence
terms*GlossaryTerm[]
exampleLabelstring'In practice'micro-label over the example passage
defaultOpennumberindex open on first render; omit for all closed

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface GlossaryTerm {
  term: string
  /** one-line gloss always visible on the closed row */
  short: string
  /** two or three plain-English sentences */
  explanation: string
  /** concrete 'in practice' sentence */
  example?: string
}

Frequently asked questions

How do I install the Plain Language Glossary component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/plain-language-glossary`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Plain Language Glossary require?

Plain Language Glossary uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Plain Language Glossary to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services