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

# Kits

> Product teams can use these kits to build a wide range of experiences that extend the core Anvil2 library.

export const Hero = ({title, tagline, version, image, alt}) => {
  return <>
      <style jsx>{`
        .hero-container {
          width: 100%;
          height: 30vh;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          border-radius: 2rem;
          position: relative;
          padding-inline-start: 1rem;
          gap: 1rem;
        }

        .hero-text-container {
          z-index: 1;
          max-width: 50%;
        }

        .hero-image-container {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin: 0;
          }
        }

        .version-chip {
          padding: 0.15rem 0.75rem;
          border-radius: 1rem;
        }
      `}</style>
      <div className="hero-container">
        <div className="hero-text-container">
          <h2 className="fs-heading-xlarge m-0">{title}</h2>
          {tagline && <h3 className="m-0">{tagline}</h3>}
          {version && <p className="version-chip bg-primary-default c-on-primary fw-label">
              {version}
            </p>}
        </div>
        <div className="hero-image-container">
          <img noZoom className="hero-image" src={image} alt={alt} />
        </div>
      </div>
    </>;
};

<Hero title="Kits" image="https://mintcdn.com/servicetitan/OJtYZdkkR0RVT4XA/images/hero.png?fit=max&auto=format&n=OJtYZdkkR0RVT4XA&q=85&s=8b21ff3454d1b4ced8b027f58f36cb8c" alt="anvil2 kits, with anvil logo illustration" width="1960" height="1024" data-path="images/hero.png" />

## Browse kits

<Columns cols={2}>
  <Card title="AI Kit" icon="sparkles" href="/docs/kits/ai-kit">
    Design guidance and building blocks for building agentic AI experiences with the Anvil2 AI Kit.
  </Card>

  <Card title="Common" icon="desktop">
    Components and utilities for building common use cases in the ServiceTitan app monolith and MFEs.

    <Badge color="orange">Coming soon</Badge>
  </Card>

  <Card title="Charts" icon="chart-line" href="/docs/kits/charts">
    Themes and utilities for building data visualization experiences with amCharts 5.
  </Card>
</Columns>

***

## Connect with us

<Columns cols={2}>
  <Card title="Report an issue" icon="jira" href="https://servicetitan.atlassian.net/secure/CreateIssue.jspa?issuetype=1&pid=11329">
    Ran into a bug in the code or design? We use Jira to track outstanding
    issues with Anvil.
  </Card>

  <Card title="Suggest an idea" icon="lightbulb" href="https://servicetitan.atlassian.net/secure/CreateIssue.jspa?issuetype=11597&pid=11329">
    Have an idea for a component, pattern, or documentation? Submit your idea to
    Jira.
  </Card>

  <Card title="Get help on Slack" icon="slack" href="https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS">
    You can reach the Anvil team in the #ask-designsystem Slack channel.
  </Card>

  <Card title="View roadmap" icon="map" href="https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/2740813833/Roadmap+Key+Steps">
    View what is coming up this year for the design system.
  </Card>

  <Card title="Contribute to Anvil2" icon="handshake" href="https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/2054129026/Designer+Contribution+to+Anvil">
    Interested in contributing to Anvil? Read our contribution guide to learn
    more!
  </Card>
</Columns>