Scroll Area

Augments native scroll functionality for custom, styled scrollbars.

Basic Usage

Vertical scroll

Tags

React

TypeScript

JavaScript

Node.js

Next.js

Tailwind CSS

Prisma

PostgreSQL

GraphQL

REST API

Docker

Kubernetes

AWS

Vercel

GitHub Actions

Horizontal scroll

Water Lilies

Monet

Starry Night

Van Gogh

Guernica

Picasso

Persistence of Memory

Dali

The Kiss

Klimt

Girl with a Pearl Earring

Vermeer

Text content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Both directions

Name	Status	Role	Email	Department
User 1	Active	Developer	user1@example.com	Engineering
User 2	Active	Developer	user2@example.com	Engineering
User 3	Active	Developer	user3@example.com	Engineering
User 4	Active	Developer	user4@example.com	Engineering
User 5	Active	Developer	user5@example.com	Engineering
User 6	Active	Developer	user6@example.com	Engineering
User 7	Active	Developer	user7@example.com	Engineering
User 8	Active	Developer	user8@example.com	Engineering
User 9	Active	Developer	user9@example.com	Engineering
User 10	Active	Developer	user10@example.com	Engineering

Scroll AreaCustom scrollable containers

Installation

pnpm add @corew500/ui

Usage

import { ScrollArea } from "@mordecai-design-system/ui"

<ScrollArea className="h-[200px]">
  <div className="p-4">
    {/* Long content here */}
  </div>
</ScrollArea>

Examples

Vertical Scroll

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {tags.map((tag) => (
      <div key={tag} className="text-sm">{tag}</div>
    ))}
  </div>
</ScrollArea>

Horizontal Scroll

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {works.map((artwork) => (
      <figure key={artwork.artist} className="shrink-0">
        <img src={artwork.src} alt={artwork.title} />
      </figure>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

With ScrollBar

import { ScrollArea, ScrollBar } from "@mordecai-design-system/ui"

<ScrollArea className="h-[200px] w-[350px]">
  <div className="p-4">
    {/* Content */}
  </div>
  <ScrollBar orientation="vertical" />
</ScrollArea>

Both Directions

<ScrollArea className="h-[300px] w-[400px]">
  <div className="w-[600px] p-4">
    {/* Wide and tall content */}
  </div>
  <ScrollBar orientation="vertical" />
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Props

ScrollArea

Prop	Type	Default	Description
`overflowEdgeThreshold`	enum	`0`	The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

ScrollBar

Prop	Type	Default	Description
`orientation`	enum	`vertical`	Whether the scrollbar controls vertical or horizontal scroll.
`keepMounted`	enum	`false`	Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.