> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Illustrations

> Illustration is the set of custom graphics: characters, scenes, and icon-adjacent visuals used to add warmth, guide attention, or fill empty space (empty states, onboarding, error pages). It is distinct from icons and elevation: icons label actions, elevation signals depth, and illustration tells a small visual story.

For designs, use the current [illustration library](https://anvil.servicetitan.com/docs/illustrations).

## First use

ai-kit-illustrations-first-use

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-illustrations-first-use?file=src/App.tsx)

```tsx lines theme={null}
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";
import FirstUse from "@servicetitan/anvil2-illustrations/illustrations/empty-state-first-use-light.svg";

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: primitive.size["800"],
      }}
    >
      <FirstUse aria-hidden="true" height={200} />
    </div>
  );
}

export default App;
```

## Error

ai-kit-illustrations-error

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-illustrations-error?file=src/App.tsx)

```tsx lines theme={null}
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";
import ErrorIllustration from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-error-light.svg";

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: primitive.size["800"],
      }}
    >
      <ErrorIllustration aria-hidden="true" height={200} />
    </div>
  );
}

export default App;
```

## Success

ai-kit-illustrations-success

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-illustrations-success?file=src/App.tsx)

```tsx lines theme={null}
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";
import Success from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-success-light.svg";

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: primitive.size["800"],
      }}
    >
      <Success aria-hidden="true" height={200} />
    </div>
  );
}

export default App;
```

## Success alt

ai-kit-illustrations-success-alt

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-illustrations-success-alt?file=src/App.tsx)

```tsx lines theme={null}
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";
import SuccessAlt from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-evergreen-success-light.svg";

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: primitive.size["800"],
      }}
    >
      <SuccessAlt aria-hidden="true" height={200} />
    </div>
  );
}

export default App;
```

## User cleared

ai-kit-illustrations-user-cleared

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-illustrations-user-cleared?file=src/App.tsx)

```tsx lines theme={null}
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";
import UserCleared from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-user-cleared-light.svg";

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: primitive.size["800"],
      }}
    >
      <UserCleared aria-hidden="true" height={200} />
    </div>
  );
}

export default App;
```

## No search results

ai-kit-illustrations-no-search-results

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-illustrations-no-search-results?file=src/App.tsx)

```tsx lines theme={null}
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";
import NoSearchResults from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-no-search-results-light.svg";

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: primitive.size["800"],
      }}
    >
      <NoSearchResults aria-hidden="true" height={200} />
    </div>
  );
}

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.