### Install Anvil2

Source: https://anvil.servicetitan.com/docs/getting-started

Installs the Anvil2 package using npm. Ensure Node.js (version 20+) and a package manager like npm are installed beforehand. React and React DOM (version 18+) are peer dependencies.

```bash
npm install --save @servicetitan/anvil2
```

--------------------------------

### Install React Peer Dependencies

Source: https://anvil.servicetitan.com/docs/getting-started

Installs React and React DOM with version 18, which are required peer dependencies for Anvil2. This command uses npm.

```bash
npm install react@18 react-dom@18
```

--------------------------------

### Install Anvil2 Package

Source: https://anvil.servicetitan.com/docs/migration-guide

Installs the Anvil2 Web package using npm. This is a prerequisite for using Anvil2 components in your project.

```bash
npminstall @servicetitan/anvil2
```

--------------------------------

### Use Anvil2 Components

Source: https://anvil.servicetitan.com/docs/getting-started

Shows a basic example of using Anvil2 components, specifically TextField and Button, within a React functional component. Ensure AnvilProvider is set up in the component tree.

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

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

--------------------------------

### Add AnvilProvider Component

Source: https://anvil.servicetitan.com/docs/getting-started

Demonstrates how to wrap child components with the AnvilProvider. This is typically done at the highest level of the React component tree, such as in the App component, to make Anvil2 components functional.

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

export const App = ({ children }) => (
  <AnvilProvider>{/* ...other providers */}{children}</AnvilProvider>
);
```

--------------------------------

### Import Anvil2 Button Component

Source: https://anvil.servicetitan.com/docs/migration-guide

Demonstrates how to import the Button component from the Anvil2 Web package after installation. This allows you to use the Button component in your React application.

```javascript
import{Button}from'@servicetitan/anvil2';
```

--------------------------------

### Anvil2 Announcement Component Changes

Source: https://anvil.servicetitan.com/docs/migration-guide

The Announcement component in Anvil2 has removed the `actionName` and `onActionClick` props. Action buttons should now be passed as `children` of the `Announcement` component.

```JavaScript
// Anvil1: 
// <Announcement actionName="View" onActionClick={handleView} />

// Anvil2:
<Announcement>
  <button>View</button>
</Announcement>
```

--------------------------------

### Anvil2 Drawer Visibility Control

Source: https://anvil.servicetitan.com/docs/migration-guide

The Drawer component in Anvil2 should not be conditionally rendered. Use the `open` prop to control its visibility.

```JavaScript
// Anvil1: {isOpen && <Drawer>Content</Drawer>}

// Anvil2:
<Drawer open={isOpen}>
  Content
</Drawer>
```

--------------------------------

### Import Anvil2 CSS Utilities

Source: https://anvil.servicetitan.com/docs/migration-guide

Shows different ways to import Anvil2 CSS utility classes. You can import all utilities at once, or import them by type. It also demonstrates how to import prefixed versions to avoid class name collisions.

```css
// all utils
import"@servicetitan/anvil2/assets/css-utils/utils.css";

// by type
import"@servicetitan/anvil2/assets/css-utils/border.css";
import"@servicetitan/anvil2/assets/css-utils/color.css";
import"@servicetitan/anvil2/assets/css-utils/font.css";
import"@servicetitan/anvil2/assets/css-utils/spacing.css";

// all utils prefixed with "a2-"
import"@servicetitan/anvil2/assets/css-utils/a2-utils.css";
```

--------------------------------

### Import Anvil2 React Package

Source: https://anvil.servicetitan.com/docs/about-anvil2

This snippet shows how to import the latest version of the Anvil2 React package from the Hammer repository. It's a common starting point for engineers integrating the design system into their projects.

```javascript
import { Anvil2 } from '@servicetitan/anvil2';
// Or import specific components as needed
```

--------------------------------

### Anvil2 Tab Component Structure

Source: https://anvil.servicetitan.com/docs/migration-guide

The Anvil2 Tab component uses sub-components for buttons and panels. The `controls` and `id` props on `Tab.Panel` and `Tab.Button` link them together.

```JavaScript
<Tab>
  <Tab.List>
    <Tab.Button controls="panel-1">Tab 1</Tab.Button>
    <Tab.Button controls="panel-2">Tab 2</Tab.Button>
  </Tab.List>
  <Tab.Panel id="panel-1">Content 1</Tab.Panel>
  <Tab.Panel id="panel-2">Content 2</Tab.Panel>
