CustomScrollbar

A wrapper component that applies custom, themeable scrollbar styling to its content. Supports vertical, horizontal, or both scroll directions, with options for thickness, colors, rounded corners, auto-hide, and more. Includes several helper presets for common use cases.

---

Import

import { CustomScrollbar } from '@odyssee/components';
// Helpers (optional)
import { ScrollArea, ThinScrollbar, CodeScrollbar, ChatScrollbar, TableScrollbar } from '@odyssee/components';

---

Basic Usage

Code Éditable

Résultat

---

Thin Scrollbar with Rounded Corners

Code Éditable

Résultat

---

Custom Colors

Code Éditable

Résultat

---

Auto-hide Scrollbar

Code Éditable

Résultat

---

Horizontal Scrollbar

Code Éditable

Résultat

---

Helper Presets

ScrollArea

A preset with variants for default, minimal, or accent scrollbars.

Code Éditable

Résultat

ThinScrollbar

Code Éditable

Résultat

CodeScrollbar

Code Éditable

Résultat

ChatScrollbar

Code Éditable

Résultat

TableScrollbar

Code Éditable

Résultat

---

Props

Name	Type	Default	Description
children	Pulse.JSX.Element | Pulse.JSX.Element[] | string	—	Content to render with custom scrollbar
maxHeight	string	"100"	Maximum height (e.g. "100", "80", "full")
maxWidth	string	—	Maximum width (for horizontal scrollbars)
width	"thin" | "normal" | "thick" | string	"thin"	Scrollbar thickness
orientation	"vertical" | "horizontal" | "both"	"vertical"	Scroll direction
trackColor	string	"gray-100"	Background color of the scrollbar track
thumbColor	string	"gray-300"	Color of the scrollbar thumb (handle)
thumbHoverColor	string	—	Thumb color on hover
rounded	boolean	false	Rounded corners for scrollbar track and thumb
autoHide	boolean	false	Hide scrollbar except on hover
scrollbarStyles	Record<string, string>	—	Additional custom scrollbar styles
className	string	—	Additional CSS classes
id	string	auto	DOM id (auto-generated if not provided)
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <div>

ScrollArea Props

All CustomScrollbar props, plus:

Name	Type	Default	Description
variant	"default" | "minimal" | "accent"	"default"	Preset style variant

---

Accessibility

• The component renders a semantic <div> with overflow and scrollbar styling.
• Content order and semantics are preserved for screen readers.
• Ensure sufficient color contrast for thumb and track colors.
• Avoid hiding scrollbars if users need to discover overflow content.

---

Best Practices

• Use maxHeight or maxWidth to control scroll area size.
• Prefer autoHide for chat or minimal UIs, but avoid for critical content.
• Use orientation='both' for tables or grids that scroll in both directions.
• Use helper presets for common use cases (code, chat, tables).
• Test custom colors for accessibility and theme compatibility.

---

Helper Components

• ScrollArea: Preset with variants for default, minimal, or accent scrollbars.
• ThinScrollbar: Thin, rounded scrollbar preset.
• CodeScrollbar: Preset for code blocks (dark track, thin thumb).
• ChatScrollbar: Minimal, auto-hide scrollbar for chat UIs.
• TableScrollbar: Scrollbar for tables (both directions).

---