Content components

This page details frequently used code components you can add to articles. There are additional components demonstrated at posthog.com/example-components.

Call to action

Adding <ArrayCTA /> to any article will add this simple CTA:

Ready to find out more?

Try PostHog - free Schedule a demo

Don't overuse it, but it's useful for high intent pages, like comparisons.

Comparison tables

We used to create custom HTML tables, but we now have an easier to use component that allows us to change the styling of any table.

To use, first import the componenents by adding this code near the start, right after the frontmatter:

JSX

import { ComparisonTable } from 'components/ComparisonTable'
import { ComparisonRow } from 'components/ComparisonTable/row'

Then, customize the code below to fit your needs.

JSX

<ComparisonTable column1="Company name 1" column2="Company name 2">
  <ComparisonHeader category="Optional header row" />
  <ComparisonRow column1={true} column2="Text" feature="Feature name" description="Feature description" />
</ComparisonTable>

In ComparisonRow:

Values for column1 and column2 can be: {true} | {false} | "Text string"
feature is required but description can be omitted (only if not using that column for the entire table)

Here's what a comparison table looks like:

	PostHog	LogRocket
Self-serve Free to try, no mandatory sales calls	✔	✔
Session replay Watch real users use your product; diagnose bugs	✔	✔
Heatmaps See where users click and interact	✔	✔
Product analytics Custom trends, funnels, paths, and retention analysis	✔	✔
Autocapture Capture events without manual instrumentation	✔	✔
Group analytics Track metrics at the account or company level	✔	✖
A/B testing Test changes and analyze their impact	✔	✖
Performance monitoring Track web vitals, server usage, and network performance.	✔	✔
Error monitoring Capture exceptions and failures automatically	✖	✔
Issue management Score issues, triage, monitor app health	✖	✔
Alerting Set alerts on metric thresholds or anomalies	✖	✔
Open source Build your own apps and contribute code	✔	✖

Important: You can only use the table components in mdx files – an extension to Markdown that lets you use JSX code in a markdown file.

Captions

You can add captions below images using the following code:

<Caption>Add you caption copy here</Caption>

Here's an example of what it looks like:

PostHog webshare pricing experiment

Adding the 'Buy Now' call to action and adjusting the text enabled Webshare to boost conversion by 26%

Quotation

You can add a styled quote component using the following code:

JSX

<BorderWrapper>
<Quote
    imageSource="/images/customers/utku.jpg"
    size="md"
    name="Utku Zihnioglu"
    title="Founder & CEO, Webshare "
    quote={`“We saw PostHog, and saw that it does everything that we needed, and had all these syncing capabilities too. We just knew right away that it was the right tool for us. We started using all of its capabilities.”`}
/>
</BorderWrapper>

It looks like this:

“We saw PostHog, and saw that it does everything that we needed, and had all these syncing capabilities too. We just knew right away that it was the right tool for us. We started using all of its capabilities.”
Utku ZihniogluFounder & CEO, Webshare

We mainly use them in customer stories and some product pages.

Details

The combination of <details> and <summary> components enables you to add a collapsible section to your page. Useful for FAQs or details not relevant to the main content.

HTML

<details>
<summary>Can I specify some events to be identified and others to be anonymous for the same users?</summary>

Not if you already identified them. Once a user is identified, all _future_ events for that user are associated with their person profile and are captured as identified events.
</details>

Tabs

Tabs enable you to display different content in a single section. We often use them to show different code examples for different languages, like in installation pages.

To use them:

Import the Tab component.
Set up Tab.Group, Tab.List, and Tab.Panel for each tab you want to display. The tabs prop in Tab.Group should be an array of strings, one for each tab. This enables you to link to each tab by its name.
Add the content for each tab in the Tab.Panel components. You should use snippets for readability, maintainability, and to avoid duplication, but you can use multiple snippets in a single tab.

For example, here's how we set up the tabs for the error tracking installation page:

JSX

import Tab from "components/Tab"
import WebInstall from '../integrate/_snippets/install-web.mdx'
import JSWebErrorTracking from './_snippets/web-install-error-tracking.mdx'
import PythonInstall from '../integrate/_snippets/install-python.mdx'
import PythonErrorTracking from './_snippets/python-install-error-tracking.mdx'
import NextJSErrorTracking from './_snippets/nextjs-install-error-tracking.mdx'
import UploadSourceMaps from './_snippets/upload-source-maps.mdx'
import UploadSourceMapsSteps from './_snippets/upload-source-maps-steps.mdx'

Error tracking enables you to track, investigate, and resolve exceptions your customers face. Getting this working requires installing PostHog:

<!-- prettier-ignore -->
<Tab.Group tabs={['Web', 'Next.js', 'Python']}>
    <Tab.List>
      <Tab>Web</Tab>
      <Tab>Next.js</Tab>
      <Tab>Python</Tab>
    </Tab.List>
    <Tab.Panels>
        <Tab.Panel>
          <WebInstall />
          <JSWebErrorTracking />
          <UploadSourceMaps />
          <UploadSourceMapsSteps />
        </Tab.Panel>
        <Tab.Panel>
          <NextJSErrorTracking />
        </Tab.Panel>
        <Tab.Panel>
          <PythonInstall />
          <PythonErrorTracking />
        </Tab.Panel>
    </Tab.Panels>
</Tab.Group>

Call to action

Comparison tables

Captions

Quotation

Details

Tabs

Questions? Ask Max AI.

Community questions

Was this page useful?

Demand gen

Ian Vanagas

Cory Watilo