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

# Empty states

> Example scenarios, guidance, and sample copy.

export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
  const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
  const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
  const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
  const [isLocalOverride, setIsLocalOverride] = useState(false);
  useEffect(() => {
    const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
    fetch(examplePath, {
      method: "HEAD"
    }).then(r => {
      if (r.ok) setIsLocalOverride(true);
    }).catch(() => {});
  }, [example]);
  const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
  if (screenshotOnly) {
    return <Frame className="flex flex-col">
        <div className="flex dark:hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#FFFFFF"
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>
        <div className="hidden dark:flex" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#141414"
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>
      </Frame>;
  }
  if (screenshot) {
    return <Frame className="flex flex-col -mb-2">
        <div className="flex dark:hidden bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>

        <div className="hidden dark:flex bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      background: "#141414",
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>

        <div className="flex justify-end items-center text-xs py-2 px-1 gap-4">
          {!showCodeProp ? <button className="inline-flex justify-end items-center text-gray-700 dark:text-gray-50 hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1 cursor-pointer" onClick={() => setShowCodeBlock(!showCodeBlock)} style={{
      appearance: "none"
    }}>
              <Icon icon="code" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
              <span>{showCodeBlock ? "Hide code" : "Show code"}</span>
            </button> : null}

          <a className="inline-flex justify-end items-center hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1" href={`${STACKBLITZ_BASE}/${example}?file=src/App.tsx`} target="_blank" rel="noreferrer">
            <Icon icon="bolt" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
            <span>StackBlitz demo</span>
          </a>
        </div>

        <div className="grid transition-[grid-template-rows] duration-300 ease-in-out overflow-auto overflow-y-hidden overflow-x-auto" style={showCodeBlock ? {
      gridTemplateRows: "1fr"
    } : {
      gridTemplateRows: "0fr"
    }}>
          <div style={{
      minHeight: 0,
      overflowX: "auto",
      overflowY: "hidden",
      marginBlockStart: "-1.25rem",
      marginBlockEnd: "-1.5rem"
    }}>
            {children}
          </div>
        </div>
      </Frame>;
  } else {
    return <div style={{
      display: "flex",
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px",
      resize: "vertical",
      overflow: "auto"
    }}>
        <iframe title={example} style={{
      flex: 1,
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px"
    }} src={`${STACKBLITZ_BASE}/${example}?embed=1&hideNavigation=1&hideExplorer=1&terminalHeight=0&file=src/App.tsx${clickToLoad ? "&ctl=1" : ""}${hideCodeInLiveCode ? "&view=preview" : ""}`} allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
      </div>;
  }
};

<Card title="Github mappings" icon="github" href="https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/4694638713/Utilities+Empty+State+Illustration+Mapping" />

## First Use Empty State

Use a first-use illustration when the user opens a feature for the first time and there is no data yet because no action has been taken.

