eo-n/ui

Recent Updates

✅ Task 1: Updated inventory system.

🚀 Task 2: Deployed new version to production.

📅 Task 3: Scheduled maintenance for 9/15.

📢 Task 4: Announced new policy changes.

📦 Task 5: Received new supply items.

📊 Task 6: Generated monthly reports.

🔧 Task 7: Fixed bugs in request system.

📄 Task 8: Reviewed pending approvals.

import { ScrollArea } from "@/components/ui/scroll-area";
 
export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-40 max-w-[450px] rounded-md border">
      <div className="flex flex-col gap-2">
        <h4 className="text-sm font-medium">Recent Updates</h4>
        <div className="text-sm">
          <p className="py-1">✅ Task 1: Updated inventory system.</p>
          <p className="py-1">🚀 Task 2: Deployed new version to production.</p>
          <p className="py-1">📅 Task 3: Scheduled maintenance for 9/15.</p>
          <p className="py-1">📢 Task 4: Announced new policy changes.</p>
          <p className="py-1">📦 Task 5: Received new supply items.</p>
          <p className="py-1">📊 Task 6: Generated monthly reports.</p>
          <p className="py-1">🔧 Task 7: Fixed bugs in request system.</p>
          <p className="py-1">📄 Task 8: Reviewed pending approvals.</p>
        </div>
      </div>
    </ScrollArea>
  );
}

Installation

package-install npx shadcn@latest add @eo-n/scroll-area

Usage

Import all parts and piece them together.

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

<ScrollArea className="h-20 w-50 rounded-md border">
  <p>
    The ScrollArea component allows for overflow content to be easily scrollable
    while maintaining a clean and responsive UI. It is particularly useful when
    dealing with long lists, articles, or any content that exceeds the
    designated container height.
  </p>
</ScrollArea>

Examples

Horizontal Scroll

Button

A UI component for triggering actions or navigation.

Accordion

A UI component for showing and hiding content in collapsible sections.

Dialog

A UI component for displaying modal dialogs to capture user input or confirm actions.

Tooltip

A component that groups related actions and controls.

import Link from "next/link";
 
import { ScrollArea } from "@/components/ui/scroll-area";
 
const components = [
  {
    title: "Button",
    description: "A UI component for triggering actions or navigation.",
    href: "/docs/ui/button",
  },
  {
    title: "Accordion",
    description:
      "A UI component for showing and hiding content in collapsible sections.",
    href: "/docs/ui/accordion",
  },
  {
    title: "Dialog",
    description:
      "A UI component for displaying modal dialogs to capture user input or confirm actions.",
    href: "/docs/ui/dialog",
  },
  {
    title: "Tooltip",
    description: "A component that groups related actions and controls.",
    href: "/docs/ui/tooltip",
  },
];
 
export function ScrollAreaHorizontal() {
  return (
    <ScrollArea
      className="h-fit w-[550px] rounded-md border"
      scrollbars="horizontal"
    >
      <div className="flex space-x-2">
        {components.map((comp, i) => (
          <Link
            key={i}
            href={comp.href}
            className="hover:bg-secondary flex w-48 cursor-pointer flex-col justify-between gap-2 rounded-md border bg-transparent p-3 no-underline shadow-sm"
          >
            <h4 className="text-lg leading-none font-medium">{comp.title}</h4>
            <p className="text-muted-foreground text-xs">{comp.description}</p>
          </Link>
        ))}
      </div>
    </ScrollArea>
  );
}

Both Scrollbars

import { ScrollArea } from "@/components/ui/scroll-area";
 
export function ScrollAreaBoth() {
  return (
    <ScrollArea
      scrollbars="both"
      className="size-80 rounded-[12px] border"
    >
      <ul
        style={{
          margin: 0,
          padding: 0,
        }}
        className="grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-2 p-0"
      >
        {Array.from({ length: 100 }, (_, i) => (
          <li
            style={{
              margin: 0,
              padding: 0,
            }}
            key={i}
            className="bg-muted text-muted-foreground flex items-center justify-center rounded-lg text-sm font-medium"
          >
            {i + 1}
          </li>
        ))}
      </ul>
    </ScrollArea>
  );
}

Scroll Area