## Read More (S—109)

Clamped text that expands to its full height smoothly, with a toggle that only appears if the text actually overflows.

- URL: https://sundaeui.dev/components/read-more
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/read-more.json`
- Tags: truncate, clamp, text, expand, read-more, disclosure

The text is clamped to a set number of lines. If it fits, no toggle is shown. If it overflows, Read more animates the height open to the exact content height and flips to Show less.
No fade overlay: the last visible line ends with an ellipsis, which reads cleanly on any background.

### Usage

```tsx
import { ReadMore } from '@/components/sundae/read-more'

<ReadMore />
```

### Props

- `lines` (`number`, default `3`): Lines shown when collapsed.
- `children` (`ReactNode`, required): The text.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Reviews, bios, product descriptions, comments.

### When not to use

- Critical information: never hide it behind a toggle.

### Accessibility

- The toggle is a button with aria-expanded and aria-controls.
- Collapsed text is still in the DOM, so screen readers read all of it.
- Reduced motion removes the movement and keeps every state change.