0
# Interactive Components
1

2
Dynamic components like carousels, accordions, dropdowns and collapsible content.
3

4
## Capabilities
5

6
### Accordion
7

8
Collapsible content component with multiple panels.
9

10
```typescript { .api }
11
/**
12
 * Accordion component for collapsible content
13
 * @param defaultActiveKey - Default active key(s)
14
 * @param activeKey - Controlled active key(s)
15
 * @param onSelect - Selection handler
16
 * @param flush - Flush variant
17
 */
18
function Accordion(props: AccordionProps): JSX.Element;
19

20
interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
21
  /** Default active key(s) */
22
  defaultActiveKey?: string | string[];
23
  /** Controlled active key(s) */
24
  activeKey?: string | string[];
25
  /** Selection handler */
26
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
27
  /** Flush variant */
28
  flush?: boolean;
29
  /** Allow multiple panels open */
30
  alwaysOpen?: boolean;
31
  /** Bootstrap CSS class prefix */
32
  bsPrefix?: string;
33
}
34
```
35

36
### AccordionItem
37

38
Individual accordion panel.
39

40
```typescript { .api }
41
/**
42
 * AccordionItem component for individual accordion panels
43
 * @param eventKey - Unique event key
44
 */
45
function AccordionItem(props: AccordionItemProps): JSX.Element;
46

47
interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
48
  /** Unique event key */
49
  eventKey: string;
50
  /** Bootstrap CSS class prefix */
51
  bsPrefix?: string;
52
}
53
```
54

55
### AccordionHeader
56

57
Header component for accordion items.
58

59
```typescript { .api }
60
/**
61
 * AccordionHeader component for accordion headers
62
 * @param onClick - Click handler
63
 */
64
function AccordionHeader(props: AccordionHeaderProps): JSX.Element;
65

66
interface AccordionHeaderProps extends React.HTMLAttributes<HTMLElement> {
67
  /** Click handler */
68
  onClick?: React.MouseEventHandler;
69
  /** Component used for the root node */
70
  as?: React.ElementType;
71
  /** Bootstrap CSS class prefix */
72
  bsPrefix?: string;
73
}
74
```
75

76
### AccordionBody
77

78
Body component for accordion items.
79

80
```typescript { .api }
81
/**
82
 * AccordionBody component for accordion bodies
83
 */
84
function AccordionBody(props: AccordionBodyProps): JSX.Element;
85

86
interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
87
  /** Component used for the root node */
88
  as?: React.ElementType;
89
  /** Bootstrap CSS class prefix */
90
  bsPrefix?: string;
91
}
92
```
93

94
### AccordionButton
95

96
Button component for accordion toggle functionality.
97

98
```typescript { .api }
99
/**
100
 * AccordionButton component for accordion toggle
101
 * @param onClick - Click handler
102
 */
103
function AccordionButton(props: AccordionButtonProps): JSX.Element;
104

105
interface AccordionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
106
  /** Click handler */
107
  onClick?: React.MouseEventHandler;
108
  /** Component used for the root node */
109
  as?: React.ElementType;
110
  /** Bootstrap CSS class prefix */
111
  bsPrefix?: string;
112
}
113

114
/**
115
 * Hook for accordion button functionality
116
 * @param eventKey - Event key for the accordion item
117
 * @returns Button props and handlers
118
 */
119
function useAccordionButton(eventKey: string, onClick?: React.MouseEventHandler): {
120
  onClick: React.MouseEventHandler;
121
};
122
```
123

124
**Accordion Usage Examples:**
125

