Balick UI

Expandable Text

Long text clamped to a few lines, with a button that unfolds the rest. The button only shows when the text overflows.

Open in
Balick UI started as the set of sections behind a handful of client sites. Every block is built on the same Section, Container and SectionHeader primitives, so a hero from one page and a pricing table from another still look like they belong together. The composer turns that into a workflow: pick the blocks, preview the page at any width, then install everything with a single command.

Installation#

pnpm dlx shadcn@latest add @balick/expandable-text

Or pass the full URL: https://ui.balick.me/r/expandable-text.json

Usage#

import { ExpandableText } from "@/components/ui/expandable-text"

export function Review({ text }: { text: string }) {
  return <ExpandableText lines={4}>{text}</ExpandableText>
}

Props#

PropTypeDefault
lines

Lines shown while collapsed.

number3
moreLabel

Label of the button while collapsed.

string"Show more"
lessLabel

Label of the button while expanded.

string"Show less"