Scroll-area

Augments native scroll functionality for custom, cross-browser styling.

Preview
Code

Horizontal Scrolling

Preview
Code

import ScrollArea from '@dinui/react/scroll-area'

export interface Artwork {
  artist: string
  art: string
}

export const works: Artwork[] = [
  {
    artist: 'Ornella Binni',
    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
  },
  {
    artist: 'Tom Byrom',
    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
  },
  {
    artist: 'Vladimir Malyavko',
    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
  },
]

export default function ScrollAreaHorizontalDemo() {
  return (
    <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">
            <div className="overflow-hidden rounded-md">
              <img
                src={artwork.art}
                alt={`Photo by ${artwork.artist}`}
                className="aspect-[3/4] h-fit w-fit object-cover"
                width={300}
                height={400}
              />
            </div>
            <figcaption className="pt-2 text-xs text-fg-weaker">
              Photo by <span className="font-semibold text-fg">{artwork.artist}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </ScrollArea>
  )
}

Installation

Follow Installation Guide

To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.
All done

You now can start using this component in your project.

Follow Installation Guide

To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

Run the following command in your project

npx @dinui/cli@latest add scroll-area

yarn dlx @dinui/cli@latest add scroll-area

pnpm dlx @dinui/cli@latest add scroll-area

bunx @dinui/cli@latest add scroll-area

Update the import paths to match your project setup
All done

You now can start using this component in your project.

Follow Installation Guide

To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

Install dependencies

npm install @radix-ui/react-scroll-area tailwind-variants type-fest

yarn add @radix-ui/react-scroll-area tailwind-variants type-fest

pnpm add @radix-ui/react-scroll-area tailwind-variants type-fest

bun add @radix-ui/react-scroll-area tailwind-variants type-fest

Copy and paste the following code into your project

'use client'

import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
import { forwardRef } from 'react'
import { tv } from 'tailwind-variants'
import type { Merge } from 'type-fest'

const scrollArea = tv({
  slots: {
    root: 'relative overflow-hidden',
    viewport: 'h-full w-full rounded-[inherit]',
    scrollbar: 'flex touch-none select-none transition-colors',
    thumb: 'relative flex-1 rounded-full bg-border',
  },
  variants: {
    orientation: {
      vertical: {
        scrollbar: 'h-full w-2.5 border-l border-l-transparent p-[0.0625rem]',
      },
      horizontal: {
        scrollbar: 'h-2.5 flex-col border-t border-t-transparent p-[0.0625rem]',
      },
    },
  },
})

const ScrollArea = forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  Merge<
    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>,
    {
      viewportProps?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>
      cornerProps?: React.ComponentProps<typeof ScrollAreaPrimitive.Corner>

      orientation?: 'vertical' | 'horizontal'
      verticalScrollbarProps?: React.ComponentProps<typeof ScrollBar>
      horizontalScrollbarProps?: React.ComponentProps<typeof ScrollBar>
    }
  >
>(
  (
    {
      viewportProps,
      cornerProps,
      orientation,
      verticalScrollbarProps,
      horizontalScrollbarProps,
      children,
      ...props
    },
    ref,
  ) => {
    const { root, viewport } = scrollArea()

    return (
      <ScrollAreaPrimitive.Root
        {...props}
        ref={ref}
        className={root({ className: props.className })}
      >
        <ScrollAreaPrimitive.Viewport
          {...viewportProps}
          className={viewport({ className: viewportProps?.className })}
        >
          {children}
        </ScrollAreaPrimitive.Viewport>

        {!orientation || orientation === 'horizontal' ? (
          <ScrollBar orientation="horizontal" {...horizontalScrollbarProps} />
        ) : null}

        {!orientation || orientation === 'vertical' ? (
          <ScrollBar orientation="vertical" {...verticalScrollbarProps} />
        ) : null}

        <ScrollAreaPrimitive.Corner {...cornerProps} />
      </ScrollAreaPrimitive.Root>
    )
  },
)
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  Merge<
    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
    {
      thumbProps?: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaThumb>
    }
  >
>(({ thumbProps, ...props }, ref) => {
  const { scrollbar, thumb } = scrollArea({ orientation: props.orientation })

  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      {...props}
      ref={ref}
      className={scrollbar({ className: props.className })}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        {...thumbProps}
        className={thumb({ className: thumbProps?.className })}
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
})
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export default ScrollArea
export { scrollArea, ScrollAreaPrimitive }

Update the import paths to match your project setup
All done

You now can start using this component in your project.

Scroll-area

Tags

Horizontal Scrolling

Installation