126
```typescript
127
import { Accordion } from "react-bootstrap";
128

129
// Basic accordion
130
<Accordion defaultActiveKey="0">
131
  <Accordion.Item eventKey="0">
132
    <Accordion.Header>Accordion Item #1</Accordion.Header>
133
    <Accordion.Body>
134
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
135
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
136
    </Accordion.Body>
137
  </Accordion.Item>
138
  <Accordion.Item eventKey="1">
139
    <Accordion.Header>Accordion Item #2</Accordion.Header>
140
    <Accordion.Body>
141
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
142
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
143
    </Accordion.Body>
144
  </Accordion.Item>
145
</Accordion>
146

147
// Flush accordion (no borders)
148
<Accordion flush>
149
  <Accordion.Item eventKey="0">
150
    <Accordion.Header>Flush Accordion Item #1</Accordion.Header>
151
    <Accordion.Body>Content for flush accordion.</Accordion.Body>
152
  </Accordion.Item>
153
</Accordion>
154

155
// Always open (multiple panels can be open)
156
<Accordion alwaysOpen>
157
  <Accordion.Item eventKey="0">
158
    <Accordion.Header>Always Open Item #1</Accordion.Header>
159
    <Accordion.Body>This accordion can have multiple items open.</Accordion.Body>
160
  </Accordion.Item>
161
  <Accordion.Item eventKey="1">
162
    <Accordion.Header>Always Open Item #2</Accordion.Header>
163
    <Accordion.Body>Both items can be open simultaneously.</Accordion.Body>
164
  </Accordion.Item>
165
</Accordion>
166
```
167

168
### Carousel
169

170
Image/content carousel component with navigation controls.
171

172
```typescript { .api }
173
/**
174
 * Carousel component for rotating content
175
 * @param activeIndex - Active slide index
176
 * @param onSelect - Slide selection handler
177
 * @param controls - Show navigation controls
178
 * @param indicators - Show slide indicators
179
 * @param interval - Auto-advance interval
180
 * @param pause - Pause behavior
181
 * @param wrap - Wrap around behavior
182
 * @param fade - Fade transition
183
 * @param slide - Slide transition
184
 * @param touch - Touch support
185
 */
186
function Carousel(props: CarouselProps): JSX.Element;
187

188
interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
189
  /** Active slide index */
190
  activeIndex?: number;
191
  /** Slide selection handler */
192
  onSelect?: (selectedIndex: number, e?: any) => void;
193
  /** Show navigation controls */
194
  controls?: boolean;
195
  /** Show slide indicators */
196
  indicators?: boolean;
197
  /** Auto-advance interval (ms) */
198
  interval?: number | null;
199
  /** Pause behavior */
200
  pause?: "hover" | false;
201
  /** Wrap around behavior */
202
  wrap?: boolean;
203
  /** Fade transition */
204
  fade?: boolean;
205
  /** Slide transition */
206
  slide?: boolean;
207
  /** Touch support */
208
  touch?: boolean;
209
  /** Previous icon */
210
  prevIcon?: React.ReactNode;
211
  /** Previous label */
212
  prevLabel?: React.ReactNode;
213
  /** Next icon */
214
  nextIcon?: React.ReactNode;
215
  /** Next label */
216
  nextLabel?: React.ReactNode;
217
  /** Slide handler */
218
  onSlide?: (selectedIndex: number, direction: string) => void;
219
  /** Slid handler */
220
  onSlid?: (selectedIndex: number, direction: string) => void;
221
  /** Bootstrap CSS class prefix */
222
  bsPrefix?: string;
223
}
224
```
225

226
### CarouselItem
227

228
Individual carousel slide.
229

230
```typescript { .api }
231
/**
232
 * CarouselItem component for individual carousel slides
233
 * @param interval - Slide-specific interval
234
 */
235
function CarouselItem(props: CarouselItemProps): JSX.Element;
236

237
interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
238
  /** Slide-specific interval */
239
  interval?: number;
240
  /** Bootstrap CSS class prefix */
241
  bsPrefix?: string;
242
}
243
```
244

245
### CarouselCaption
246

247
Caption component for carousel slides.
248

