Scroll Area

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

Radix UI
Tailus Themer

Tailwind CSS Styling Library for Building Modern, Consistent and Accessible Web UIs with Radix UI, Melt UI, and Radix Vue.

Concept

Imagine Tailus Themer as a secret style vault for our UI Kits. It uses Tailwind CSS, making it super easy to customize the look and feel of your components. This means you get a consistent design foundation across all these UI Kits, but with the freedom to tweak things to perfectly match your brand.

Features
  • Built-in Palettes: Hit the ground running with a collection of pre-designed color schemes to jumpstart your project.
  • Multi-Themed Apps: Effortlessly create web applications with multiple themes, offering users a personalized experience.
  • Effortless Customization: Tailor the look and feel to your exact needs. Choose between the intuitive Themer plugin or leverage the power of CSS variables.
  • Expanded Component Variants: Enjoy a wider range of component variations for even greater design flexibility.
  • Accessibility First: Build UIs that are inclusive and user-friendly for everyone.
  • Modern & Trendy: Stay ahead of the curve with Tailus Themer's focus on modern design trends.
Credits
 
import ScrollArea from "./ScrollArea"
import { Text, Title, List, Link } from "@components/typography"

export const Overview = () => (
    <ScrollArea.Root className="h-72 px-4">
      <ScrollArea.Viewport className="w-full">
        // content goes here
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar orientation="vertical"/>
      <ScrollArea.Scrollbar orientation="horizontal"/>
    </ScrollArea.Root>
)

Installation

Install the primitive and Copy-Paste the component code in a .tsx file.

npm install @radix-ui/react-scroll-area
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import React from "react";
import { scrollArea } from "@tailus/themer"

const {root, bar, thumb} = scrollArea()

const ScrollAreaRoot = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentProps<typeof ScrollAreaPrimitive.Root>
>((props, forwardedRef) => (
  <ScrollAreaPrimitive.Root
    {...props}
    ref={forwardedRef}
    className={root({className: props.className})}
  />
));

const ScrollAreaViewport = ScrollAreaPrimitive.Viewport;

const ScrollAreaScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
>((
  {
    className,
    children,
    orientation = "vertical",
    ...props
  }, forwardedRef
) => {
  return (
    <ScrollAreaPrimitive.Scrollbar
      {...props}
      orientation={orientation}
      ref={forwardedRef}
      className={bar({className})}
    >
      {children ?? (
        <ScrollAreaPrimitive.Thumb className={thumb({className})}/>
      )}
    </ScrollAreaPrimitive.Scrollbar>
  );
});
ScrollAreaScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;

const ScrollAreaThumb = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Thumb>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>
>((props, forwardedRef) => (
  <ScrollAreaPrimitive.Thumb
    {...props}
    ref={forwardedRef}
    className={thumb({className: props.className})}
  />
));

const ScrollAreaCorner = ScrollAreaPrimitive.Corner;

export default {
  Root: ScrollAreaRoot,
  Viewport: ScrollAreaViewport,
  Scrollbar: ScrollAreaScrollBar,
  Thumb: ScrollAreaThumb,
  Corner: ScrollAreaCorner,
}

export {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollBar,
  ScrollAreaThumb,
  ScrollAreaCorner,
}

Usage

Import all the parts and build your Scroll Area.

import ScrollArea from "./ScrollArea"
import { Text, Title, List, Link } from "@components/typography"

export const Overview = () => (
    <ScrollArea.Root className="h-72 px-4">
      <ScrollArea.Viewport className="w-full">
        // content goes here
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar orientation="vertical"/>
      <ScrollArea.Scrollbar orientation="horizontal"/>
    </ScrollArea.Root>
)

Examples