Component Showcase

helpbase ships 8 MDX components designed for help center content. Use them in any .mdx file without importing anything.

Callout

Highlight important information with four severity levels:

Note

This is a note callout. Use it for supplementary context.

Tip

This is a tip callout. Use it for best practices and shortcuts.

Warning

This is a warning callout. Use it for potential issues or breaking changes.

Danger

This is a danger callout. Use it for security warnings or destructive actions.

<Callout type="tip">
Your tip content here.
</Callout>

Steps

Numbered step-by-step instructions:

Create a new article

Add an .mdx file to the content/ directory with frontmatter.

Write your content

Use markdown and MDX components to write your article.

Preview locally

Run pnpm dev to see your changes instantly.

<Steps>
  <Step title="First step">
    Description of the first step.
  </Step>
  <Step title="Second step">
    Description of the second step.
  </Step>
</Steps>

Accordion

Collapsible content for FAQs and optional details:

Create a new subdirectory in content/ with a _category.json file containing the category title, description, icon, and sort order.

Yes. Add your component to lib/mdx-components.tsx and it becomes available in all MDX files without explicit imports.

<Accordion title="Your question here">
Answer content with **markdown** support.
</Accordion>

Tabs

Switch between alternative content views:

<Tabs>
  <Tab title="Option A">
    Content for option A.
  </Tab>
  <Tab title="Option B">
    Content for option B.
  </Tab>
</Tabs>

CardGroup

Navigation cards linking to related content:

Getting Started

Learn what helpbase is and how to set up your first project.

CLI Reference

Complete reference for all helpbase CLI commands.

<CardGroup cols={2}>
  <Card icon="sparkles" title="Card Title" href="/path">
    Card description.
  </Card>
</CardGroup>

CtaCard

A prominent call-to-action card:

Ready to build?Create your help center in under 5 minutes with create-helpbase.

<CtaCard
  title="Your CTA title"
  description="Description text."
  href="/path"
  linkText="Button label"
/>

Figure

Images with captions and proper formatting. Used in visual how-to articles generated with --screenshots:

<Figure src="./screenshot.png" alt="Dashboard overview" caption="The main dashboard after login." />

Note

Figure validates that image files exist on disk during helpbase audit. Missing images are flagged as errors.

Video

Embedded video content:

<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Getting started walkthrough" />

Warning

Video embeds are sanitized in the hosted tier. Only allowlisted domains (YouTube, Vimeo, Loom) are permitted.

Using components together

Components compose naturally. Here's a realistic example:

Tip

Combine Steps with Callouts inside steps for warnings, and Tabs for platform-specific instructions.

Choose your package manager

Start developing

Run the dev server and open your browser:

pnpm dev

Note

The dev server uses Turbopack for instant hot reload. Changes to MDX files appear immediately.