249
```typescript { .api }
250
/**
251
 * CarouselCaption component for slide captions
252
 */
253
function CarouselCaption(props: CarouselCaptionProps): JSX.Element;
254

255
interface CarouselCaptionProps extends React.HTMLAttributes<HTMLDivElement> {
256
  /** Bootstrap CSS class prefix */
257
  bsPrefix?: string;
258
}
259
```
260

261
**Carousel Usage Examples:**
262

263
```typescript
264
import { Carousel } from "react-bootstrap";
265

266
// Basic carousel
267
<Carousel>
268
  <Carousel.Item>
269
    <img
270
      className="d-block w-100"
271
      src="holder.js/800x400?text=First slide&bg=373940"
272
      alt="First slide"
273
    />
274
    <Carousel.Caption>
275
      <h3>First slide label</h3>
276
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
277
    </Carousel.Caption>
278
  </Carousel.Item>
279
  <Carousel.Item>
280
    <img
281
      className="d-block w-100"
282
      src="holder.js/800x400?text=Second slide&bg=282c34"
283
      alt="Second slide"
284
    />
285
    <Carousel.Caption>
286
      <h3>Second slide label</h3>
287
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
288
    </Carousel.Caption>
289
  </Carousel.Item>
290
</Carousel>
291

292
// Controlled carousel
293
const [index, setIndex] = useState(0);
294

295
<Carousel activeIndex={index} onSelect={handleSelect}>
296
  <Carousel.Item>
297
    <img src="slide1.jpg" alt="Slide 1" />
298
  </Carousel.Item>
299
  <Carousel.Item>
300
    <img src="slide2.jpg" alt="Slide 2" />
301
  </Carousel.Item>
302
</Carousel>
303

304
// Fade transition
305
<Carousel fade>
306
  <Carousel.Item>
307
    <img src="slide1.jpg" alt="Slide 1" />
308
  </Carousel.Item>
309
  <Carousel.Item>
310
    <img src="slide2.jpg" alt="Slide 2" />
311
  </Carousel.Item>
312
</Carousel>
313
```
314

315
### Dropdown
316

317
Dropdown menu component with toggle and menu items.
318

319
```typescript { .api }
320
/**
321
 * Dropdown component for dropdown menus
322
 * @param show - Show/hide state
323
 * @param onToggle - Toggle handler
324
 * @param drop - Drop direction
325
 * @param align - Menu alignment
326
 * @param autoClose - Auto close behavior
327
 */
328
function Dropdown(props: DropdownProps): JSX.Element;
329

330
interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
331
  /** Show/hide state */
332
  show?: boolean;
333
  /** Toggle handler */
334
  onToggle?: (show: boolean, event: React.SyntheticEvent, source: { source: string }) => void;
335
  /** Drop direction */
336
  drop?: "up" | "down" | "start" | "end";
337
  /** Menu alignment */
338
  align?: "start" | "end" | { sm?: "start" | "end"; md?: "start" | "end"; lg?: "start" | "end"; xl?: "start" | "end"; xxl?: "start" | "end" };
339
  /** Auto close behavior */
340
  autoClose?: boolean | "inside" | "outside";
341
  /** Selection handler */
342
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
343
  /** Focus first item on show */
344
  focusFirstItemOnShow?: boolean;
345
  /** Navbar context */
346
  navbar?: boolean;
347
  /** Bootstrap CSS class prefix */
348
  bsPrefix?: string;
349
}
350
```
351

352
### DropdownToggle
353

354
Toggle button for dropdown menus.
355

356
```typescript { .api }
357
/**
358
 * DropdownToggle component for dropdown toggles
359
 * @param split - Split button variant
360
 * @param variant - Button variant
361
 * @param size - Button size
362
 * @param disabled - Disabled state
363
 */
364
function DropdownToggle(props: DropdownToggleProps): JSX.Element;
365

366
interface DropdownToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
367
  /** Split button variant */
368
  split?: boolean;
369
  /** Button variant */
370
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
371
  /** Button size */
372
  size?: "sm" | "lg";
373
  /** Disabled state */
374
  disabled?: boolean;
375
  /** Component used for the root node */
376
  as?: React.ElementType;
377
  /** Bootstrap CSS class prefix */
378
  bsPrefix?: string;
379
}
380
```
381

