Complete Interactive Components Library

Explore all 11 powerful interactive components that transform your documentation from static to dynamic! Each component is production-ready and fully customizable.

Component Categories

Learning & Education

• Interactive Quiz - Test knowledge with quizzes
• Progress Tracker - Track learning progress

Code & Development

• Interactive Code Editor - Live code execution
• Terminal Simulator - CLI demonstrations
• Interactive Tabs - Multi-language examples

Data & Information

• Searchable Table - Sortable data tables
• Live Search - Instant search filtering
• Interactive Accordion - Collapsible sections

API & Integration

• API Simulator - Interactive API testing

Visual & Media

• Image Comparison - Before/after comparisons
• Interactive Callout - Styled alerts & notifications

---

Interactive Quiz

Test user knowledge with multiple-choice questions, instant feedback, and progress tracking.

Test Your Tech Docs Knowledge

Question 1 of 4

What does API stand for?

Usage

import InteractiveQuiz from '@site/src/components/InteractiveQuiz';

<InteractiveQuiz 
  title="Quiz Title"
  questions={[
    {
      question: 'Question text?',
      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
      correctAnswer: 0,
      explanation: 'Why this is correct...'
    }
  ]}
/>

---

Terminal Simulator

Demonstrate CLI commands with a realistic terminal interface.

$ Git Tutorial

Welcome! Learn Git commands in this interactive terminal. Type 'help' to see available commands.

$

💡 Tip: Use ↑/↓ arrows for command history, Ctrl+L to clear

Usage

import TerminalSimulator from '@site/src/components/TerminalSimulator';

<TerminalSimulator 
  title="$ Terminal"
  commands={{
    'ls': () => 'file1.txt file2.txt',
    'pwd': () => '/home/user'
  }}
/>

---

Image Comparison

Before/after image comparison with an interactive slider.

After

Before

‹

›

Usage

import ImageComparison from '@site/src/components/ImageComparison';

<ImageComparison 
  beforeImage="/img/before.jpg"
  afterImage="/img/after.jpg"
  beforeLabel="Original"
  afterLabel="Improved"
/>

---

Searchable Table

Interactive data table with search, sort, and pagination.

🔍

Component⇅	Category⇅	Complexity⇅	Best For⇅
InteractiveQuiz	Education	Medium	Testing knowledge
TerminalSimulator	Development	Medium	CLI demos
ImageComparison	Visual	Simple	Before/after
SearchableTable	Data	Medium	Data display
LiveSearch	Data	Simple	Filtering content

Page 1 of 3(11 results)

Usage

import SearchableTable from '@site/src/components/SearchableTable';

<SearchableTable 
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'value', label: 'Value' }
  ]}
  data={[
    { name: 'Item 1', value: '100' },
    { name: 'Item 2', value: '200' }
  ]}
/>

---

Live Search

Instant search with filtering and category tags.

🔍

6 results

Filters:

Interactive Quiz

Create engaging quizzes to test user knowledge with instant feedback.

Education

Terminal Simulator

Demonstrate CLI commands in a realistic terminal environment.

Development

Code Editor

Live JavaScript code editor with instant execution and output.

Development

API Simulator

Interactive API endpoint testing with request/response simulation.

Integration

Progress Tracker

Visual progress tracking for tutorials and multi-step guides.

Education

Image Comparison

Before/after image slider for visual comparisons.

Visual

Usage

import LiveSearch from '@site/src/components/LiveSearch';

<LiveSearch 
  items={[
    { name: 'Item 1', description: '...', category: 'Type A' },
    { name: 'Item 2', description: '...', category: 'Type B' }
  ]}
  searchFields={['name', 'description']}
/>

---

Interactive Callout

Styled alerts, tips, warnings, and notifications.

ℹ️Information

This is an informational message that provides helpful context or details.

✅Success

Great job! The operation completed successfully. Everything is working as expected.

⚠️Warning

Proceed with caution. This action may have important implications that you should consider.

🚫Danger

Critical alert! This is a serious issue that requires immediate attention.

💡Pro Tip

Here's a useful tip that can help you work more efficiently and effectively.

📝Note

Please note this important information for future reference.

Individual Usage

💡Pro Tip

You can nest any content inside callouts, including bold text, inline code, and even other components!

Usage

import InteractiveCallout from '@site/src/components/InteractiveCallout';

<InteractiveCallout type="warning" title="Important" dismissible={true}>
  Your custom message here...
</InteractiveCallout>

// Types: info, success, warning, danger, tip, note

---

Previously Created Components

For the first 5 components, see our main interactive components page:

• Interactive Code Editor - Live JavaScript execution
• Interactive Tabs - Tabbed content organization
• Interactive Accordion - Collapsible FAQ sections
• API Simulator - API request testing
• Progress Tracker - Tutorial progress tracking

---

Complete Component List

Component	Category	Complexity	Best Use Case
Interactive Quiz	Education		Testing knowledge, assessments
Progress Tracker	Education		Tutorial completion tracking
Code Editor	Development		Live coding demonstrations
Terminal Simulator	Development		CLI command tutorials
Interactive Tabs	Navigation		Multi-language code samples
Accordion	Navigation		FAQs, collapsible sections
API Simulator	Integration		API documentation, testing
Searchable Table	Data		Structured data display
Live Search	Data		Content filtering, discovery
Image Comparison	Visual		Before/after comparisons
Interactive Callout	Visual		Alerts, tips, warnings

---

Getting Started

1. Pick a component from the list above
2. Copy the import statement from the usage example
3. Paste into your MDX file at the top
4. Customize the props to fit your needs
5. Preview with npm start

Best Practices

• Use components sparingly - don't overwhelm pages
• Provide meaningful defaults and examples
• Test on mobile devices for responsiveness
• Combine components for rich experiences
• Keep content accessible with proper labels

Resources

• Quick Start Guide
• MDX Features Reference
• Markdown Features

---

You Now Have 11 Interactive Components!

Transform your documentation from static to spectacular.

Fully Responsive Accessible Customizable Production Ready