Documentation

ScrollArea

Native scrolling with pixel scrollbar styling; no extra JavaScript.

Hypixel — mc.hypixel.net
Mineplex — mineplex.com
CubeCraft — cubecraft.net
The Hive — hivemc.eu
GommeHD — gommehd.net
lunar-network — play.lunar.gg
PurpleMC — purplemc.net
NetherGames —ethergames.org

import { Fragment } from "react";

import { ScrollArea } from "./index";

const SERVERS = [
  "Hypixel — mc.hypixel.net",
  "Mineplex — mineplex.com",
  "CubeCraft — cubecraft.net",
  "The Hive — hivemc.eu",
  "GommeHD — gommehd.net",
  " lunar-network — play.lunar.gg",
  "PurpleMC — purplemc.net",
  "NetherGames —ethergames.org",
] as const;

/**
 * ScrollArea 预览用例：服务器列表
*/
export function ScrollAreaDemo() {
  return (
    <ScrollArea className="mc-tex-slot h-60 w-140 p-4">
      <ul className="flex flex-col gap-2">
        {SERVERS.map((name, index) => (
          <Fragment key={name}>
            <li className="font-mc mc-text text-mc-text-main">{name}</li>
            {index < SERVERS.length - 1
              ? (
                  <li aria-hidden="true" className="h-(--mc-gui) bg-mc-stone-dark" />
                )
              : null}
          </Fragment>
        ))}
      </ul>
    </ScrollArea>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/scroll-area

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { ScrollArea } from "@tennantite/ui";

CLI copy import

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

import { Fragment } from "react";

import { ScrollArea } from "./index";

const SERVERS = [
  "Hypixel — mc.hypixel.net",
  "Mineplex — mineplex.com",
  "CubeCraft — cubecraft.net",
  "The Hive — hivemc.eu",
  "GommeHD — gommehd.net",
  " lunar-network — play.lunar.gg",
  "PurpleMC — purplemc.net",
  "NetherGames —ethergames.org",
] as const;

/**
 * ScrollArea 预览用例：服务器列表
*/
export function ScrollAreaDemo() {
  return (
    <ScrollArea className="mc-tex-slot h-60 w-140 p-4">
      <ul className="flex flex-col gap-2">
        {SERVERS.map((name, index) => (
          <Fragment key={name}>
            <li className="font-mc mc-text text-mc-text-main">{name}</li>
            {index < SERVERS.length - 1
              ? (
                  <li aria-hidden="true" className="h-(--mc-gui) bg-mc-stone-dark" />
                )
              : null}
          </Fragment>
        ))}
      </ul>
    </ScrollArea>
  );
}

API Reference

No public props.

Source

packages/ui/src/primitives/scroll-area/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.