<LiveCode example="illustrations-kit-trade-first-use" screenshot fullWidth>
  ```tsx lines theme={null}
  import type { ComponentType, SVGProps } from "react";
  import {
    AnvilProvider,
    Chip,
    Flex,
    Text,
    usePrefersColorScheme,
  } from "@servicetitan/anvil2";
  import ResPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-property-care-first-use-light.svg";
  import ResPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-property-care-first-use-dark.svg";
  import ResExteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-exteriors-first-use-light.svg";
  import ResExteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-exteriors-first-use-dark.svg";
  import ResMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-first-use-light.svg";
  import ResMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-first-use-dark.svg";
  import ResEmergencyComplianceLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-emergency-compliance-first-use-light.svg";
  import ResEmergencyComplianceDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-emergency-compliance-first-use-dark.svg";
  import ResInteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-interiors-first-use-light.svg";
  import ResInteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-interiors-first-use-dark.svg";
  import ComPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-first-use-light.svg";
  import ComPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-first-use-dark.svg";
  import ComExteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-first-use-light.svg";
  import ComExteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-first-use-dark.svg";
  import ComMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-first-use-light.svg";
  import ComMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-first-use-dark.svg";
  import ComEmergencyComplianceLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-first-use-light.svg";
  import ComEmergencyComplianceDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-first-use-dark.svg";
  import ComInteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-first-use-light.svg";
  import ComInteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-first-use-dark.svg";

  // Matches the Chip fills from Figma; Chip derives the border and text
  // colors from this background automatically via useAccessibleColor.
  const RESIDENTIAL_CHIP_COLOR = "#e0f2ff";
  const COMMERCIAL_CHIP_COLOR = "#f1edff";

  type Trade = {
    label: string;
    Light: ComponentType<SVGProps<SVGSVGElement>>;
    Dark: ComponentType<SVGProps<SVGSVGElement>>;
  };

  const RESIDENTIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ResPropertyCareLight,
      Dark: ResPropertyCareDark,
    },
    { label: "Exteriors", Light: ResExteriorsLight, Dark: ResExteriorsDark },
    { label: "Mechanical", Light: ResMechanicalLight, Dark: ResMechanicalDark },
    {
      label: "Emergency & Compliance",
      Light: ResEmergencyComplianceLight,
      Dark: ResEmergencyComplianceDark,
    },
    { label: "Interiors", Light: ResInteriorsLight, Dark: ResInteriorsDark },
  ];

  const COMMERCIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ComPropertyCareLight,
      Dark: ComPropertyCareDark,
    },
    { label: "Exteriors", Light: ComExteriorsLight, Dark: ComExteriorsDark },
    { label: "Mechanical", Light: ComMechanicalLight, Dark: ComMechanicalDark },
    {
      label: "Emergency & Compliance",
      Light: ComEmergencyComplianceLight,
      Dark: ComEmergencyComplianceDark,
    },
    { label: "Interiors", Light: ComInteriorsLight, Dark: ComInteriorsDark },
  ];

  function TradeRow({
    chipLabel,
    chipColor,
    trades,
    mode,
  }: {
    chipLabel: string;
    chipColor: string;
    trades: Trade[];
    mode: "light" | "dark";
  }) {
    return (
      <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
        <Chip label={chipLabel} size="small" color={chipColor} />
        <Flex gap={3} alignItems="flex-start">
          {trades.map(({ label, Light, Dark }) => {
            const Illustration = mode === "dark" ? Dark : Light;
            return (
              <Flex key={label} direction="column" alignItems="center" gap={2}>
                <div
                  style={{
                    height: 116,
                    width: 170,
                    display: "flex",
                    alignItems: "flex-end",
                    justifyContent: "center",
                  }}
                >
                  <Illustration
                    aria-hidden="true"
                    style={{
                      maxWidth: 170,
                      maxHeight: 116,
                      width: "auto",
                      height: "auto",
                    }}
                  />
                </div>
                <Text
                  subdued
                  style={{
                    fontSize: 10,
                    textTransform: "uppercase",
                    letterSpacing: "0.02em",
                  }}
                >
                  {label}
                </Text>
              </Flex>
            );
          })}
        </Flex>
      </Flex>
    );
  }

  function App() {
    const { mode } = usePrefersColorScheme();

    return (
      <AnvilProvider themeData={{ mode }}>
        <Flex direction="column" gap={6}>
          <TradeRow
            chipLabel="Residential"
            chipColor={RESIDENTIAL_CHIP_COLOR}
            trades={RESIDENTIAL_TRADES}
            mode={mode}
          />
          <TradeRow
            chipLabel="Commercial"
            chipColor={COMMERCIAL_CHIP_COLOR}
            trades={COMMERCIAL_TRADES}
            mode={mode}
          />
        </Flex>
      </AnvilProvider>
    );
  }

  export default App;
  ```
</LiveCode>

### Usage Guidance

**When to Use:** These illustrations are ideal for screens or workflows where the user is encountering a feature or tool for the first time, and no data is yet available because no actions have been taken.

**Example scenarios**

