Read more

Free

Long text kept to a few lines until asked for: it opens to its full height, closes to a faded edge, and the button appears only when needed.

Installs components/ui/read-more.tsxDepends on lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/read-more.json

Release 4.12

Invoices now match payments across currencies. When a payment arrives in a different currency from its invoice, the rate on the payment date is used and any difference is booked to FX gains and losses, so the invoice closes in one step.

Bank feeds refresh every 15 minutes instead of hourly, and rules can now match on the counterparty's IBAN. Exports keep your column order, and the audit trail shows who changed a rule and when.

When to use #

Use it for

Descriptions, reviews and release notes in lists.
Profile bios and comments.

Skip it when

The main text of a page; let people read it.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/read-more.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { ReadMore } from "@/components/ui/read-more"

export function ReadMoreDemo() {
  return (
    <div className="w-full max-w-md text-sm leading-6">
      <p className="mb-1 font-medium">Release 4.12</p>
      <ReadMore lines={3}>
        <p>Invoices now match payments across currencies. When a payment arrives in a different currency from its invoice, the rate on the payment date is used and any difference is booked to FX gains and losses, so the invoice closes in one step.</p>
        <p className="mt-2">Bank feeds refresh every 15 minutes instead of hourly, and rules can now match on the counterparty&apos;s IBAN. Exports keep your column order, and the audit trail shows who changed a rule and when.</p>
      </ReadMore>
    </div>
  );
}

API reference #

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

linesnumber4Lines shown while closed.

moreLabelstring"Show more"

lessLabelstring"Show less"

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.