0
# Styling System
1

2
Flexible styling system supporting multiple className formats, default CSS classes, and comprehensive customization options.
3

4
## Core Imports
5

6
```javascript
7
import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
8
import "react-tabs/style/react-tabs.css"; // Default styles
9
```
10

11
## Capabilities
12

13
### Default CSS Classes
14

15
Complete set of default CSS classes for immediate styling without configuration.
16

17
```typescript { .api }
18
/**
19
 * Default CSS classes applied automatically
20
 */
21
interface DefaultCSSClasses {
22
  /** Main container class */
23
  'react-tabs': string;
24
  /** Tab list container class */
25
  'react-tabs__tab-list': string;
26
  /** Individual tab class */
27
  'react-tabs__tab': string;
28
  /** Selected tab modifier */
29
  'react-tabs__tab--selected': string;
30
  /** Disabled tab modifier */
31
  'react-tabs__tab--disabled': string;
32
  /** Tab panel class */
33
  'react-tabs__tab-panel': string;
34
  /** Selected panel modifier */
35
  'react-tabs__tab-panel--selected': string;
36
}
37
```
38

39
**Default Styles Usage:**
40

41
```javascript
42
// Import default CSS
43
import "react-tabs/style/react-tabs.css";
44

45
// Basic usage gets default styling
46
<Tabs>
47
  <TabList>
48
    <Tab>Tab 1</Tab>
49
    <Tab>Tab 2</Tab>
50
  </TabList>
51
  <TabPanel>Content 1</TabPanel>
52
  <TabPanel>Content 2</TabPanel>
53
</Tabs>
54
```
55

56
**Default CSS Structure:**
57

58
```css
59
.react-tabs {
60
  -webkit-tap-highlight-color: transparent;
61
}
62

63
.react-tabs__tab-list {
64
  border-bottom: 1px solid #aaa;
65
  margin: 0 0 10px;
66
  padding: 0;
67
}
68

69
.react-tabs__tab {
70
  display: inline-block;
71
  border: 1px solid transparent;
72
  border-bottom: none;
73
  bottom: -1px;
74
  position: relative;
75
  list-style: none;
76
  padding: 6px 12px;
77
  cursor: pointer;
78
}
79

80
.react-tabs__tab--selected {
81
  background: #fff;
82
  border-color: #aaa;
83
  color: black;
84
  border-radius: 5px 5px 0 0;
85
}
86

87
.react-tabs__tab--disabled {
88
  color: GrayText;
89
  cursor: default;
90
}
91

92
.react-tabs__tab:focus {
93
  outline: none;
94
}
95

96
.react-tabs__tab:focus:after {
97
  content: '';
98
  position: absolute;
99
  height: 5px;
100
  left: -4px;
101
  right: -4px;
102
  bottom: -5px;
103
  background: #fff;
104
}
105

106
.react-tabs__tab-panel {
107
  display: none;
108
}
109

110
.react-tabs__tab-panel--selected {
111
  display: block;
112
}
113
```
114

115
### Flexible ClassName Props
116

117
Support for multiple className formats including strings, arrays, and objects using clsx library.
118

119
```typescript { .api }
120
/**
121
 * Flexible className type supporting multiple formats
122
 */
123
type ClassNameProp = string | string[] | { [name: string]: boolean };
124

125
interface StyleProps {
126
  /** Main container class names */
127
  className?: ClassNameProp;
128
}
129

130
/**
131
 * Examples of valid className values:
132
 * - "my-tabs" (string)
133
 * - ["my-tabs", "horizontal"] (array)
134
 * - { "my-tabs": true, "dark": isDark } (object)
135
 * - ["my-tabs", { "dark": isDark }] (mixed)
136
 */
137
```
138

139
**ClassName Format Examples:**
140

