Scroll

Scroll creates a controlled overflow region with themed scrollbars and edge affordances.

Getting Started with Your Workspace

Welcome to your new digital workspace — a place where organization meets efficiency. This environment is designed to streamline your daily tasks, improve collaboration, and keep everything you need right at your fingertips.

Start by exploring the main dashboard, where you'll find an overview of your recent activity, upcoming deadlines, and quick access to important tools. The intuitive layout ensures you spend less time searching and more time getting things done.

Create new tasks with just a few clicks. Add descriptions, due dates, and assign them to your team members. Tasks can be grouped into categories or projects, making it easy to manage both small and large workloads. Comments and file attachments are supported too, so context is never lost.

Need to focus? Use the built-in timer to track how long you spend on each task. Or switch to focus mode to minimize distractions and enter a clean workspace view. Every productivity tool here is built to help you stay in flow.

Notifications keep you updated on project changes, mentions, and upcoming deadlines. They're smart enough not to overwhelm you — just what you need, when you need it.

Customization is key. Choose from multiple layout views, toggle between dark and light themes, and rearrange components to match your workflow. Your workspace should feel like yours.

Need help? The support panel is just a click away, offering tips, guides, and answers to frequently asked questions.

Now that you're here, go ahead and start exploring. Whether you're planning your week, coordinating with teammates, or just organizing your thoughts — this workspace has you covered.

import Scroll from '@/components/ui/scroll';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add Scroll

Examples

Basic

import Scroll from '@/components/ui/scroll';

export default function BasicDemo() {
  return (

Horizontal

import Scroll from '@/components/ui/scroll';

export default function HorizontalDemo() {
  return (

Edge Shadow

import Scroll from '@/components/ui/scroll';

export default function EdgeShadowDemo() {
  return (

Flex Size

import Scroll from '@/components/ui/scroll';

export default function FlexSizeDemo() {
  return (

Scroll To Position

import { useRef, useState } from 'react';
import Button from '@/components/ui/button';
import Scroll from '@/components/ui/scroll';

API

Scroll wraps overflow content in a themed viewport and renders custom scrollbars around it. On touch-primary devices it falls back to native scrolling and scrollbars. Use Scroll.FlexSize when the scroll area needs to fill a flex container.

Scroll

PropDescriptionTypeDefault
childrenContent rendered inside the scroll viewport.ReactNode-
classNameClass names applied to the scroll root.string-
contentClassNameClass names applied to the internal content wrapper.string-
edgeShadowShows edge masks while content remains scrollable.booleanfalse
offsetScrollbarsAdds viewport padding for scrollbars, either always or when present.boolean | 'horizontal' | 'vertical' | 'present'-
onBottomReachedCalled when vertical scrolling reaches the bottom.() => void-
onScrollPositionChangeReports current scroll coordinates on scroll.ScrollPositionChangeHandler-
onTopReachedCalled when vertical scrolling returns to the top.() => void-
refRef forwarded to the scroll root.Ref<HTMLDivElement>-
scrollbarsWhich custom scrollbar axes are rendered.'horizontal' | 'vertical' | 'both''both'
scrollbarSizeCustom scrollbar rail size; desktop rails remain at least 10px, with a 4px resting thumb that expands to 6px when the rail is hovered or pressed.number | string4
scrollHideDelayDelay before auto-hide/hover scrollbars hide after interaction.number1000
typeScrollbar visibility behavior.ScrollType'hover'
viewportPropsNative props applied to the viewport element.ComponentProps<'div'>-
viewportRefRef forwarded to the viewport element for imperative scrolling.Ref<HTMLDivElement>-
...nativePropsNative props for the scroll root.ComponentProps<'div'>-

Scroll.FlexSize

Scroll.FlexSize accepts the same props as Scroll, plus:

PropDescriptionTypeDefault
flexRootClassNameClass names applied to the outer flex root.string-

Types

type ScrollType = 'auto' | 'always' | 'scroll' | 'hover' | 'never';
 
type ScrollPositionChangeHandler = (position: {
  x: number;
  y: number;
}) => void;