NOCTA UI

Scroll Area

A stylized scroll container with composable viewport, custom indicators, and hover or scroll-driven visibility

Installation

Install the Scroll Area component using the nocta-ui CLI:

npx @nocta-ui/cli add scroll-area

Import the pieces you need:

import { ScrollArea } from '@/components/ui/scroll-area';

Examples

Default Scroll Area

Product launch2m ago

Your scheduled release is locked for tomorrow at 9:00 AM.

New mention18m ago

Marta mentioned you in #design-system: "Do we have copy for the hero?"

Automations1h ago

Segment "High intent leads" added 34 people during the night.

Invoice ready3h ago

Your November invoice is available in the billing portal.

New comment5h ago

"This reads so smooth, let's push to prod." - Leon on Landing Page

System update1d ago

Scheduled maintenance on December 12th between 01:00 - 02:00 UTC.

Horizontal

Next.js
Expo
Replit
Remix
SolidStart
Gatsby
Astro
SvelteKit
Nuxt
Qwik
Analog

Api Reference

ScrollArea

Prop

Type

Sidebar

A collapsible application sidebar with floating controls, peek interactions, and a dedicated content inset.

Separator

A lightweight divider for grouping content sections horizontally or vertically.

On this page

Installation
Examples
Default Scroll Area
Horizontal
Api Reference
ScrollArea