* A newly onboarded user views their job scheduling screen for the first time.
* A user opens a reporting dashboard that hasn't been configured or populated.

**Sample copy**

* **Header:** "Ready to hit the road?"
* **Body:** "Your shop is ready for action! Start by scheduling a job or adding your first task to see things come alive."

<Tip>
  Pair the illustration with a clear call-to-action such as "Add a Job" or
  "Create a Report".
</Tip>

## User Cleared Empty State

Display a user-cleared illustration when the user has completed a task or cleared every item from a workflow, so there is nothing left to show.

<LiveCode example="illustrations-kit-trade-user-cleared" screenshot fullWidth>
  ```tsx lines theme={null}
  import type { ComponentType, SVGProps } from "react";
  import {
    AnvilProvider,
    Chip,
    Flex,
    Text,
    usePrefersColorScheme,
  } from "@servicetitan/anvil2";
  import ResidentialLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-user-cleared-light.svg";
  import ResidentialDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-user-cleared-dark.svg";
  import ComPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-user-cleared-light.svg";
  import ComPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-user-cleared-dark.svg";
  import ComExteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-user-cleared-light.svg";
  import ComExteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-user-cleared-dark.svg";
  import ComMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-user-cleared-light.svg";
  import ComMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-user-cleared-dark.svg";
  import ComEmergencyComplianceLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-user-cleared-light.svg";
  import ComEmergencyComplianceDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-user-cleared-dark.svg";
  import ComInteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-user-cleared-light.svg";
  import ComInteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-user-cleared-dark.svg";

  // Matches the Chip fills from Figma; Chip derives the border and text
  // colors from this background automatically via useAccessibleColor.
  const RESIDENTIAL_CHIP_COLOR = "#e0f2ff";
  const COMMERCIAL_CHIP_COLOR = "#f1edff";

  type Trade = {
    label: string;
    Light: ComponentType<SVGProps<SVGSVGElement>>;
    Dark: ComponentType<SVGProps<SVGSVGElement>>;
  };

  const COMMERCIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ComPropertyCareLight,
      Dark: ComPropertyCareDark,
    },
    { label: "Exteriors", Light: ComExteriorsLight, Dark: ComExteriorsDark },
    { label: "Mechanical", Light: ComMechanicalLight, Dark: ComMechanicalDark },
    {
      label: "Emergency & Compliance",
      Light: ComEmergencyComplianceLight,
      Dark: ComEmergencyComplianceDark,
    },
    { label: "Interiors", Light: ComInteriorsLight, Dark: ComInteriorsDark },
  ];

  function IllustrationBox({
    Illustration,
  }: {
    Illustration: ComponentType<SVGProps<SVGSVGElement>>;
  }) {
    return (
      <div
        style={{
          height: 116,
          width: 170,
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
        }}
      >
        <Illustration
          aria-hidden="true"
          style={{ maxWidth: 170, maxHeight: 116, width: "auto", height: "auto" }}
        />
      </div>
    );
  }

  function TradeLabel({ children }: { children: string }) {
    return (
      <Text
        subdued
        style={{
          fontSize: 10,
          textTransform: "uppercase",
          letterSpacing: "0.02em",
          textAlign: "center",
        }}
      >
        {children}
      </Text>
    );
  }

  function App() {
    const { mode } = usePrefersColorScheme();

    const Residential = mode === "dark" ? ResidentialDark : ResidentialLight;

    return (
      <AnvilProvider themeData={{ mode }}>
        <Flex direction="column" gap={6}>
          <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
            <Chip
              label="Residential"
              size="small"
              color={RESIDENTIAL_CHIP_COLOR}
            />
            <Flex direction="column" alignItems="center" gap={2}>
              <IllustrationBox Illustration={Residential} />
              <TradeLabel>
                Property Care, Exteriors, Mechanical, Emergency & Compliance,
                Interiors
              </TradeLabel>
            </Flex>
          </Flex>
          <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
            <Chip label="Commercial" size="small" color={COMMERCIAL_CHIP_COLOR} />
            <Flex gap={3} alignItems="flex-start">
              {COMMERCIAL_TRADES.map(({ label, Light, Dark }) => {
                const Illustration = mode === "dark" ? Dark : Light;
                return (
                  <Flex
                    key={label}
                    direction="column"
                    alignItems="center"
                    gap={2}
                  >
                    <IllustrationBox Illustration={Illustration} />
                    <TradeLabel>{label}</TradeLabel>
                  </Flex>
                );
              })}
            </Flex>
          </Flex>
        </Flex>
      </AnvilProvider>
    );
  }

  export default App;
  ```
