@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+.

Usage

Named components can be imported:

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

It's also possible to import a specific cherry-picked component, which may assist in producing smaller bundle sizes:

import Button from "@servicetitan/anvil2/Button";

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 Icon from "@servicetitan/anvil2/Icon";
import Button from "@servicetitan/anvil2/Button";

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";

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