Devie UI

Version: 2026-02-14

Vernacular architecture is building done outside any academic tradition, and without professional guidance. It is not a particular architectural movement or style, but rather a broad category, encompassing a wide range and variety of building types, with differing methods of construction, from around the world, both historical and extant and classical and modern. Vernacular architecture constitutes 95% of the world's built environment, as estimated in 1995 by Amos Rapoport, as measured against the small percentage of new buildings every year designed by architects and built by engineers.

This type of architecture usually serves immediate, local needs, is constrained by the materials available in its particular region and reflects local traditions and cultural practices. The study of vernacular architecture does not examine formally schooled architects, but instead that of the design skills and tradition of local builders, who were rarely given any attribution for the work. More recently, vernacular architecture has been examined by designers and the building industry in an effort to be more energy conscious with contemporary design and construction—part of a broader interest in sustainable design.

Vernacular architecture can be contrasted against polite architecture, which is characterized by stylistic elements of design intentionally incorporated by a professional architect for aesthetic purposes. While vernacular architecture is typically associated with simpler, more utilitarian structures, many vernacular buildings are renowned for their beauty and the craft that went into their construction.

The ScrollArea component extends Base UI's Scroll Area. It provides a native scroll container with custom-styled scrollbars that appear on hover or when scrolling.

Installation

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/scroll-area
// https://base-ui.com/react/components/scroll-area
 
import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
import clsx from "clsx";
import styles from "./ScrollArea.module.scss";
 
function Root({ className, children, ...props }: BaseScrollArea.Root.Props) {
  return (
    <BaseScrollArea.Root className={clsx(styles.root, className)} {...props}>
      {children}
    </BaseScrollArea.Root>
  );
}
 
function Viewport({
  className,
  children,
  ...props
}: BaseScrollArea.Viewport.Props) {
  return (
    <BaseScrollArea.Viewport
      className={clsx(styles.viewport, className)}
      {...props}
    >
      {children}
    </BaseScrollArea.Viewport>
  );
}
 
function Content({
  className,
  children,
  ...props
}: BaseScrollArea.Content.Props) {
  return (
    <BaseScrollArea.Content
      className={clsx(styles.content, className)}
      {...props}
    >
      {children}
    </BaseScrollArea.Content>
  );
}
 
function Scrollbar({
  className,
  children,
  orientation = "vertical",
  ...props
}: BaseScrollArea.Scrollbar.Props) {
  return (
    <BaseScrollArea.Scrollbar
      className={clsx(styles.scrollbar, className)}
      orientation={orientation}
      {...props}
    >
      {children}
    </BaseScrollArea.Scrollbar>
  );
}
 
function Thumb({ className, ...props }: BaseScrollArea.Thumb.Props) {
  return (
    <BaseScrollArea.Thumb
      className={clsx(styles.thumb, className)}
      {...props}
    />
  );
}
 
function Corner({ className, ...props }: BaseScrollArea.Corner.Props) {
  return (
    <BaseScrollArea.Corner
      className={clsx(styles.corner, className)}
      {...props}
    />
  );
}
 
const ScrollArea = {
  Root,
  Viewport,
  Content,
  Scrollbar,
  Thumb,
  Corner,
};
 
namespace ScrollArea {
  export namespace Root {
    export type Props = BaseScrollArea.Root.Props;
  }
  export namespace Viewport {
    export type Props = BaseScrollArea.Viewport.Props;
  }
  export namespace Content {
    export type Props = BaseScrollArea.Content.Props;
  }
  export namespace Scrollbar {
    export type Props = BaseScrollArea.Scrollbar.Props;
  }
  export namespace Thumb {
    export type Props = BaseScrollArea.Thumb.Props;
  }
  export namespace Corner {
    export type Props = BaseScrollArea.Corner.Props;
  }
}
 
export default ScrollArea;

Use Cases

Simple scroll area

A basic scroll area with vertical scrolling. The custom scrollbar appears when hovering over the container or when actively scrolling.

Both scrollbars

When content overflows in both directions, use two ScrollArea.Scrollbar components with different orientations and a ScrollArea.Corner to prevent them from overlapping.

Long code block

A practical example showing how to wrap long code content in a fixed-height scroll area. This pattern is useful for documentation sites, code editors, or anywhere you need to display lengthy code snippets without taking up too much vertical space.

import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
import clsx from "clsx";
import type { ComponentProps } from "react";
import styles from "./ScrollArea.module.scss";

type RootProps = ComponentProps<typeof BaseScrollArea.Root> & {
  className?: string;
};

function Root({ className, children, ...props }: RootProps) {
  return (
    <BaseScrollArea.Root className={clsx(styles.root, className)} {...props}>
      {children}
    </BaseScrollArea.Root>
  );
}

type ViewportProps = ComponentProps<typeof BaseScrollArea.Viewport> & {
  className?: string;
};

function Viewport({ className, children, ...props }: ViewportProps) {
  return (
    <BaseScrollArea.Viewport
      className={clsx(styles.viewport, className)}
      {...props}
    >
      {children}
    </BaseScrollArea.Viewport>
  );
}

type ContentProps = ComponentProps<typeof BaseScrollArea.Content> & {
  className?: string;
};

function Content({ className, children, ...props }: ContentProps) {
  return (
    <BaseScrollArea.Content
      className={clsx(styles.content, className)}
      {...props}
    >
      {children}
    </BaseScrollArea.Content>
  );
}

const ScrollArea = {
  Root,
  Viewport,
  Content,
};

export default ScrollArea;

<ScrollArea />

Installation

Use Cases

Simple scroll area

Both scrollbars

Long code block