@servicetitan/anvil2

Anvil2 Design System

Anvil2 contains reusable components, fonts, icons, and more for building ServiceTitan products.

Getting Started

Installation

We recommend installing Anvil2 by running the following npm command (or the equivalent yarn/pnpm command) in your project folder:

npm install @servicetitan/anvil2

NOTE: Using Anvil2 React components requires a minimum of React 18+ and may require react-router-dom 5.3.0+ for certain features.

Usage

Named components can be imported:

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

If you're developing a MFE, the @servicetitan/startup package should be able to use the monolith's copy of the @servicetitan/anvil2 package to reduce your production bundle size.

Anvil2 icons are expected to be used with the SVGR library, which will import SVGs as React components. SVGR should already be part of the latest @servicetitan/startup Webpack configuration.

Importing and using an icon:

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

import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
import Star from '@servicetitan/anvil2/assets/icons/material/round/star.svg';
import LocalSettings from '@servicetitan/anvil2/assets/icons/st/local_settings.svg';

<Icon svg={Warning} size="large" />
<Button icon={Star} aria-label="Favorite" />
<Button icon={LocalSettings}>Settings</Button>

Provider

When using the Anvil2 component library, we recommend wrapping the top level of your app in the AnvilProvider component, which also supports light/dark themes and localization configuration:

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

<AnvilProvider themeData={...} localizationData={...}>
  ...
</AnvilProvider>

Documentation

You can read the Anvil2 docs at: https://anvil.servicetitan.com/

Contributing

We welcome contributions of all kinds from design to code. Please see our guide to contributing.