382
### DropdownMenu
383

384
Menu component for dropdown items.
385

386
```typescript { .api }
387
/**
388
 * DropdownMenu component for dropdown menus
389
 * @param align - Menu alignment
390
 * @param flip - Flip behavior
391
 * @param show - Show/hide state
392
 * @param renderOnMount - Render when mounted
393
 * @param popperConfig - Popper configuration
394
 */
395
function DropdownMenu(props: DropdownMenuProps): JSX.Element;
396

397
interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
398
  /** Menu alignment */
399
  align?: "start" | "end" | { sm?: "start" | "end"; md?: "start" | "end"; lg?: "start" | "end"; xl?: "start" | "end"; xxl?: "start" | "end" };
400
  /** Flip behavior */
401
  flip?: boolean;
402
  /** Show/hide state */
403
  show?: boolean;
404
  /** Render when mounted */
405
  renderOnMount?: boolean;
406
  /** Popper configuration */
407
  popperConfig?: any;
408
  /** Root close event */
409
  rootCloseEvent?: string;
410
  /** Component used for the root node */
411
  as?: React.ElementType;
412
  /** Bootstrap CSS class prefix */
413
  bsPrefix?: string;
414
}
415
```
416

417
### DropdownItem
418

419
Individual dropdown menu item.
420

421
```typescript { .api }
422
/**
423
 * DropdownItem component for dropdown items
424
 * @param active - Active state
425
 * @param disabled - Disabled state
426
 * @param eventKey - Event key
427
 * @param href - Link URL
428
 */
429
function DropdownItem(props: DropdownItemProps): JSX.Element;
430

431
interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
432
  /** Active state */
433
  active?: boolean;
434
  /** Disabled state */
435
  disabled?: boolean;
436
  /** Event key */
437
  eventKey?: string;
438
  /** Link URL */
439
  href?: string;
440
  /** Component used for the root node */
441
  as?: React.ElementType;
442
  /** Bootstrap CSS class prefix */
443
  bsPrefix?: string;
444
}
445
```
446

447
**Dropdown Usage Examples:**
448

449
```typescript
450
import { Dropdown, ButtonGroup } from "react-bootstrap";
451

452
// Basic dropdown
453
<Dropdown>
454
  <Dropdown.Toggle variant="success" id="dropdown-basic">
455
    Dropdown Button
456
  </Dropdown.Toggle>
457

458
  <Dropdown.Menu>
459
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
460
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
461
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
462
  </Dropdown.Menu>
463
</Dropdown>
464

465
// Split dropdown
466
<Dropdown as={ButtonGroup}>
467
  <Button variant="success">Split Button</Button>
468

469
  <Dropdown.Toggle split variant="success" id="dropdown-split-basic" />
470

471
  <Dropdown.Menu>
472
    <Dropdown.Item eventKey="1">Action</Dropdown.Item>
473
    <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
474
    <Dropdown.Item eventKey="3" active>
475
      Active Item
476
    </Dropdown.Item>
477
    <Dropdown.Divider />
478
    <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
479
  </Dropdown.Menu>
480
</Dropdown>
481

482
// Dropup
483
<Dropdown drop="up">
484
  <Dropdown.Toggle variant="secondary">
485
    Dropup
486
  </Dropdown.Toggle>
487
  <Dropdown.Menu>
488
    <Dropdown.Item href="#">Action</Dropdown.Item>
489
    <Dropdown.Item href="#">Another action</Dropdown.Item>
490
  </Dropdown.Menu>
491
</Dropdown>
492
```
493

494
### Collapse
495

496
Collapsible content component.
497

