Scroll

free

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@latest add Scroll

pnpm dlx nateui@latest add Scroll

yarn dlx nateui@latest add Scroll

Examples

Basic

Getting Started with Your Workspace

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 BasicDemo() {
  return (

Horizontal

Getting Started with Your Workspace

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

export default function HorizontalDemo() {
  return (

Edge Shadow

Getting Started with Your Workspace

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 EdgeShadowDemo() {
  return (

Flex Size

Getting Started with Your Workspace

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 FlexSizeDemo() {
  return (

Scroll To Position

Getting Started with Your Workspace

Start by exploring the main dashboard, where you'll find an overview of your recent activity, upcoming deadlines, and quick access to important tools.

Create new tasks

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.

Stay updated

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.

Choose from multiple layout views, toggle between dark and light themes, and rearrange components to match your workflow.

Start exploring

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.

y: 0px

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

Prop	Description	Type	Default
`children`	Content rendered inside the scroll viewport.	`ReactNode`	-
`className`	Class names applied to the scroll root.	`string`	-
`contentClassName`	Class names applied to the internal content wrapper.	`string`	-
`edgeShadow`	Shows edge masks while content remains scrollable.	`boolean`	`false`
`offsetScrollbars`	Adds viewport padding for scrollbars, either always or when present.	`boolean \| 'horizontal' \| 'vertical' \| 'present'`	-
`onBottomReached`	Called when vertical scrolling reaches the bottom.	`() => void`	-
`onScrollPositionChange`	Reports current scroll coordinates on scroll.	`ScrollPositionChangeHandler`	-
`onTopReached`	Called when vertical scrolling returns to the top.	`() => void`	-
`ref`	Ref forwarded to the scroll root.	`Ref<HTMLDivElement>`	-
`scrollbars`	Which custom scrollbar axes are rendered.	`'horizontal' \| 'vertical' \| 'both'`	`'both'`
`scrollbarSize`	Custom 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 \| string`	`4`
`scrollHideDelay`	Delay before auto-hide/hover scrollbars hide after interaction.	`number`	`1000`
`type`	Scrollbar visibility behavior.	`ScrollType`	`'hover'`
`viewportProps`	Native props applied to the viewport element.	`ComponentProps<'div'>`	-
`viewportRef`	Ref forwarded to the viewport element for imperative scrolling.	`Ref<HTMLDivElement>`	-
`...nativeProps`	Native props for the scroll root.	`ComponentProps<'div'>`	-

Scroll.FlexSize

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

Prop	Description	Type	Default
`flexRootClassName`	Class names applied to the outer flex root.	`string`	-

Types

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