retro-react
Version:
A React component library for building retro-style websites
45 lines (44 loc) • 1.65 kB
TypeScript
/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
export declare type ScrollbarVariant = 'default' | 'windows' | 'terminal' | 'amber';
export interface ScrollbarProps extends React.HTMLAttributes<HTMLElement> {
/**
* The variant of the Scrollbar.
* - default: Classic Windows 95/98 scrollbar with raised 3D effect
* - windows: Authentic Windows 3.1 style scrollbar
* - terminal: Dark terminal-style scrollbar with green accents
* - amber: Vintage amber terminal scrollbar
*
* @default 'default'
*/
variant?: ScrollbarVariant;
sx?: ThemeUICSSObject;
}
/**
* Retro-themed custom scrollbars inspired by Windows 95/98 and classic terminal interfaces.
*
* Features authentic retro scrollbar styling:
* - Default: Classic Windows 95/98 raised 3D scrollbar
* - Windows: Authentic Windows 3.1 style scrollbar
* - Terminal: Dark terminal-style with green accents
* - Amber: Vintage amber terminal scrollbar
*
* Only works on Chrome, Edge, Safari and other browsers that support the
* `::webkit-scrollbar` pseudo element.
*
* @example
* // Classic Windows 95 scrollbar
* <Scrollbar variant="default">
* <div style={{ height: 200, overflow: 'auto' }}>
* Long content here...
* </div>
* </Scrollbar>
*
* // Terminal style scrollbar
* <Scrollbar variant="terminal">
* <div style={{ height: 200, overflow: 'auto' }}>
* Terminal content...
* </div>
* </Scrollbar>
*/
export declare const Scrollbar: import("react").ForwardRefExoticComponent<ScrollbarProps & import("react").RefAttributes<HTMLElement>>;