141
```javascript
142
// String format
143
<Tabs className="my-custom-tabs">
144
  <TabList className="my-tab-list">
145
    <Tab className="my-tab">Tab 1</Tab>
146
    <Tab className="my-tab">Tab 2</Tab>
147
  </TabList>
148
  <TabPanel className="my-panel">Content 1</TabPanel>
149
  <TabPanel className="my-panel">Content 2</TabPanel>
150
</Tabs>
151

152
// Array format
153
<Tabs className={["tabs", "horizontal", "shadow"]}>
154
  <TabList className={["tab-list", "nav"]}>
155
    <Tab className={["tab", "nav-item"]}>Tab 1</Tab>
156
  </TabList>
157
  <TabPanel className={["panel", "content"]}>Content 1</TabPanel>
158
</Tabs>
159

160
// Object format (conditional classes)
161
<Tabs className={{ 
162
  "tabs": true, 
163
  "tabs--dark": isDarkMode,
164
  "tabs--vertical": isVertical 
165
}}>
166
  <TabList className={{
167
    "tab-list": true,
168
    "tab-list--compact": isCompact
169
  }}>
170
    <Tab className={{
171
      "tab": true,
172
      "tab--active": isActive,
173
      "tab--disabled": isDisabled
174
    }}>
175
      Tab 1
176
    </Tab>
177
  </TabList>
178
</Tabs>
179

180
// Mixed array and object format
181
<Tabs className={[
182
  "tabs", 
183
  "tabs--primary",
184
  { "tabs--loading": isLoading }
185
]}>
186
  {/* components */}
187
</Tabs>
188
```
189

190
### State-Specific Styling
191

192
Dedicated className props for different component states with automatic application.
193

194
```typescript { .api }
195
interface TabsStyleProps {
196
  /** CSS class for selected tabs */
197
  selectedTabClassName?: string;
198
  /** CSS class for selected panels */
199
  selectedTabPanelClassName?: string;
200
  /** CSS class for disabled tabs */
201
  disabledTabClassName?: string;
202
}
203

204
interface TabStyleProps {
205
  /** CSS class when tab is selected */
206
  selectedClassName?: string;
207
  /** CSS class when tab is disabled */
208
  disabledClassName?: string;
209
}
210

211
interface TabPanelStyleProps {
212
  /** CSS class when panel is selected */
213
  selectedClassName?: string;
214
}
215
```
216

217
**State-Specific Styling Examples:**
218

219
```javascript
220
// Global state classes on Tabs component
221
<Tabs 
222
  selectedTabClassName="tab-active"
223
  selectedTabPanelClassName="panel-active"
224
  disabledTabClassName="tab-disabled"
225
>
226
  <TabList>
227
    <Tab>Active Tab</Tab>
228
    <Tab disabled>Disabled Tab</Tab>
229
  </TabList>
230
  <TabPanel>Active Panel</TabPanel>
231
  <TabPanel>Panel 2</TabPanel>
232
</Tabs>
233

234
// Individual component state classes
235
<Tabs>
236
  <TabList>
237
    <Tab 
238
      selectedClassName="my-selected-tab"
239
      disabledClassName="my-disabled-tab"
240
    >
241
      Tab 1
242
    </Tab>
243
    <Tab>Tab 2</Tab>
244
  </TabList>
245
  <TabPanel selectedClassName="my-active-panel">
246
    Content 1
247
  </TabPanel>
248
  <TabPanel>Content 2</TabPanel>
249
</Tabs>
250

251
// CSS-in-JS with dynamic classes
252
const tabStyles = {
253
  selected: 'bg-blue-500 text-white',
254
  default: 'bg-gray-200 text-gray-700',
255
  disabled: 'bg-gray-100 text-gray-400 cursor-not-allowed'
256
};
257

258
<Tabs 
259
  selectedTabClassName={tabStyles.selected}
260
  disabledTabClassName={tabStyles.disabled}
261
>
262
  <TabList>
263
    <Tab className={tabStyles.default}>Tab 1</Tab>
264
    <Tab className={tabStyles.default} disabled>Tab 2</Tab>
265
  </TabList>
266
  <TabPanel>Content 1</TabPanel>
267
  <TabPanel>Content 2</TabPanel>
268
</Tabs>
269
```
270