498
```typescript { .api }
499
/**
500
 * Collapse component for collapsible content
501
 * @param in - Show/hide state
502
 * @param mountOnEnter - Mount on enter
503
 * @param unmountOnExit - Unmount on exit
504
 * @param appear - Appear animation
505
 * @param timeout - Animation timeout
506
 * @param onEnter - Enter handler
507
 * @param onEntering - Entering handler
508
 * @param onEntered - Entered handler
509
 * @param onExit - Exit handler
510
 * @param onExiting - Exiting handler
511
 * @param onExited - Exited handler
512
 * @param dimension - Collapse dimension
513
 * @param getDimensionValue - Get dimension value
514
 */
515
function Collapse(props: CollapseProps): JSX.Element;
516

517
interface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {
518
  /** Show/hide state */
519
  in?: boolean;
520
  /** Mount on enter */
521
  mountOnEnter?: boolean;
522
  /** Unmount on exit */
523
  unmountOnExit?: boolean;
524
  /** Appear animation */
525
  appear?: boolean;
526
  /** Animation timeout */
527
  timeout?: number;
528
  /** Enter handler */
529
  onEnter?: (node: HTMLElement) => void;
530
  /** Entering handler */
531
  onEntering?: (node: HTMLElement) => void;
532
  /** Entered handler */
533
  onEntered?: (node: HTMLElement) => void;
534
  /** Exit handler */
535
  onExit?: (node: HTMLElement) => void;
536
  /** Exiting handler */
537
  onExiting?: (node: HTMLElement) => void;
538
  /** Exited handler */
539
  onExited?: (node: HTMLElement) => void;
540
  /** Collapse dimension */
541
  dimension?: "height" | "width" | (() => "height" | "width");
542
  /** Get dimension value */
543
  getDimensionValue?: (dimension: "height" | "width", element: HTMLElement) => number;
544
  /** Bootstrap CSS class prefix */
545
  bsPrefix?: string;
546
}
547
```
548

549
**Collapse Usage Examples:**
550

551
```typescript
552
import { Collapse, Button, Card } from "react-bootstrap";
553

554
function CollapseExample() {
555
  const [open, setOpen] = useState(false);
556

557
  return (
558
    <>
559
      <Button
560
        onClick={() => setOpen(!open)}
561
        aria-controls="example-collapse-text"
562
        aria-expanded={open}
563
      >
564
        Click to toggle
565
      </Button>
566
      <Collapse in={open}>
567
        <div id="example-collapse-text">
568
          <Card>
569
            <Card.Body>
570
              Some placeholder content for the collapse component.
571
            </Card.Body>
572
          </Card>
573
        </div>
574
      </Collapse>
575
    </>
576
  );
577
}
578
```
579

580
### Tabs
581

582
Tab navigation component with tab panels.
583

584
```typescript { .api }
585
/**
586
 * Tabs component for tabbed content
587
 * @param activeKey - Active tab key
588
 * @param defaultActiveKey - Default active tab key
589
 * @param onSelect - Tab selection handler
590
 * @param id - Unique identifier
591
 * @param mountOnEnter - Mount tab content on enter
592
 * @param unmountOnExit - Unmount tab content on exit
593
 * @param variant - Tab variant
594
 * @param fill - Fill available space
595
 * @param justify - Justify content
596
 */
597
function Tabs(props: TabsProps): JSX.Element;
598

599
interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
600
  /** Active tab key */
601
  activeKey?: string;
602
  /** Default active tab key */
603
  defaultActiveKey?: string;
604
  /** Tab selection handler */
605
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
606
  /** Unique identifier */
607
  id?: string;
608
  /** Mount tab content on enter */
609
  mountOnEnter?: boolean;
610
  /** Unmount tab content on exit */
611
  unmountOnExit?: boolean;
612
  /** Tab variant */
613
  variant?: "tabs" | "pills";
614
  /** Fill available space */
615
  fill?: boolean;
616
  /** Justify content */
617
  justify?: boolean;
618
  /** Tab transition */
619
  transition?: boolean | React.ComponentType;
620
  /** Bootstrap CSS class prefix */
621
  bsPrefix?: string;
622
}
623
```
624