</LiveCode>

### Usage Guidance

**When to Use:** These illustrations are ideal for screens or workflows where the user has completed a task or cleared every item from a workflow, so there is nothing left to show.

**Example scenarios**

* An inbox for customer inquiries has been cleared
* A technician's checklist for the day is complete

**Sample copy**

* **Header:** "Nothing left on your plate!"
* **Body:** "You're all caught up. Time to enjoy a well-deserved coffee break."

<Tip>
  Use this illustration and copy as a light acknowledgment of the user's
  progress so the empty screen feels rewarding.
</Tip>

## Success State

Display a success illustration when the user completes a workflow or hits a significant milestone, especially after a complex or time-intensive task.

<LiveCode example="illustrations-kit-trade-success" screenshot fullWidth>
  ```tsx lines theme={null}
  import type { ComponentType, ReactNode, SVGProps } from "react";
  import {
    AnvilProvider,
    Chip,
    Flex,
    Text,
    usePrefersColorScheme,
  } from "@servicetitan/anvil2";
  import ResidentialLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-success-light.svg";
  import ResidentialDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-success-dark.svg";
  import CommercialLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-evergreen-success-light.svg";
  import CommercialDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-evergreen-success-dark.svg";

  // Matches the Chip fills from Figma; Chip derives the border and text
  // colors from this background automatically via useAccessibleColor.
  const RESIDENTIAL_CHIP_COLOR = "#e0f2ff";
  const COMMERCIAL_CHIP_COLOR = "#f1edff";

  const TRADES_LABEL =
    "Property Care, Exteriors, Mechanical, Emergency & Compliance, Interiors";

  function IllustrationBox({
    Illustration,
  }: {
    Illustration: ComponentType<SVGProps<SVGSVGElement>>;
  }) {
    return (
      <div
        style={{
          height: 116,
          width: 170,
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
        }}
      >
        <Illustration
          aria-hidden="true"
          style={{ maxWidth: 170, maxHeight: 116, width: "auto", height: "auto" }}
        />
      </div>
    );
  }

  function TradeLabel({ children }: { children: ReactNode }) {
    return (
      <Text
        subdued
        style={{
          fontSize: 10,
          textTransform: "uppercase",
          letterSpacing: "0.02em",
          textAlign: "center",
        }}
      >
        {children}
      </Text>
    );
  }

  function App() {
    const { mode } = usePrefersColorScheme();

    const Residential = mode === "dark" ? ResidentialDark : ResidentialLight;
    const Commercial = mode === "dark" ? CommercialDark : CommercialLight;

    return (
      <AnvilProvider themeData={{ mode }}>
        <Flex direction="column" gap={6}>
          <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
            <Chip
              label="Residential"
              size="small"
              color={RESIDENTIAL_CHIP_COLOR}
            />
            <Flex direction="column" alignItems="center" gap={2}>
              <IllustrationBox Illustration={Residential} />
              <TradeLabel>{TRADES_LABEL}</TradeLabel>
            </Flex>
          </Flex>
          <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
            <Chip label="Commercial" size="small" color={COMMERCIAL_CHIP_COLOR} />
            <Flex direction="column" alignItems="center" gap={2}>
              <IllustrationBox Illustration={Commercial} />
              <TradeLabel>{TRADES_LABEL}</TradeLabel>
            </Flex>
          </Flex>
        </Flex>
      </AnvilProvider>
    );
  }

  export default App;
  ```
