Skip to main content

​
Common Examples

​
Basic Usage

Default Atlas branding:
import { AtlasHeader } from "@servicetitan/ext-atlas";

function DefaultHeader() {
  return <AtlasHeader />;
}

​
Custom Branding

Use custom icon and assistant name:
import { AtlasHeader } from "@servicetitan/ext-atlas";
import CustomLogo from "./custom-logo.svg";

function CustomHeader() {
  return (
    <AtlasHeader
      svgIcon={CustomLogo}
      assistant="Custom Assistant"
    />
  );
}

​
With Custom Styling

Apply custom CSS class:
import { AtlasHeader } from "@servicetitan/ext-atlas";

function StyledHeader() {
  return (
    <AtlasHeader
      assistant="Atlas"
      className="custom-header-class"
    />
  );
}
Last modified on February 12, 2026