Mcoli UI - MC Scroll Area

Overview

The mc-scrollarea is a core component of the MicroClub UI library. Built on the @base-ui/react scroll area primitive, it combines world-class accessibility with MicroClub's signature styling via Tailwind CSS v4.

As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

Add to Your Project

Deploy the mc-scrollarea directly to your components/ui directory:

npx mcoli-ui@latest add mc-scrollarea

pnpm dlx mcoli-ui@latest add mc-scrollarea

yarn dlx mcoli-ui@latest add mc-scrollarea

bunx mcoli-ui@latest add mc-scrollarea

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Copy the source code

'use client';import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';import { cn } from '@/lib/utils';function McScrollArea({  className,  children,  title,  desc,  ...props}: ScrollAreaPrimitive.Root.Props & { title?: string; desc?: string[] }) {  return (    <ScrollAreaPrimitive.Root      data-slot="scroll-area"      className={cn('relative  rounded-md ring-1 ring-inset ring-border bg-background', className)}      {...props}    >      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className=" size-full">        {title && (          <div className=" mb-4 mt-4 ml-4 gap-2.5 size-fit">            <p className=" font-dm-sans text-4 text-foreground text-normal">{title}</p>          </div>        )}        {desc && (          <div className="mx-4  flex flex-col gap-2.5 size-fit">            {desc.map((line, i) => (              <div key={i} className="px-1.5 py-3.5 border-b-px border-b h-fit min-w-39.5">                <p className="">{line}</p>              </div>            ))}          </div>        )}        {children}      </ScrollAreaPrimitive.Viewport>      <McScrollBar />      <ScrollAreaPrimitive.Corner />    </ScrollAreaPrimitive.Root>  );}function McScrollBar({  className,  orientation = 'vertical',  ...props}: ScrollAreaPrimitive.Scrollbar.Props) {  return (    <ScrollAreaPrimitive.Scrollbar      data-slot="scroll-area-scrollbar"      data-orientation={orientation}      orientation={orientation}      className={cn(        'flex touch-none p-px transition-colors select-none ' +          ' data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:my-2 data-horizontal:ml-3' +          ' data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',        className      )}      {...props}    >      <ScrollAreaPrimitive.Thumb        data-slot="scroll-area-thumb"        className="relative flex-1 rounded-full bg-border"      />    </ScrollAreaPrimitive.Scrollbar>  );}export { McScrollArea, McScrollBar };

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import { McScrollArea, McScrollBar } from '@/components/ui/mc-scrollarea';

export default function Example() {
  return (
    <McScrollArea className="h-72 w-48">
      <div>Content that scrolls</div>
    </McScrollArea>
  );
}

Examples

Vertical Scrolling

<McScrollArea className="h-72 w-48">
  <div className="p-4">
    <p>Long content here...</p>
  </div>
</McScrollArea>

Horizontal Scrolling

<McScrollArea className="w-96 rounded-md border whitespace-nowrap">
  <div className="flex w-max space-x-4 p-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <McScrollBar orientation="horizontal" />
</McScrollArea>

With Title and Description

const tags = ['tag1', 'tag2', 'tag3'];

<McScrollArea className="h-72 w-48" title="Tags" desc={tags}>
  <div>Additional content</div>
</McScrollArea>;

API Reference

McScrollArea Props

Prop	Type	Default	Description
`title`	`string`	-	Optional title displayed at the top
`desc`	`string[]`	-	Optional array of description lines
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The content to be scrolled

All other props from @base-ui/react/scroll-area/Root are supported.

McScrollBar Props

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The orientation of the scrollbar
`className`	`string`	-	Additional CSS classes

All other props from @base-ui/react/scroll-area/Scrollbar are supported.

MC Scroll Area

On this page