Naar inhoud
1.6k

Scrollgebied

Een scrollbare container met aangepaste, browseronafhankelijke schuifbalken voor chatvensters, zijbalken en bestandsboomstructuren — met een stevige, neobrutalistische schuifknop.

import * as React from "react"

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

Het scrollgebied vervangt de standaardscrollbalken van de browser door exemplaren die je zelf stylet — het native scrollen blijft eronder intact, dus muiswiel, touch en momentum gedragen zich zoals altijd. Gebouwd op de component Base UI Scroll Area en vormgegeven volgens het neobrutalistische recept: een massieve, forse thumb in de randkleur en een harde focusring op de viewport.

Ideaal voor:

  • Chat- en logvensters — zet de hoogte vast en laat berichten binnen het paneel scrollen in plaats van op de pagina.
  • Zijbalken en bestandsbomen — lange navigatielijsten die onafhankelijk van de hoofdinhoud scrollen.
  • Horizontale stroken — rijen tags, kaartgalerijen en brede tabellen via orientation="horizontal".

Installatie

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
npx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json

Installeer de volgende afhankelijkheden:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Kopieer en plak de volgende code in je project.

components/ui/scroll-area.tsx
"use client"

import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      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-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
        className
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded bg-border"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

Compositie

Gebruik de volgende compositie om een ScrollArea op te bouwen:

ScrollArea
└── ScrollBar

Voorbeelden

Horizontaal

Gebruik ScrollBar met orientation="horizontal" voor horizontaal scrollen.

import * as React from "react"
import Image from "next/image"

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

Er bestaat geen WAI-ARIA-patroon voor scrollgebieden — dat is ook niet nodig, want de Base UI-component houdt eronder een echte native scrollcontainer in stand, waardoor scrollen met muiswiel, touch en toetsenbord zich precies zo gedraagt als in de browser zelf. Niet elke browser maakt een scrollcontainer uit zichzelf focusbaar met het toetsenbord: bevat de inhoud geen focusbare elementen, voeg dan tabIndex={0} en een aria-label toe aan de viewport, zodat toetsenbordgebruikers hem kunnen bereiken en scrollen — de stijlen bevatten voor dat geval al een zichtbare focusring. De aangepaste scrollbalk en thumb zijn puur op de muis gerichte hulpmiddelen; ze mogen nooit de enige manier zijn om te scrollen.

API-referentie

Zie de documentatie van Base UI Scroll Area.