625
### Tab
626

627
Individual tab component.
628

629
```typescript { .api }
630
/**
631
 * Tab component for individual tabs
632
 * @param eventKey - Unique event key
633
 * @param title - Tab title
634
 * @param disabled - Disabled state
635
 * @param tabClassName - Tab CSS class
636
 * @param tabAttrs - Tab attributes
637
 */
638
function Tab(props: TabProps): JSX.Element;
639

640
interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
641
  /** Unique event key */
642
  eventKey: string;
643
  /** Tab title */
644
  title: React.ReactNode;
645
  /** Disabled state */
646
  disabled?: boolean;
647
  /** Tab CSS class */
648
  tabClassName?: string;
649
  /** Tab attributes */
650
  tabAttrs?: any;
651
}
652
```
653

654
**Tabs Usage Examples:**
655

656
```typescript
657
import { Tabs, Tab } from "react-bootstrap";
658

659
// Basic tabs
660
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
661
  <Tab eventKey="home" title="Home">
662
    <div className="p-3">Home content</div>
663
  </Tab>
664
  <Tab eventKey="profile" title="Profile">
665
    <div className="p-3">Profile content</div>
666
  </Tab>
667
  <Tab eventKey="contact" title="Contact" disabled>
668
    <div className="p-3">Contact content</div>
669
  </Tab>
670
</Tabs>
671

672
// Controlled tabs
673
const [key, setKey] = useState('home');
674

675
<Tabs
676
  id="controlled-tab-example"
677
  activeKey={key}
678
  onSelect={(k) => setKey(k)}
679
>
680
  <Tab eventKey="home" title="Home">
681
    Home content
682
  </Tab>
683
  <Tab eventKey="profile" title="Profile">
684
    Profile content
685
  </Tab>
686
</Tabs>
687

688
// Pills variant
689
<Tabs variant="pills" defaultActiveKey="tab-1">
690
  <Tab eventKey="tab-1" title="Tab 1">
691
    Tab 1 content
692
  </Tab>
693
  <Tab eventKey="tab-2" title="Tab 2">
694
    Tab 2 content
695
  </Tab>
696
</Tabs>
697
```
698

699
### TabContainer
700

701
Container component for manually controlled tabs with separate navigation and content.
702

703
```typescript { .api }
704
/**
705
 * TabContainer component for controlled tab behavior
706
 * @param activeKey - Currently active tab key
707
 * @param defaultActiveKey - Default active tab key
708
 * @param onSelect - Tab selection handler
709
 * @param transition - Transition component for tab panes
710
 * @param id - Container ID
711
 * @param mountOnEnter - Mount pane on enter
712
 * @param unmountOnExit - Unmount pane on exit
713
 */
714
function TabContainer(props: TabContainerProps): JSX.Element;
715

716
interface TabContainerProps {
717
  /** Currently active tab key */
718
  activeKey?: string;
719
  /** Default active tab key */
720
  defaultActiveKey?: string;
721
  /** Tab selection handler */
722
  onSelect?: (eventKey: string | null, event?: React.SyntheticEvent) => void;
723
  /** Transition component for tab panes */
724
  transition?: boolean | React.ComponentType;
725
  /** Container ID */
726
  id?: string;
727
  /** Mount pane on enter transition */
728
  mountOnEnter?: boolean;
729
  /** Unmount pane on exit transition */
730
  unmountOnExit?: boolean;
731
  /** Child elements */
732
  children?: React.ReactNode;
733
}
734
```
735

736
### TabContent
737

738
Container for tab pane content.
739

740
```typescript { .api }
741
/**
742
 * TabContent component for tab pane container
743
 */
744
function TabContent(props: TabContentProps): JSX.Element;
745

746
interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
747
  /** Component used for the root node */
748
  as?: React.ElementType;
749
  /** Bootstrap CSS class prefix */
750
  bsPrefix?: string;
751
}
752
```
753

