hyzrui
GitHub
HomeDocsScroll Area

Layout

Scroll Area

A themed scroll container with slimmer, mode-aware scrollbars.
Tokens
Registry
Docs
Examples
Live example
import { Item, ScrollArea } from "@hyzrui/core";
 
export function Example() {
  return <ScrollArea height={160}><Item title="Tokens" /><Item title="Registry" /><Item title="Docs" /></ScrollArea>;
}

Installation

Install the primitive source, then keep editing it inside your app. The command names the component file you want copied.

Command
pnpm dlx hyzrui add scroll-area

Usage

Import the component from the generated source folder and compose it with normal React props.

Import
import { ScrollArea } from "@hyzrui/core";
Usage
<ScrollArea className="my-scroll-area" />

Customization

Every primitive accepts local props and class names, then inherits design tokens from HyzrThemeProvider . Copy the file, keep the markup, and tune the CSS until it matches your product.

Tokens
Registry
Docs
Examples
Radius--hui-radiusControls the default corner system for buttons, inputs, cards, overlays, and nested surfaces.
Foreground--hui-foregroundControls the page and component text colors. Dark mode uses the same component source with different tokens.
Surface--hui-surfaceControls card, dialog, popover, and input surfaces.
Border--hui-borderControls separators, input strokes, card outlines, and menu edges.
Primary--hui-primaryControls the main action color and the matching foreground color for solid controls.
Font--hui-font-familyControls the font stack used by every primitive inside the provider.
Control size--hui-control-font-sizeControls the default font size for buttons, inputs, selects, tabs, command rows, and menu triggers.
Control weight--hui-font-weight-controlControls the default weight of buttons, tabs, menus, badges, and compact actions.
Control height--hui-control-heightControls the default field and trigger height across forms and navigation.
Button height--hui-button-heightControls button height independently from form fields.
Button padding--hui-button-paddingControls horizontal button spacing without changing the text size.
Card padding--hui-card-paddingControls card, dialog, sheet, drawer, and panel interior spacing.
Border width--hui-border-widthControls default edge width for controls, cards, tables, and floating panels.
Focus width--hui-focus-widthControls keyboard focus outline thickness.
Motion duration--hui-transition-durationControls shared hover timing for controls and surfaces.
Hover lift--hui-hover-liftControls subtle hover lift for raised styles.
Overlay--hui-overlayControls dialog, sheet, drawer, and command overlay strength.
Floating offset--hui-floating-offsetControls menu, command, popover, and hover-card distance from the trigger.
Source fileEdit src/lib/hyzrui/components/scroll-area.tsx directly once the primitive is installed in your app.
Local classTarget .hui-scroll-area for local refinements that should not become global theme tokens.
Theme tokens
import { defineHyzrTheme } from "@hyzrui/core";
 
export const theme = defineHyzrTheme({
  id: "product",
  density: "comfortable",
  radius: 10,
  shadow: 0.08,
  colors: {
    background: "#fbfbfc",
    foreground: "#09090b",
    surface: "#ffffff",
    border: "#e4e4e7",
    primary: "#18181b",
    primaryForeground: "#ffffff",
  },
  typography: {
    controlSize: 14,
    controlWeight: 500,
    headingWeight: 680,
  },
  sizing: {
    controlHeight: 38,
    buttonHeight: 34,
    buttonPadding: 14,
    cardPadding: 18,
  },
  borders: {
    radius: 10,
    radiusSm: 7,
    radiusLg: 16,
    width: 1,
    focusWidth: 2,
  },
  motion: {
    duration: 150,
    hoverLift: 0,
    hoverMix: 5,
  },
});

See the customization guide for the full theme shape, style presets, scoped CSS overrides, and source-edit workflow.

Examples

These examples show the same primitive in realistic combinations and states.

Scrollable list

Constrain a long list to a fixed height with themed, mode-aware scrollbars.

Build #1200

Completed in 1m 12s

Build #1199

Completed in 1m 12s

Build #1198

Completed in 1m 12s

Build #1197

Completed in 1m 12s

Build #1196

Completed in 1m 12s

Build #1195

Completed in 1m 12s

Build #1194

Completed in 1m 12s

Build #1193

Completed in 1m 12s

Build #1192

Completed in 1m 12s

Build #1191

Completed in 1m 12s

Build #1190

Completed in 1m 12s

Build #1189

Completed in 1m 12s

Scrollable list
import { Item, ScrollArea } from "@hyzrui/core";
 
export function ScrollAreaList() {
  const items = Array.from({ length: 12 }, (_, i) => "Build #" + (1200 - i));
  return (
    <ScrollArea height={180}>
      <div style={{ display: "grid", gap: 2 }}>
        {items.map((label) => <Item key={label} title={label} description="Completed in 1m 12s" />)}
      </div>
    </ScrollArea>
  );
}

API Reference

Props are intentionally small. For deeper changes, edit the component source file directly.

PropTypeDefaultDescription
classNamestring-Adds classes to the copied component without replacing the default structure.
childrenReact.ReactNode-The rendered content for compound or wrapper components.
...propsHTMLAttributes-Forwards native element props such as id, aria attributes, and event handlers.
heightnumber | string-Fixed height for the scroll viewport.