271
### Custom Styling Patterns
272

273
Advanced styling patterns for different design systems and frameworks.
274

275
**CSS Modules Pattern:**
276

277
```javascript
278
import styles from './Tabs.module.css';
279

280
<Tabs className={styles.tabs}>
281
  <TabList className={styles.tabList}>
282
    <Tab className={styles.tab}>Tab 1</Tab>
283
    <Tab className={styles.tab}>Tab 2</Tab>
284
  </TabList>
285
  <TabPanel className={styles.panel}>Content 1</TabPanel>
286
  <TabPanel className={styles.panel}>Content 2</TabPanel>
287
</Tabs>
288
```
289

290
**Styled Components Pattern:**
291

292
```javascript
293
import styled from 'styled-components';
294

295
const StyledTabs = styled(Tabs)`
296
  background: white;
297
  border-radius: 8px;
298
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
299
`;
300

301
const StyledTabList = styled(TabList)`
302
  border-bottom: 2px solid #e1e5e9;
303
  margin-bottom: 16px;
304
`;
305

306
const StyledTab = styled(Tab)`
307
  padding: 12px 24px;
308
  cursor: pointer;
309
  border: none;
310
  background: transparent;
311
  
312
  &.react-tabs__tab--selected {
313
    border-bottom: 2px solid #007bff;
314
    color: #007bff;
315
  }
316
`;
317

318
<StyledTabs>
319
  <StyledTabList>
320
    <StyledTab>Tab 1</StyledTab>
321
    <StyledTab>Tab 2</StyledTab>
322
  </StyledTabList>
323
  <TabPanel>Content 1</TabPanel>
324
  <TabPanel>Content 2</TabPanel>
325
</StyledTabs>
326
```
327

328
**Tailwind CSS Pattern:**
329

330
```javascript
331
<Tabs className="bg-white rounded-lg shadow-lg">
332
  <TabList className="flex border-b border-gray-200">
333
    <Tab className="px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
334
      Tab 1
335
    </Tab>
336
    <Tab className="ml-8 px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
337
      Tab 2
338
    </Tab>
339
  </TabList>
340
  <TabPanel className="p-6">
341
    <div className="text-gray-900">Content 1</div>
342
  </TabPanel>
343
  <TabPanel className="p-6">
344
    <div className="text-gray-900">Content 2</div>
345
  </TabPanel>
346
</Tabs>
347
```
348

349
### Theme Integration
350

351
Integration patterns with popular theming systems and design libraries.
352

353
**Material-UI Integration:**
354

355
```javascript
356
import { makeStyles } from '@material-ui/core/styles';
357

358
const useStyles = makeStyles((theme) => ({
359
  tabs: {
360
    backgroundColor: theme.palette.background.paper,
361
    borderRadius: theme.shape.borderRadius,
362
  },
363
  tabList: {
364
    borderBottom: `1px solid ${theme.palette.divider}`,
365
  },
366
  tab: {
367
    padding: theme.spacing(1, 2),
368
    minHeight: theme.spacing(6),
369
    '&.react-tabs__tab--selected': {
370
      color: theme.palette.primary.main,
371
      borderBottomColor: theme.palette.primary.main,
372
    },
373
  },
374
}));
375

376
function MaterialTabs() {
377
  const classes = useStyles();
378
  
379
  return (
380
    <Tabs className={classes.tabs}>
381
      <TabList className={classes.tabList}>
382
        <Tab className={classes.tab}>Tab 1</Tab>
383
        <Tab className={classes.tab}>Tab 2</Tab>
384
      </TabList>
385
      <TabPanel>Content 1</TabPanel>
386
      <TabPanel>Content 2</TabPanel>
387
    </Tabs>
388
  );
389
}
390
```
391

392
**Chakra UI Integration:**
393