754
### TabPane
755

756
Individual tab pane with transition support.
757

758
```typescript { .api }
759
/**
760
 * TabPane component for individual tab content
761
 * @param eventKey - Tab identifier
762
 * @param active - Active state
763
 * @param transition - Transition component
764
 * @param mountOnEnter - Mount on enter transition
765
 * @param unmountOnExit - Unmount on exit transition
766
 * @param onEnter - Enter callback
767
 * @param onEntering - Entering callback
768
 * @param onEntered - Entered callback
769
 * @param onExit - Exit callback
770
 * @param onExiting - Exiting callback
771
 * @param onExited - Exited callback
772
 */
773
function TabPane(props: TabPaneProps): JSX.Element;
774

775
interface TabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
776
  /** Tab identifier */
777
  eventKey?: string;
778
  /** Active state */
779
  active?: boolean;
780
  /** Transition component */
781
  transition?: boolean | React.ComponentType;
782
  /** Mount on enter transition */
783
  mountOnEnter?: boolean;
784
  /** Unmount on exit transition */
785
  unmountOnExit?: boolean;
786
  /** Enter transition callback */
787
  onEnter?: (element: HTMLElement, isAppearing: boolean) => void;
788
  /** Entering transition callback */
789
  onEntering?: (element: HTMLElement, isAppearing: boolean) => void;
790
  /** Entered transition callback */
791
  onEntered?: (element: HTMLElement, isAppearing: boolean) => void;
792
  /** Exit transition callback */
793
  onExit?: (element: HTMLElement) => void;
794
  /** Exiting transition callback */
795
  onExiting?: (element: HTMLElement) => void;
796
  /** Exited transition callback */
797
  onExited?: (element: HTMLElement) => void;
798
  /** Component used for the root node */
799
  as?: React.ElementType;
800
  /** Bootstrap CSS class prefix */
801
  bsPrefix?: string;
802
}
803
```
804

805
**Manual Tab Control Examples:**
806

807
```typescript
808
import { TabContainer, Nav, TabContent, TabPane } from "react-bootstrap";
809

810
// Manual tab control with separate Nav and TabContent
811
<TabContainer id="left-tabs-example" defaultActiveKey="first">
812
  <Row>
813
    <Col sm={3}>
814
      <Nav variant="pills" className="flex-column">
815
        <Nav.Item>
816
          <Nav.Link eventKey="first">Tab 1</Nav.Link>
817
        </Nav.Item>
818
        <Nav.Item>
819
          <Nav.Link eventKey="second">Tab 2</Nav.Link>
820
        </Nav.Item>
821
      </Nav>
822
    </Col>
823
    <Col sm={9}>
824
      <TabContent>
825
        <TabPane eventKey="first">
826
          <p>First tab content</p>
827
        </TabPane>
828
        <TabPane eventKey="second">
829
          <p>Second tab content</p>
830
        </TabPane>
831
      </TabContent>
832
    </Col>
833
  </Row>
834
</TabContainer>
835

836
// Controlled with custom transition
837
<TabContainer
838
  activeKey={activeKey}
839
  onSelect={setActiveKey}
840
  transition={Fade}
841
  mountOnEnter
842
  unmountOnExit
843
>
844
  <Nav variant="tabs">
845
    <Nav.Item>
846
      <Nav.Link eventKey="home">Home</Nav.Link>
847
    </Nav.Item>
848
    <Nav.Item>
849
      <Nav.Link eventKey="profile">Profile</Nav.Link>
850
    </Nav.Item>
851
  </Nav>
852
  <TabContent>
853
    <TabPane eventKey="home">
854
      <h4>Home Content</h4>
855
    </TabPane>
856
    <TabPane eventKey="profile">
857
      <h4>Profile Content</h4>
858
    </TabPane>
859
  </TabContent>
860
</TabContainer>
861
```