> ## 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.

# Getting Started

A guide to starting with Anvil2 in the ServiceTitan product.

The steps to start developing using Anvil2 change depending on if you are working in a fully standalone project, the ServiceTitan main project, or the ServiceTitan [Startup](https://www.npmjs.com/package/@servicetitan/startup) package.

## First Steps

### Prerequisites

Before starting, you will need [Node](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs) installed with version 22 or later. Additionally, a package manager such as `npm` or `pnpm` is required. In our examples, we use `npm`.\
Anvil2 has `react` and `react-dom` as peer dependencies. To use Anvil2, your project must use React 18 or React 19. If these dependencies are missing, install them using your preferred package manager before continuing:

```bash theme={null}
npm install react@18 react-dom@18
```

### Installation

With Node and a package manager installed, go to the root of your project. Install Anvil2 using your package manager.

```bash theme={null}
npm install --save @servicetitan/anvil2
```

#### Installation within the ServiceTitan App

The ServiceTitan app already has Anvil2 installed. Verify the current version by checking the list of dependencies in the [package.json](https://github.com/servicetitan/app/blob/master/Clients/Web/package.json).

#### Installation within a Microfrontend (MFE)

The `@servicetitan/web-components` package has Anvil2 installed starting in version `27.0.0`. If your MFE project has this installed, we recommend staying up-to-date with the latest version to be consistent with other MFEs.

### Adding the AnvilProvider

Many Anvil2 components require that the `AnvilProvider` component exists somewhere higher in the component tree. This is usually done at the highest level component, such as `App.tsx`.

```tsx theme={null}
import { AnvilProvider } from "@servicetitan/anvil2";

export const App = ({ children }) => (
  <AnvilProvider>
    {/* ...other providers */}
    {children}
  </AnvilProvider>
);
```

#### AnvilProvider in the ServiceTitan App and MFE

The ServiceTitan monolith app already has the `AnvilProvider` wrapping all React code, and most MFEs that are up-to-date with platform infrastructure do as well.

If you are working in these contexts, only worry about adding it if a component breaks and logs a warning that it is missing a provider.

## Usage

With the design system installed, Anvil2 is available for use in your React applications.

```tsx theme={null}
import { Button, TextField } from "@servicetitan/anvil2";

export const MyComponent = () => {
  return (
    <>
      <TextField name="textInput" label="Label" required />
      <Button>Click me!</Button>
    </>
  );
};
```

## Further Documentation

There are a number of available resources to continue learning to use Anvil2 effectively:

* For assistance using specific components in the design system, check the [component documentation](/docs/web/components).
* For a deeper understanding of how to use Anvil2, use the [foundations documentation](/docs/web/foundations).
* For established patterns in Anvil2, use the [patterns documentation](/docs/web/patterns).

## Additional Resources

With Anvil2 installed in your project, there are a number of additional resources available:

* The [Github repository for Anvil2](https://github.com/servicetitan/hammer) provides further information on getting started.
* To submit a feature request, use our [Slack feature board](https://servicetitan.enterprise.slack.com/lists/T08QRUZ6W/F07EUDU0WS1). We check this as a team every week.
* For questions and immediate assistance, reach out in the [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) Slack channel.