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 { List } from "@servicetitan/anvil2";

function UnorderedExample() {
  return (
    <List>
      <List.Item>Item one</List.Item>
      <List.Item>Item two</List.Item>
    </List>
  );
}

function OrderedExample() {
  return (
    <List variant="ordered">
      <List.Item>Step one</List.Item>
      <List.Item>Step two</List.Item>
    </List>
  );
}

​
Unordered list (default)

Omit variant or set variant="unordered" to render a ul with bullet markers.

​
Ordered list

Set variant="ordered" to render an ol with numeric markers. You can pass native ol attributes such as start and reversed.

​
Size

Use size to control typography (small, medium, large).

​
Nested lists

Render a List inside a List.Item to create sub-lists. Use a different variant (e.g., ordered inside unordered) when it fits the content.

​
Ordered with start and reversed

When variant="ordered", you can pass start (number) and reversed (boolean) as with native ol.

​
React Accessibility

The List component renders semantic ul/ol and li elements, so list structure is exposed to assistive technologies without extra ARIA. Screen readers can announce the list and the number of items. Keep list item content readable and avoid using List for interactive selection; use Listbox or Menu for that.
Last modified on April 9, 2026