Component Showcase

This page is a living reference. Every component, callout, layout, and typography pattern that you can use in any doc article is demonstrated here in one place.

Callouts

Five callout flavors. Use them to surface context that would get lost in a paragraph.

Cards

Cards turn a list of links into a visual navigation grid. Each card supports an icon, description, and a destination URL.

Cards also work in 3-column grids:

Steps

Steps are the gold standard for tutorials. Each step gets an auto-numbered marker and a title.

Tabs

Tabs let you show the same concept in multiple contexts — language variants, platform differences, before/after — without duplicating prose.

superfunnel.track('lead_submitted', {
  email: 'user@example.com',
  funnel_id: 'funnel_abc123',
  value: 49.99,
})

import requests

requests.post('https://api.superfunnel.ai/v1/events', json={
    'event': 'lead_submitted',
    'api_key': 'YOUR_API_KEY',
    'properties': {
        'email': 'user@example.com',
        'funnel_id': 'funnel_abc123',
        'value': 49.99,
    }
})

curl -X POST https://api.superfunnel.ai/v1/events \
  -H "Content-Type: application/json" \
  -d '{
    "event": "lead_submitted",
    "api_key": "YOUR_API_KEY",
    "properties": {
      "email": "user@example.com",
      "funnel_id": "funnel_abc123",
      "value": 49.99
    }
  }'

import { SuperfunnelClient } from '@superfunnel/sdk'

const sf = new SuperfunnelClient({ apiKey: process.env.SUPERFUNNEL_API_KEY! })

await sf.track('lead_submitted', {
  email: 'user@example.com',
  funnelId: 'funnel_abc123',
  value: 49.99,
})

Accordions

Accordions work well for FAQs, reference material, or anything the reader may want to skip on first pass.

Code blocks

Shiki powers syntax highlighting with github-light / github-dark themes. Every common language works.

TypeScript

import { createHmac } from 'crypto'

export function verifyWebhook(
  payload: string,
  signature: string,
  secret: string
): boolean {
  const expected = createHmac('sha256', secret)
    .update(payload)
    .digest('hex')

  return Buffer.from(signature).equals(Buffer.from(expected))
}

SQL

SELECT
  f.id,
  f.name,
  COUNT(DISTINCT e.visitor_id) AS visitors,
  COUNT(DISTINCT CASE WHEN e.event = 'converted' THEN e.visitor_id END) AS conversions,
  ROUND(
    100.0 * COUNT(DISTINCT CASE WHEN e.event = 'converted' THEN e.visitor_id END)
          / NULLIF(COUNT(DISTINCT e.visitor_id), 0),
    2
  ) AS conversion_rate_pct
FROM funnels f
LEFT JOIN events e ON e.funnel_id = f.id
WHERE e.created_at >= NOW() - INTERVAL '30 days'
GROUP BY f.id, f.name
ORDER BY conversions DESC;

JSON

{
  "id": "evt_01HXQ7M3K9FZYR6D",
  "type": "lead.created",
  "created_at": "2024-01-15T14:30:00Z",
  "data": {
    "lead_id": "lead_abc123",
    "funnel_id": "funnel_xyz",
    "email": "jane@example.com",
    "name": "Jane Doe",
    "custom_fields": {
      "utm_source": "google",
      "utm_campaign": "brand-search"
    }
  }
}

Bash

# Deploy a new page variant via CLI
sf pages deploy \
  --funnel "high-intent-finance" \
  --variant "challenger-headline" \
  --traffic 20 \
  --env production

Tables

Tables are best for reference material — parameters, feature comparisons, event schemas.

API parameters

Plan comparison

Typography

All standard Markdown formatting is available and styled consistently.

Bold text draws the eye to the most important word in a sentence. Use it sparingly — if everything is bold, nothing is.

Italic text is good for titles, terms being introduced, or gentle emphasis that doesn't need to shout.

Strikethrough is useful when documenting deprecated behavior or removed options you still want to mention for context.

Inline code is for any literal value the reader might type or copy — field names, API keys, CLI flags, file paths like /etc/hosts.

Combine them: use paddingRight to compensate for scrollbar reflow, and never set ~~overflow: visible~~ on a fixed element.

Simplicity is the ultimate sophistication. A landing page should have one job, one message, one button.

Unordered lists

• Conversion rate is the only metric that matters at launch
• Visitors and session duration are vanity metrics until you have real traffic
• Every element on the page is either helping or hurting conversion — nothing is neutral
  • Headlines carry ~80% of the persuasive weight
  • Social proof works best directly above the CTA
  • Form length is inversely correlated with conversion rate

Ordered lists

1. Define your conversion goal before writing a single word of copy
2. Build the minimal page that can test your core hypothesis
3. Send real traffic — synthetic data doesn't convert the same way
4. Read the session recordings before touching the heatmaps
5. Change one thing at a time and give variants enough traffic to reach significance

Links

Internal links use Next.js routing: read the Integrations guide.

External links open in a new tab automatically: Superfunnel app.

Frame

Frame adds a polished border and rounded corners to any content — great for screenshots, diagrams, or UI demos.

YouTube

Embed any YouTube video by ID. The embed is fully responsive.

Nested components

Components compose. Here's a Step that contains a callout, a code block, and a card — exactly as you'd write a real integration tutorial.

npm install @superfunnel/sdk

pnpm add @superfunnel/sdk

yarn add @superfunnel/sdk

import { SuperfunnelClient } from '@superfunnel/sdk'

export const sf = new SuperfunnelClient({
  apiKey: process.env.SUPERFUNNEL_API_KEY!,
  // Optional: enable LangSmith tracing
  langsmithProject: 'superfunnel-prod',
})

await sf.track('checkout_started', {
  email: session.user.email,
  value: cart.total,
  currency: 'USD',
  items: cart.items.map(i => i.sku),
})

Horizontal rules

Use --- to visually separate major sections. Three hyphens on their own line.

That covers every component available today. If you need something that isn't here — a diagram renderer, a live code playground, a comparison slider — open a request and we'll build it.