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

# Board Templates

export const BoardTemplates = ({templates}) => {
  const MP_PURPLE = "rgb(139 92 246)";
  const BORDER_RADIUS = 14;
  const CARD_W = 296;
  const CARD_H = 319;
  const IMAGE_H = 160;
  const IMAGE_W = 280;
  const styles = {
    grid: {
      display: "grid",
      gap: 20,
      gridTemplateColumns: "repeat(auto-fit, minmax(296px, 1fr))",
      justifyContent: "center",
      marginTop: 32
    },
    card: {
      position: "relative",
      width: CARD_W,
      height: CARD_H,
      borderRadius: BORDER_RADIUS,
      overflow: "hidden",
      border: `2px solid var(--sgt-border)`,
      boxShadow: "0 10px 30px var(--sgt-shadow)",
      transition: "transform .25s ease, box-shadow .25s ease, background .3s ease, color .3s ease"
    },
    dogEar: {
      position: "absolute",
      right: 10,
      top: 10,
      width: 22,
      height: 22,
      background: "var(--sgt-dogear)",
      clipPath: "polygon(0 0, 100% 0, 100% 100%)",
      boxShadow: "0 0 0 2px rgba(0,0,0,.15) inset",
      zIndex: 5,
      pointerEvents: "none"
    },
    mediaWrap: {
      position: "absolute",
      top: 18,
      height: IMAGE_H,
      width: IMAGE_W,
      marginLeft: 16,
      marginRight: -16,
      borderTopLeftRadius: 8,
      borderBottomLeftRadius: 8,
      overflow: "hidden",
      background: "var(--sgt-media-bg)",
      zIndex: 1
    },
    mediaImg: {
      width: "100%",
      height: "100%",
      objectFit: "cover",
      objectPosition: "left top",
      display: "block"
    },
    bottom: {
      position: "absolute",
      top: IMAGE_H + 22,
      left: 0,
      right: 0,
      bottom: 0,
      padding: "12px 18px 22px",
      zIndex: 3
    },
    title: {
      fontSize: 21,
      fontWeight: 700,
      lineHeight: 1.1,
      margin: 0,
      color: "var(--sgt-title)"
    },
    blurb: {
      marginTop: 4,
      fontSize: 14,
      lineHeight: 1.3,
      color: "var(--sgt-blurb)",
      opacity: 0.85
    },
    clickable: {
      display: "block",
      width: "100%",
      height: "100%",
      background: "transparent",
      border: 0,
      padding: 0,
      cursor: "pointer",
      textAlign: "inherit"
    }
  };
  const CardView = ({t}) => {
    const handleOpen = () => window.open(t.previewUrl, "_blank", "noopener,noreferrer");
    const customBgStyle = t.bg ? {
      background: t.bg,
      "--sgt-title": "#ffffff",
      "--sgt-blurb": "rgba(255,255,255,0.9)",
      "--sgt-dogear": MP_PURPLE
    } : {};
    return <div style={{
      ...styles.card,
      ...customBgStyle
    }} className="sgt-card">
        <button type="button" style={styles.clickable} className="sgt-click" onClick={handleOpen}>
          <div style={styles.dogEar} aria-hidden />
          <div style={styles.mediaWrap}>
            <img noZoom src={t.img} alt="" style={styles.mediaImg} loading="lazy" />
          </div>
          <div style={styles.bottom}>
            <h3 style={styles.title}>{t.title}</h3>
            <div style={styles.blurb}>{t.description}</div>
          </div>
        </button>
      </div>;
  };
  return <>
      <div style={styles.grid}>
        {templates.map((t, i) => <CardView key={i} t={t} />)}
      </div>

      <style>{`
      :root {
        --sgt-card-bg: #0a0a0b;
        --sgt-title: #ffffff;
        --sgt-blurb: rgba(255, 255, 255, 0.85);
        --sgt-border: ${MP_PURPLE};
        --sgt-media-bg: #111111;
        --sgt-dogear: ${MP_PURPLE};
        --sgt-shadow: rgba(0, 0, 0, 0.4);
      }
      @media (prefers-color-scheme: light) {
        :root, html.light, html[class*='light'], [data-theme='light'] {
          --sgt-card-bg: #ffffff;
          --sgt-title: #111111;
          --sgt-blurb: #333333;
          --sgt-border: ${MP_PURPLE};
          --sgt-media-bg: #f3f4f6;
          --sgt-dogear: ${MP_PURPLE};
          --sgt-shadow: rgba(139, 92, 246, 0.12);
        }
      }
      html.light, html[class*='light'], [data-theme='light'] {
        --sgt-card-bg: #ffffff;
        --sgt-title: #111111;
        --sgt-blurb: #333333;
        --sgt-border: ${MP_PURPLE};
        --sgt-media-bg: #f3f4f6;
        --sgt-dogear: ${MP_PURPLE};
        --sgt-shadow: rgba(139, 92, 246, 0.12);
      }
      .sgt-card {
        background: var(--sgt-card-bg);
        color: var(--sgt-title);
        border-color: var(--sgt-border);
        box-shadow: 0 10px 30px var(--sgt-shadow);
      }
      .sgt-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(139, 92, 246, 0.25);
      }
      .sgt-card:focus-within {
        outline: 2px solid ${MP_PURPLE};
        outline-offset: 2px;
      }
      .sgt-click:focus-visible {
        outline: 2px solid ${MP_PURPLE};
        outline-offset: 3px;
        border-radius: 10px;
      }
      @media (min-width: 1280px) {
        .sgt-card h3 { font-size: 22px; }
        .sgt-card p { font-size: 14px; }
      }
    `}</style>
    </>;
};

