Skip to main content

Documentation Index

Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Live Component Playground

​
Common Examples

import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Overflow.Text rows={1}>
      <Text>{/* Text content */}</Text>
    </Overflow.Text>
  );
}

​
Overflow text

To handle the overflow of text content, you can use the Overflow.Text component. By default, it will limit the text to a single line:

​
Adjusting rows of overflow text

You can increase the number of visible rows by setting the rows prop:

​
Truncating overflow text

To display a “Show more…” button on overflow text, you can use the expandable prop. For more custom use cases, you can also use the expandText/collapseText and onExpand/onCollapse props to customize the displayed text and event handlers:

​
React Accessibility

  • The component automatically disables keyboard-focusable elements when they are not visible in the truncated view
  • The expand/collapse button is keyboard accessible
  • Content is properly structured for screen readers
Last modified on April 9, 2026