</Tab>
```

--------------------------------

### Anvil2 Toast Message Handling

Source: https://anvil.servicetitan.com/docs/migration-guide

Anvil2 Toast messages are controlled via `toast` methods for displaying, hiding, and updating, rather than internal state.

```JavaScript
// Example usage (assuming 'toast' object is available):
throw new Error('Toast methods are used for display, hide, and update.');
// toast.success('Operation completed!');
// toast.dismiss();
```

--------------------------------

### Anvil2 Option List to List View/Listbox Migration

Source: https://anvil.servicetitan.com/docs/migration-guide

The Option List component is replaced by List View or Listbox in Anvil2. List Views include checkboxes, while Listboxes are for confined spaces. Both use `children` to render items instead of the `options` prop.

```JavaScript
// Anvil1: <OptionList options={items} />

// Anvil2 (List View):
<ListView>
  <ListView.Item>Item 1</ListView.Item>
  <ListView.Item>Item 2</ListView.Item>
</ListView>

// Anvil2 (Listbox):
<Listbox>
  <Listbox.Option>Option 1</Listbox.Option>
  <Listbox.Option>Option 2</Listbox.Option>
</Listbox>
```

--------------------------------

### Anvil2 Progress Tracker to Stepper Migration

Source: https://anvil.servicetitan.com/docs/migration-guide

The Progress Tracker is replaced by the Stepper component in Anvil2. `Stepper.Step` should be children of `Stepper.List`, and `Stepper.List`, `Stepper.Panel`, `Stepper.NextButton`, `Stepper.PrevButton`, and `Stepper.FinalPanel` are children of the `Stepper`.

```JavaScript
// Anvil1: <ProgressTracker steps={steps} />

// Anvil2:
<Stepper>
  <Stepper.List>
    <Stepper.Step>Step 1</Stepper.Step>
    <Stepper.Step>Step 2</Stepper.Step>
  </Stepper.List>
  <Stepper.Panel>
    <Stepper.NextButton />
  </Stepper.Panel>
</Stepper>
```

--------------------------------

### Anvil2 Select to Combobox Migration

Source: https://anvil.servicetitan.com/docs/migration-guide

The Select component is replaced by Combobox in Anvil2, allowing search within a dropdown. It uses a component-based API for rendering items.

```JavaScript
// Anvil1: <Select options={options} />

// Anvil2:
<Combobox>
  <Combobox.Input />
  <Combobox.Popover>
    <Combobox.List>
      <Combobox.Option>Option A</Combobox.Option>
      <Combobox.Option>Option B</Combobox.Option>
    </Combobox.List>
  </Combobox.Popover>
</Combobox>
```

--------------------------------

### Anvil2 Badge/Tag to Chip Component Migration

Source: https://anvil.servicetitan.com/docs/migration-guide

The Badge/Tag component is replaced by a separate Chip component in Anvil2. The `label` prop should be used instead of `children` for text content.

```JavaScript
// Anvil1: <Badge>New</Badge> or <Tag>Beta</Tag>

// Anvil2:
<Chip label="New" />
```

--------------------------------

### Anvil2 Modal to Dialog Component Migration

Source: https://anvil.servicetitan.com/docs/migration-guide

The Modal component is replaced by the Dialog component in Anvil2. The `title` and `footer` props are replaced by `Dialog.Header` and `Dialog.Footer` components, passed as `children` of the `Dialog`. Use the `open` prop to control visibility.

```JavaScript
// Anvil1: <Modal title="My Modal" footer={<button>OK</button>}>Content</Modal>

// Anvil2:
<Dialog open={isOpen}>
  <Dialog.Header>My Modal</Dialog.Header>
  <Dialog.Content>Content</Dialog.Content>
  <Dialog.Footer>
    <button>OK</button>
  </Dialog.Footer>
</Dialog>
```

--------------------------------

### Anvil2 Banner to Alert Component Migration

Source: https://anvil.servicetitan.com/docs/migration-guide

The Banner component is replaced by the Alert component in Anvil2. Action buttons should be passed as `children` of the `Alert` component, replacing the previous action button props.

```JavaScript
// Anvil1: <Banner actionText="Learn More" onActionClick={handleLearnMore} />

// Anvil2:
<Alert>
  Learn More
</Alert>
```

--------------------------------

### Importing Material Icons in Anvil2

Source: https://anvil.servicetitan.com/docs/about-anvil2

Demonstrates how to import Material Design icons from the Anvil2 library. It specifies the import path for accessing these SVG icons.

```javascript
import IconName from '@servicetitan/anvil2/assets/icons/material/round/[icon].svg';
```

--------------------------------

### Importing Custom ST Icons in Anvil2

Source: https://anvil.servicetitan.com/docs/about-anvil2

Shows the import path for custom ServiceTitan (ST) icons within the Anvil2 framework. This allows developers to use proprietary icons.

```javascript
import IconName from '@servicetitan/anvil2/assets/icons/st/[icon].svg';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.