394
```javascript
395
import { Box, useColorModeValue } from '@chakra-ui/react';
396

397
function ChakraTabs() {
398
  const bg = useColorModeValue('white', 'gray.800');
399
  const borderColor = useColorModeValue('gray.200', 'gray.600');
400
  
401
  return (
402
    <Tabs className="chakra-tabs">
403
      <TabList 
404
        className="chakra-tab-list"
405
        style={{
406
          background: bg,
407
          borderBottom: `1px solid ${borderColor}`
408
        }}
409
      >
410
        <Tab>Tab 1</Tab>
411
        <Tab>Tab 2</Tab>
412
      </TabList>
413
      <TabPanel>
414
        <Box p={4}>Content 1</Box>
415
      </TabPanel>
416
      <TabPanel>
417
        <Box p={4}>Content 2</Box>
418
      </TabPanel>
419
    </Tabs>
420
  );
421
}
422
```
423

424
### Responsive Styling
425

426
Responsive design patterns for mobile and tablet compatibility.
427

428
```javascript
429
// Responsive breakpoint classes
430
<Tabs className="tabs-responsive">
431
  <TabList className="tab-list-mobile sm:tab-list-desktop">
432
    <Tab className="tab-mobile sm:tab-desktop">Tab 1</Tab>
433
    <Tab className="tab-mobile sm:tab-desktop">Tab 2</Tab>
434
  </TabList>
435
  <TabPanel className="panel-mobile sm:panel-desktop">
436
    Content 1
437
  </TabPanel>
438
  <TabPanel className="panel-mobile sm:panel-desktop">
439
    Content 2
440
  </TabPanel>
441
</Tabs>
442
```
443

444
**Responsive CSS Example:**
445

446
```css
447
.tabs-responsive {
448
  width: 100%;
449
}
450

451
.tab-list-mobile {
452
  display: flex;
453
  overflow-x: auto;
454
  -webkit-overflow-scrolling: touch;
455
}
456

457
.tab-mobile {
458
  flex-shrink: 0;
459
  padding: 8px 12px;
460
  font-size: 14px;
461
}
462

463
@media (min-width: 640px) {
464
  .tab-list-desktop {
465
    overflow-x: visible;
466
  }
467
  
468
  .tab-desktop {
469
    padding: 12px 24px;
470
    font-size: 16px;
471
  }
472
}
473

474
.panel-mobile {
475
  padding: 16px;
476
}
477

478
@media (min-width: 640px) {
479
  .panel-desktop {
480
    padding: 24px;
481
  }
482
}
483
```
484

485
### Animation Support
486

487
CSS transition and animation integration for smooth tab switching.
488

489
```javascript
490
// CSS transitions
491
<Tabs className="animated-tabs">
492
  <TabList className="animated-tab-list">
493
    <Tab className="animated-tab">Tab 1</Tab>
494
    <Tab className="animated-tab">Tab 2</Tab>
495
  </TabList>
496
  <TabPanel className="animated-panel">Content 1</TabPanel>
497
  <TabPanel className="animated-panel">Content 2</TabPanel>
498
</Tabs>
499
```
500

501
**Animation CSS Example:**
502

503
```css
504
.animated-tab {
505
  transition: all 0.3s ease;
506
  opacity: 0.7;
507
  transform: translateY(2px);
508
}
509

510
.animated-tab.react-tabs__tab--selected {
511
  opacity: 1;
512
  transform: translateY(0);
513
}
514

515
.animated-panel {
516
  opacity: 0;
517
  transform: translateX(10px);
518
  animation: slideIn 0.3s ease forwards;
519
}
520

521
.animated-panel.react-tabs__tab-panel--selected {
522
  opacity: 1;
523
  transform: translateX(0);
524
}
525

526
@keyframes slideIn {
527
  from {
528
    opacity: 0;
529
    transform: translateX(10px);
530
  }
531
  to {
532
    opacity: 1;
533
    transform: translateX(0);
534
  }
535
}
536
```