export const COLORS = {
  indigo: '#15003F',
  teal: '#003229',
  maroon: '#33001F',
  brown: '#3F1A0D'
};

Explore curated Board templates designed to solve common product questions. Click any card below to launch a live, interactive demo in a new tab.

<div style={{ textAlign: 'center', marginTop: '28px' }}>
  <a
    href="https://mixpanel.com/project/?show-template-selector=true"
    target="_blank"
    className="sgt-cta"
    style={{
  display: 'inline-flex',
  alignItems: 'center',
  gap: '8px',
  fontWeight: 600,
  fontSize: '15px',
  padding: '10px 14px',
  borderRadius: '10px',
  border: '1px solid rgb(139, 92, 246)',
  color: 'var(--sgt-title)',
  background: 'var(--sgt-card-bg)',
  textDecoration: 'none',
  boxShadow: '0 4px 16px rgba(0,0,0,.12)',
  transition: 'transform .2s ease, box-shadow .2s ease, background .2s ease',
}}
  >
    Ready to build? Create a Board
    <span aria-hidden>→</span>
  </a>
</div>

<style jsx global>
  {`
    /* CTA interactions reuse component look & feel */
    .sgt-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(139, 92, 246, 0.18);
      background: rgba(139, 92, 246, 0.08);
    }
    .sgt-cta:focus-visible {
      outline: 2px solid rgb(139, 92, 246);
      outline-offset: 3px;
      border-radius: 10px;
    }
    `}
</style>

<div
  style={{
maxWidth: '720px',
margin: '32px auto 0',
textAlign: 'center',
padding: '0 20px'
}}
>
  Templates are pre-built dashboards designed around a specific use case or industry.
  Instead of starting from a blank canvas, you start with a proven framework
  built on industry best practices that you can adapt to your needs.
</div>

### Essential Boards

Foundational views to monitor product health, user retention, and core growth metrics at a glance.

<BoardTemplates
  templates={[
{
  title: 'Company KPIs',
  bg: COLORS.indigo,
  description: "Measure product health across engagement, retention, and growth in one unified dashboard.",
  img: '/images/templates/CompanyKPIs_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/QLBHa24vdYuK2MJLiNUA1S'
},
{
  title: 'Feature Launch',
  bg: COLORS.teal,
  description: "Understand if your new feature is being adopted, retained, and impacting your core product experience.",
  img: '/images/templates/FeatureLaunch_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/5dbqyToAtFMaDJVJNzUeuG'
},
{
  title: 'Web Analytics',
  bg: COLORS.maroon,
  description: "Get a complete view of your website's performance with essential user, session, and page-level metrics.",
  img: '/images/templates/WebAnalytics_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/BkaDwovdEpEcMJp33R6sah'
},
{
  title: 'Marketing KPIs',
  bg: COLORS.brown,
  description: "Connect campaign activity to business outcomes across the full marketing funnel.",
  img: '/images/templates/MarketingKPIs_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/MKDgQSoYBZciN4AGgY7Mgh'
},
{
  title: 'Lifecycle Analysis',
  bg: COLORS.indigo,
  description: "See what's driving your active users by segmenting them into new, retained, resurrected, and dormant cohorts.",
  img: '/images/templates/LifecycleAnalysis_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/CEngFwLvPa5zvTSLvFTHNH'
},
]}
/>

### Industry-Specific Boards

Custom-built frameworks optimized for E-commerce, SaaS, and Finance workflows.

<BoardTemplates
  templates={[
{
  title: 'Ecommerce',
  bg: COLORS.teal,
  description: "Track revenue, analyze purchases, optimize conversions, and identify your best acquisition channels.",
  img: '/images/templates/Ecommerce_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/2cv24kB3k5n9reXr9bSJKU'
},
{
  title: 'AI Company',
  bg: COLORS.maroon,
  description: "Track AI agent engagement, cost efficiency, response performance, and user feedback.",
  img: '/images/templates/AICompany_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/NaKPyubj6EuA4oV75taqrq'
},
{
  title: 'SaaS Business KPIs',
  bg: COLORS.brown,
  description: "Understand your MRR trends, what's driving month-over-month revenue changes, and where churn is concentrated.",
  img: '/images/templates/SaaSBusinessKPIs_Preview.webp',
  previewUrl: 'https://mixpanel.com/p/8R2b9DRvnZfrNXYVqNxFLH'
}
]}
/>

<hr style={{ opacity: 0.1, margin: '40px 0' }} />

### Board Template FAQs

<AccordionGroup>
  <Accordion title="How do I use these templates in my own project?">
    The tiles above are **interactive previews** designed for exploration. To use a template with your own data, navigate to your Mixpanel project and choose one of two paths:

    * **The Template Selector:** Click the [Ready to build? Create a Board →](https://mixpanel.com/project/?show-template-selector=true) button to launch the configuration wizard.
    * **From a New Board:** Create a new Board (via **+ Create New** > **Board**) and select a framework from the **Start from a Template** section.
  </Accordion>

  <Accordion title="Can I customize a template after it's created?">
    Yes. Think of a template as a starting point, not a fixed structure. You can add reports, change conversion window settings, or adjust event properties to match your specific tracking schema.
  </Accordion>

  <Accordion title="Are templates free to use?">
    Yes. Every template is available to all Mixpanel users, including those on the Free plan.
  </Accordion>
</AccordionGroup>