</LiveCode>

### Usage Guidance

**When to Use:** Display this illustration when a user successfully completes a workflow or achieves a significant milestone, especially if the task was complex or time-intensive.

**Example scenarios**

* Successfully generating a large customer report
* Completing setup for a new product feature

**Sample copy**

* **Header:** "Toolbox triumph!"
* **Body:** "You nailed it! Your task is complete, and your toolbox is ready for the next project."

<Tip>
  Keep the copy celebratory so it rewards the effort and reinforces a positive
  feeling about the feature.
</Tip>

## Error State

<LiveCode example="illustrations-kit-trade-error" screenshot fullWidth>
  ```tsx lines theme={null}
  import type { ComponentType, SVGProps } from "react";
  import {
    AnvilProvider,
    Chip,
    Flex,
    Text,
    usePrefersColorScheme,
  } from "@servicetitan/anvil2";
  import ResPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-property-care-error-light.svg";
  import ResPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-property-care-error-dark.svg";
  import ResExteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-exteriors-error-light.svg";
  import ResExteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-exteriors-error-dark.svg";
  import ResMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-error-light.svg";
  import ResMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-error-dark.svg";
  import ResEmergencyComplianceLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-emergency-compliance-error-light.svg";
  import ResEmergencyComplianceDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-emergency-compliance-error-dark.svg";
  import ResInteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-interiors-error-light.svg";
  import ResInteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-interiors-error-dark.svg";
  import ComPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-error-light.svg";
  import ComPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-error-dark.svg";
  import ComExteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-error-light.svg";
  import ComExteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-error-dark.svg";
  import ComMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-error-light.svg";
  import ComMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-error-dark.svg";
  import ComEmergencyComplianceLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-error-light.svg";
  import ComEmergencyComplianceDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-error-dark.svg";
  import ComInteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-error-light.svg";
  import ComInteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-error-dark.svg";

  // Matches the Chip fills from Figma; Chip derives the border and text
  // colors from this background automatically via useAccessibleColor.
  const RESIDENTIAL_CHIP_COLOR = "#e0f2ff";
  const COMMERCIAL_CHIP_COLOR = "#f1edff";

  type Trade = {
    label: string;
    Light: ComponentType<SVGProps<SVGSVGElement>>;
    Dark: ComponentType<SVGProps<SVGSVGElement>>;
  };

  const RESIDENTIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ResPropertyCareLight,
      Dark: ResPropertyCareDark,
    },
    { label: "Exteriors", Light: ResExteriorsLight, Dark: ResExteriorsDark },
    { label: "Mechanical", Light: ResMechanicalLight, Dark: ResMechanicalDark },
    {
      label: "Emergency & Compliance",
      Light: ResEmergencyComplianceLight,
      Dark: ResEmergencyComplianceDark,
    },
    { label: "Interiors", Light: ResInteriorsLight, Dark: ResInteriorsDark },
  ];

  const COMMERCIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ComPropertyCareLight,
      Dark: ComPropertyCareDark,
    },
    { label: "Exteriors", Light: ComExteriorsLight, Dark: ComExteriorsDark },
    { label: "Mechanical", Light: ComMechanicalLight, Dark: ComMechanicalDark },
    {
      label: "Emergency & Compliance",
      Light: ComEmergencyComplianceLight,
      Dark: ComEmergencyComplianceDark,
    },
    { label: "Interiors", Light: ComInteriorsLight, Dark: ComInteriorsDark },
  ];

  function TradeRow({
    chipLabel,
    chipColor,
    trades,
    mode,
  }: {
    chipLabel: string;
    chipColor: string;
    trades: Trade[];
    mode: "light" | "dark";
  }) {
    return (
      <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
        <Chip label={chipLabel} size="small" color={chipColor} />
        <Flex gap={3} alignItems="flex-start">
          {trades.map(({ label, Light, Dark }) => {
            const Illustration = mode === "dark" ? Dark : Light;
            return (
              <Flex key={label} direction="column" alignItems="center" gap={2}>
                <div
                  style={{
                    height: 116,
                    width: 170,
                    display: "flex",
                    alignItems: "flex-end",
                    justifyContent: "center",
                  }}
                >
                  <Illustration
                    aria-hidden="true"
                    style={{
                      maxWidth: 170,
                      maxHeight: 116,
                      width: "auto",
                      height: "auto",
                    }}
                  />
                </div>
                <Text
                  subdued
                  style={{
                    fontSize: 10,
                    textTransform: "uppercase",
                    letterSpacing: "0.02em",
                  }}
                >
                  {label}
                </Text>
              </Flex>
            );
          })}
        </Flex>
      </Flex>
    );
  }

  function App() {
    const { mode } = usePrefersColorScheme();

    return (
      <AnvilProvider themeData={{ mode }}>
        <Flex direction="column" gap={6}>
          <TradeRow
            chipLabel="Residential"
            chipColor={RESIDENTIAL_CHIP_COLOR}
            trades={RESIDENTIAL_TRADES}
            mode={mode}
          />
          <TradeRow
            chipLabel="Commercial"
            chipColor={COMMERCIAL_CHIP_COLOR}
            trades={COMMERCIAL_TRADES}
            mode={mode}
          />
        </Flex>
      </AnvilProvider>
    );
  }

  export default App;
  ```
