---
id: Expandable section
section: components
---

import { useState } from 'react';

## Demos


### Expandable text with character truncation

You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content.

To specify the number of characters shown prior to truncation, use a `<Truncate>` component and pass a `maxWidth` to the `style` attribute.

```ts file='./examples/ExpandableTextDemo.tsx'

```