react-thinking-panel

react-thinking-panel

A React component that replicates the Gemini Deep Research thinking panel style with expandable sections and source links.

Features

• 📍 Timeline Design - Vertical line with dot markers for flow visualization
• 🎨 CSS Variables - Fully customizable colors via CSS custom properties
• 🌙 Dark Mode - Built-in dark mode support (auto or manual)
• 🔧 Flexible Icons - Built-in icons or custom React nodes
• 📦 TypeScript - Full type definitions included
• 🪶 Lightweight - No dependencies (peer dependency on React only)

Installation

npm install react-thinking-panel
# or
yarn add react-thinking-panel
# or
pnpm add react-thinking-panel

Quick Start

import { ThinkingPanel } from 'react-thinking-panel';
import 'react-thinking-panel/styles.css';

function App() {
  const [expanded, setExpanded] = useState(true);

  return (
    <ThinkingPanel
      title="思路"
      expanded={expanded}
      onToggle={() => setExpanded(!expanded)}
      sections={[
        {
          icon: 'sparkle',
          title: 'Analysis',
          content: 'Analyzing the problem...'
        },
        {
          icon: 'brain',
          title: 'Deep Thinking',
          content: ['First paragraph.', 'Second paragraph.']
        }
      ]}
    />
  );
}

API Reference

ThinkingPanelProps

Prop	Type	Default	Description
title	string	'思路'	Panel header title
titleIcon	ReactNode	-	Custom icon before title
expanded	boolean	true	Whether panel is expanded
onToggle	() => void	-	Toggle callback
sections	ThinkingSection[]	required	Thinking sections
researching	ResearchingSection	-	Source links section
className	string	-	Container class
headerClassName	string	-	Header class
contentClassName	string	-	Content area class
darkMode	boolean	-	Force dark mode
style	CSSProperties	-	Inline styles

ThinkingSection

Prop	Type	Description
title	string	Section title
content	string | string[]	Paragraph(s) content
icon	'sparkle' | 'search' | 'brain' | 'bulb' | string	Built-in or emoji icon
iconNode	ReactNode	Custom icon (overrides icon)
className	string	Section class

ResearchingSection

Prop	Type	Description
title	string	Section title
icon	'google' | 'search' | string	Built-in or emoji icon
iconNode	ReactNode	Custom icon
links	SourceLink[]	Source links
className	string	Section class

SourceLink

Prop	Type	Description
domain	string	Domain name (e.g., "github.com")
title	string	Link title
url	string	Full URL
icon	string	Custom favicon URL

Customization

CSS Variables

Override these CSS custom properties to customize colors:

:root {
  /* Light Mode */
  --tp-bg: #ffffff;
  --tp-border: #e5e7eb;
  --tp-title-color: #374151;
  --tp-section-icon-color: #f59e0b;
  --tp-paragraph-color: #4b5563;
  
  /* Timeline */
  --tp-timeline-line-color: #e5e7eb;
  --tp-timeline-dot-color: #3b82f6;
  --tp-timeline-dot-size: 8px;
  --tp-timeline-line-width: 2px;
  /* ... see styles.css for all variables */
}

Dark Mode

Auto (via media query):

@media (prefers-color-scheme: dark) {
  :root { /* dark colors */ }
}

Manual:

<ThinkingPanel darkMode={true} ... />

Or apply .tp-dark class to a parent element.

Custom Icons

import { FaRobot } from 'react-icons/fa';

<ThinkingPanel
  sections={[
    {
      title: 'Custom Icon',
      content: 'Using react-icons',
      iconNode: <FaRobot size={16} color="#4285F4" />
    }
  ]}
/>

Example with Researching Section

<ThinkingPanel
  title="Deep Research"
  expanded={expanded}
  onToggle={() => setExpanded(!expanded)}
  sections={[
    { icon: 'sparkle', title: 'Analysis', content: '...' }
  ]}
  researching={{
    title: 'Researching websites',
    icon: 'google',
    links: [
      { domain: 'github.com', title: 'Repository', url: 'https://github.com/...' },
      { domain: 'arxiv.org', title: 'Paper', url: 'https://arxiv.org/...' }
    ]
  }}
/>

License

MIT