Components Overview

Trellis Docs includes several reusable React components you can import and use in your MDX (Markdown with JSX, a format that lets you use React components inside Markdown files) files.

Included components

Component	Location	Description
DocCardList	`components/custom/doc-card-list.tsx`	Renders a grid of cards linking to other doc pages, from sidebar or explicit items
DocCard	`components/custom/doc-card.tsx`	Single card linking to a doc page
Glossary	`components/custom/glossary.tsx`	Renders a searchable, alphabetically sorted glossary from a JSON data file
FaqTableOfContents	`components/custom/faq-table-of-contents.tsx`	Renders a searchable FAQ question list from the FAQ index
Feedback	`components/custom/feedback.tsx`	Embeddable feedback widget for collecting page-level feedback
Tooltip	`components/docs/tooltip.tsx`	Inline tooltip that reveals a definition or description on hover
FlippingCard	`components/custom/flipping-card.tsx`	Interactive flip cards with quiz/option selection support
Search	`components/docs/search/search-dialog.tsx`	Search UI with dialog, powered by Fuse.js (Cmd+K)

Using components in MDX

Import any component at the top of your MDX file:

---
title: My Page
---

import { Glossary } from '@/components/custom/glossary';

## Glossary

<Glossary />

The @/ alias resolves to your project root directory.

Search

The search component renders a search icon that opens a dialog with instant search results. You typically don't need to import this directly — it's accessible via Cmd+K (Mac) or Ctrl+K (Windows/Linux).

Adds a hover tooltip to any inline text. Useful for defining acronyms, technical terms, or jargon without interrupting the reading flow. The trigger text is shown with a dashed underline; hovering reveals the tooltip below.

The team agreed on new <Tooltip content="A target or goal for the performance or quality of a service.">SLOs</Tooltip> for the quarter.

Result: The team agreed on new SLOsA target or goal for the performance or quality of a service. for the quarter.

Props

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	The inline trigger text (visible on the page)
`content`	`string`	Yes	The tooltip text shown on hover

Tips

Keep tooltip content short — one or two sentences. For longer definitions, use the Glossary component instead.
Tooltips are CSS-only (no JavaScript) and work in static export.
The tooltip automatically adapts to light and dark mode via design tokens.

FlippingCard

Interactive quiz cards that flip to reveal multiple-choice questions with instant feedback. The component is globally registered — no import needed.

<FlippingCard data={[
  {
    byline: "TOPIC",
    title: "Card Title",
    description: "Brief description.",
    frontContent: ["Additional detail."],
    checkYourKnowledge: {
      question: "Your question here?",
      options: ["Option A", "Option B"],
      correctAnswer: 0,
      explanations: [
        { text: "A is correct.", isCorrect: true },
        { text: "B is not the best choice.", isCorrect: false }
      ]
    }
  }
]} />

See the FlippingCard documentation for the full props reference and multi-card examples.