react-thinking-panel

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

!npm
!license

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

``bash
npm install react-thinking-panel


or

yarn add react-thinking-panel

or

pnpm add react-thinking-panel
`

Quick Start

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

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

return (
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

$3

| 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 |

$3

| 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 |

$3

| 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 |

$3

| 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

$3

Override these CSS custom properties to customize colors:

`css
: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 /
}
`

$3

Auto (via media query):
`css
@media (prefers-color-scheme: dark) {
:root { / dark colors / }
}
`

Manual:
`tsx

`

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

$3

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

sections={[
{
title: 'Custom Icon',
content: 'Using react-icons',
iconNode:
}
]}
/>
`

Example with Researching Section

`tsx
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