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.

​
Common Examples

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

function ExampleComponent() {
  return (
    <Details>
      <Details.Summary>Click to expand</Details.Summary>
      <Details.Content>Lorem ipsum dolor sit amet.</Details.Content>
    </Details>
  );
}

​
JSX content in details

The children prop of the Details component can accept any ReactNode. In many cases, text will be all that is required. In more complex scenarios, other Anvil2 components and JSX can be used.

​
Controlling details

By default, the Details component is uncontrolled and expands/collapses based on user input (on click or on enter or space key press when the element is focused). Use the expanded prop to control the details expanded state programatically.

​
Accordions

To create an accordion-style details list, control the open state of each item using the expanded on onClick props.

​
Details content height options

The following props are available to control the height of the details content: height and maxHeight. If either is set, the content element will also have overflow: auto.
Last modified on April 9, 2026