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

First Steps

Prerequisites

Before starting, you will need Node 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:

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.

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.

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.

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.

import { Button, TextField } from "@servicetitan/anvil2";

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

Further Documentation

Docs is organized into three sections. After install, start here:

Concepts & Guidelines — Getting Started, Core Principles, Design Foundations, and Data Visualization.
Anvil2 — Components, Patterns, Icons, Illustrations, and Charts.
Resources — Migration Guides, Playbook, Roadmap, and Office Hours.

Additional Resources

The Hammer repository has package READMEs and source.
Submit a feature request on the Slack feature board.
For questions, use #ask-designsystem.

​First Steps

​Prerequisites

​Installation

​Installation within the ServiceTitan App

​Installation within a Microfrontend (MFE)

​Adding the AnvilProvider

​AnvilProvider in the ServiceTitan App and MFE

​Usage

​Further Documentation

​Additional Resources