</LiveCode>

### Usage Guidance

**When to Use:** This illustration should appear when the user encounters an error that disrupts their workflow, such as a failed action or system issue.

**Example scenarios**

* An error occurs when submitting a customer invoice
* A scheduling conflict prevents a job from being assigned

**Sample copy**

* **Header:** "The truck hit a snag!"
* **Body:** "Something's not working quite right. Let's get this fixed so you can get back on the road."

<Tip>
  Include an actionable next step such as Retry or a link to support so the user
  can recover quickly.
</Tip>

## No Search Results State

<LiveCode example="illustrations-kit-trade-no-search-results" screenshot fullWidth>
  ```tsx lines theme={null}
  import type { ComponentType, SVGProps } from "react";
  import {
    AnvilProvider,
    Chip,
    Flex,
    Text,
    usePrefersColorScheme,
  } from "@servicetitan/anvil2";
  import ResPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-property-care-no-search-results-light.svg";
  import ResPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-property-care-no-search-results-dark.svg";
  import ResMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-no-search-results-light.svg";
  import ResMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-mechanical-no-search-results-dark.svg";
  import ResEvergreenLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-no-search-results-light.svg";
  import ResEvergreenDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-residential-evergreen-no-search-results-dark.svg";
  import ComPropertyCareLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-no-search-results-light.svg";
  import ComPropertyCareDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-property-care-no-search-results-dark.svg";
  import ComExteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-no-search-results-light.svg";
  import ComExteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-exteriors-no-search-results-dark.svg";
  import ComMechanicalLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-no-search-results-light.svg";
  import ComMechanicalDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-mechanical-no-search-results-dark.svg";
  import ComEmergencyComplianceLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-no-search-results-light.svg";
  import ComEmergencyComplianceDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-emergency-compliance-no-search-results-dark.svg";
  import ComInteriorsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-no-search-results-light.svg";
  import ComInteriorsDark from "@servicetitan/anvil2-illustrations/illustrations/empty-state-commercial-interiors-no-search-results-dark.svg";

  // Matches the Chip fills from Figma; Chip derives the border and text
  // colors from this background automatically via useAccessibleColor.
  const RESIDENTIAL_CHIP_COLOR = "#e0f2ff";
  const COMMERCIAL_CHIP_COLOR = "#f1edff";

  type Trade = {
    label: string;
    Light: ComponentType<SVGProps<SVGSVGElement>>;
    Dark: ComponentType<SVGProps<SVGSVGElement>>;
  };

  // Exteriors, Emergency & Compliance, and Interiors share the generic
  // residential no-search-results illustration in Figma.
  const RESIDENTIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ResPropertyCareLight,
      Dark: ResPropertyCareDark,
    },
    { label: "Mechanical", Light: ResMechanicalLight, Dark: ResMechanicalDark },
    {
      label: "Exteriors, Emergency & Compliance, Interiors",
      Light: ResEvergreenLight,
      Dark: ResEvergreenDark,
    },
  ];

  const COMMERCIAL_TRADES: Trade[] = [
    {
      label: "Property Care",
      Light: ComPropertyCareLight,
      Dark: ComPropertyCareDark,
    },
    { label: "Exteriors", Light: ComExteriorsLight, Dark: ComExteriorsDark },
    { label: "Mechanical", Light: ComMechanicalLight, Dark: ComMechanicalDark },
    {
      label: "Emergency & Compliance",
      Light: ComEmergencyComplianceLight,
      Dark: ComEmergencyComplianceDark,
    },
    { label: "Interiors", Light: ComInteriorsLight, Dark: ComInteriorsDark },
  ];

  function TradeRow({
    chipLabel,
    chipColor,
    trades,
    mode,
  }: {
    chipLabel: string;
    chipColor: string;
    trades: Trade[];
    mode: "light" | "dark";
  }) {
    return (
      <Flex direction="column" gap={3} style={{ width: "fit-content" }}>
        <Chip label={chipLabel} size="small" color={chipColor} />
        <Flex gap={3} alignItems="flex-start">
          {trades.map(({ label, Light, Dark }) => {
            const Illustration = mode === "dark" ? Dark : Light;
            return (
              <Flex key={label} direction="column" alignItems="center" gap={2}>
                <div
                  style={{
                    height: 116,
                    width: 170,
                    display: "flex",
                    alignItems: "flex-end",
                    justifyContent: "center",
                  }}
                >
                  <Illustration
                    aria-hidden="true"
                    style={{
                      maxWidth: 170,
                      maxHeight: 116,
                      width: "auto",
                      height: "auto",
                    }}
                  />
                </div>
                <Text
                  subdued
                  style={{
                    fontSize: 10,
                    textTransform: "uppercase",
                    letterSpacing: "0.02em",
                    textAlign: "center",
                  }}
                >
                  {label}
                </Text>
              </Flex>
            );
          })}
        </Flex>
      </Flex>
    );
  }

  function App() {
    const { mode } = usePrefersColorScheme();

    return (
      <AnvilProvider themeData={{ mode }}>
        <Flex direction="column" gap={6}>
          <TradeRow
            chipLabel="Residential"
            chipColor={RESIDENTIAL_CHIP_COLOR}
            trades={RESIDENTIAL_TRADES}
            mode={mode}
          />
          <TradeRow
            chipLabel="Commercial"
            chipColor={COMMERCIAL_CHIP_COLOR}
            trades={COMMERCIAL_TRADES}
            mode={mode}
          />
        </Flex>
      </AnvilProvider>
    );
  }

  export default App;
  ```
</LiveCode>

### Usage Guidance

**When to Use:** This illustration is appropriate when a user performs a search query that yields no results, signaling that they may need to refine their criteria.

**Example scenarios**

* Searching for a job or customer that does not exist
* Filtering for inventory items that are not available

**Sample copy**

* **Header:** "No bones found!"
* **Body:** "Your search didn't fetch any results. Try adjusting your filters or broadening your search terms."

<Tip>
  Pair the illustration with search tips or filter suggestions so the user can
  refine the query.
</Tip>

## General Recommendations for All Empty States

* **Tone:** Maintain a friendly, supportive tone in all copy. Playful language aligned with the illustration enhances user engagement and reduces frustration.
* **Actionable Steps:** Always include a call-to-action or recovery path, especially for first-use and error states, to guide the user forward.

<Card title="Empty state pattern guidance" icon="figma" href="https://anvil.servicetitan.com/docs/web/patterns/empty-states" />