ResearchWorkflow stage
DesignWorkflow stage
PrototypeWorkflow stage
ReviewWorkflow stage
QAWorkflow stage
ReleaseWorkflow stage
A wrapper to apply custom branded scrollbar styles to a container.
"use client";
import { CustomScrollbar, List, ListItem } from '@photonix/ultimate';
const items = ['Research', 'Design', 'Prototype', 'Review', 'QA', 'Release'];
export default function CustomScrollbarBasicExample() {
return (
<CustomScrollbar maxHeight={184} size="md">
<List>
{items.map((item) => (
<ListItem key={item} content={item} description="Workflow stage" />
))}
</List>
</CustomScrollbar>
);
}Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | |
size | "sm" | "md" | 'sm' | Scrollbar thumb size: sm = 4px, md = 8px |
maxHeight | string | number | - | Maximum height of the container (enables vertical scroll) |
maxWidth | string | number | - | Maximum width of the container (enables horizontal scroll) |
fill | boolean | false | Fill available space in flex parent container. Use this instead of maxHeight="100%" when inside a flex layout. When true, the component will use flex: 1 to fill remaining space. |
className | string | - | Additional className for the container |
contentClassName | string | - | Additional className for the content area |
verticalTrackClassName | string | - | Additional className for the vertical track |
verticalTrackStyle | React.CSSProperties | - | Inline style for the vertical track |
horizontalTrackClassName | string | - | Additional className for the horizontal track |
horizontalTrackStyle | React.CSSProperties | - | Inline style for the horizontal track |
autoHide | boolean | true | Whether to show scrollbar only on hover |
onScroll | ((event: React.UIEvent<HTMLDivElement>) => void) | - | Callback fired on scroll |