Hammer React contains flexible, customizable, reusable components and utilities for building complex UIs and layered design systems.

Hammer and Anvil2 Note

In this monorepo, there are both Hammer and Anvil2 packages. Hammer (e.g. @servicetitan/hammer-react), is the base library that the Anvil team maintains and @servicetitan/anvil2 builds on top of.

Anvil2 is more opinionated and ServiceTitan-specific, and can also include more complex components and customizations of Hammer.

Much of the source code for Anvil2 components (packages/anvil2) actually exists in this package. When releasing updates, making changes in Hammer will automatically propagate to Anvil2, as long as the component/function/type is exported from the packages/anvil2 package as well.

Getting Started

Installation

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

npm install @servicetitan/hammer-react

Usage

Components

Components can be imported as named exports from the package root:

import { Button, Icon } from "@servicetitan/hammer-react";

Icons

To learn more about Hammer Icons, head to packages/hammer-icon.

Hammer icons are expected to be used with the SVGR library, which will import SVGs as React components. SVGR is already included in the build process for this package.

Importing and using an icon:

import { Button, Icon } from "@servicetitan/hammer-react";

import Warning from "@servicetitan/hammer-icon/mdi/round/warning.svg";
import Star from "@servicetitan/hammer-icon/mdi/round/star.svg";
import LocalSettings from "@servicetitan/hammer-icon/mdi/round/local_settings.svg";

export const Example = () => (
  <>
    <Icon svg={Warning} size="large" />
    <Button icon={Star} aria-label="Favorite" />
    <Button icon={LocalSettings}>Settings</Button>
  </>
);

Contributing

We welcome contributions of all kinds from design to code!

Please reach out to our team in #ask-designsystem if you would like to make a contribution.

Check out the root-level Contributing docs for more details on making changes to this package.