@servicetitan/design-system

Anvil Design System

The design system is a library of CSS components with TypeScript React wrappers.

Installation

npm install @servicetitan/design-system --save

Using React Components

In React environments, include the CSS file with any method that makes sense with your project. Components can be imported like any other NPM module.

import '@servicetitan/design-system/dist/system.min.css';
import { Component } from '@servicetitan/design-system';

Using CSS components

We strongly recommend using the React components. That said, the CSS is written following BEM naming rules, so a React Component translates to a CSS class of .Component. Variations are modifier classes, e.g. .Component .Component—variation.

Keep in mind that the design system is a living tool and will change in the future. Upgrading versions of the design system should be done cautiously as classes could change.

<link rel="stylesheet" href="../node_modules/@servicetitan/design-system/dist/system.min.css">