Scroll Area

Provides a consistent scroll area across platforms.

Scroll Area

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.

	<script lang="ts">
  import { ScrollArea } from "bits-ui";
</script>
 
<ScrollArea.Root
  class="border-dark-10 bg-background-alt shadow-card relative overflow-hidden rounded-[10px] border px-4 py-4"
>
  <ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
    <h4
      class="text-foreground mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em]"
    >
      Scroll Area
    </h4>
    <p class="text-foreground-alt text-wrap text-sm leading-5">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos
      impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque
      aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum
      accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur
      adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
      excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae
      corrupti autem? Dolorem, sit voluptatum.
    </p>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar
    orientation="vertical"
    class="bg-muted hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0 flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent p-px transition-all duration-200 hover:w-3"
  >
    <ScrollArea.Thumb class="bg-muted-foreground flex-1 rounded-full" />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar
    orientation="horizontal"
    class="bg-muted hover:bg-dark-10 flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent p-px transition-all duration-200 hover:h-3 "
  >
    <ScrollArea.Thumb class="bg-muted-foreground rounded-full" />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

	@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 
@import "tailwindcss";
@plugin "tailwindcss-animate";
 
@custom-variant dark (&:is(.dark *));
 
@font-face {
	font-family: "Cal Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/CalSans-SemiBold.woff2") format("woff2");
}
 
:root {
	/* Colors */
	--background: hsl(0 0% 100%);
	--background-alt: hsl(0 0% 100%);
	--foreground: hsl(0 0% 9%);
	--foreground-alt: hsl(0 0% 32%);
	--muted: hsl(240 5% 96%);
	--muted-foreground: hsla(0 0% 9% / 0.4);
	--border: hsl(240 6% 10%);
	--border-input: hsla(240 6% 10% / 0.17);
	--border-input-hover: hsla(240 6% 10% / 0.4);
	--border-card: hsla(240 6% 10% / 0.1);
	--dark: hsl(240 6% 10%);
	--dark-10: hsla(240 6% 10% / 0.1);
	--dark-40: hsla(240 6% 10% / 0.4);
	--dark-04: hsla(240 6% 10% / 0.04);
	--accent: hsl(204 94% 94%);
	--accent-foreground: hsl(204 80% 16%);
	--destructive: hsl(347 77% 50%);
	--tertiary: hsl(37.7 92.1% 50.2%);
	--line: hsl(0 0% 100%);
 
	/* black */
	--contrast: hsl(0 0% 0%);
 
	/* Shadows */
	--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
	--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.04) inset;
	--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
	--shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 0, 0.07);
	--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
	--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.04);
	--shadow-date-field-focus: 0px 0px 0px 3px rgba(24, 24, 27, 0.17);
}
 
.dark {
	/* Colors */
	--background: hsl(0 0% 5%);
	--background-alt: hsl(0 0% 8%);
	--foreground: hsl(0 0% 95%);
	--foreground-alt: hsl(0 0% 70%);
	--muted: hsl(240 4% 16%);
	--muted-foreground: hsla(0 0% 100% / 0.4);
	--border: hsl(0 0% 96%);
	--border-input: hsla(0 0% 96% / 0.17);
	--border-input-hover: hsla(0 0% 96% / 0.4);
	--border-card: hsla(0 0% 96% / 0.1);
	--dark: hsl(0 0% 96%);
	--dark-40: hsl(0 0% 96% / 0.4);
	--dark-10: hsl(0 0% 96% / 0.1);
	--dark-04: hsl(0 0% 96% / 0.04);
	--accent: hsl(204 90% 90%);
	--accent-foreground: hsl(204 94% 94%);
	--destructive: hsl(350 89% 60%);
	--line: hsl(0 0% 9.02%);
	--tertiary: hsl(61.3 100% 82.2%);
	/* white */
	--contrast: hsl(0 0% 100%);
 
	/* Shadows */
	--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.3);
	--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.5) inset;
	--shadow-popover: 0px 7px 12px 3px hsla(0deg 0% 0% / 30%);
	--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
	--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.2);
	--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.4);
	--shadow-date-field-focus: 0px 0px 0px 3px rgba(244, 244, 245, 0.1);
}
 
@theme inline {
	--color-background: var(--background);
	--color-background-alt: var(--background-alt);
	--color-foreground: var(--foreground);
	--color-foreground-alt: var(--foreground-alt);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-border: var(--border-card);
	--color-border-input: var(--border-input);
	--color-border-input-hover: var(--border-input-hover);
	--color-border-card: var(--border-card);
	--color-dark: var(--dark);
	--color-dark-10: var(--dark-10);
	--color-dark-40: var(--dark-40);
	--color-dark-04: var(--dark-04);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-tertiary: var(--tertiary);
	--color-line: var(--line);
	--color-contrast: var(--contrast);
 
	--shadow-mini: var(--shadow-mini);
	--shadow-mini-inset: var(--shadow-mini-inset);
	--shadow-popover: var(--shadow-popover);
	--shadow-kbd: var(--shadow-kbd);
	--shadow-btn: var(--shadow-btn);
	--shadow-card: var(--shadow-card);
	--shadow-date-field-focus: var(--shadow-date-field-focus);
 
	--text-xxs: 10px;
 
	--radius-card: 16px;
	--radius-card-lg: 20px;
	--radius-card-sm: 10px;
	--radius-input: 9px;
	--radius-button: 5px;
	--radius-5px: 5px;
	--radius-9px: 9px;
	--radius-10px: 10px;
	--radius-15px: 15px;
 
	--spacing-input: 3rem;
	--spacing-input-sm: 2.5rem;
 
	--breakpoint-desktop: 1440px;
 
	--animate-accordion-down: accordion-down 0.2s ease-out;
	--animate-accordion-up: accordion-up 0.2s ease-out;
	--animate-caret-blink: caret-blink 1s ease-out infinite;
	--animate-scale-in: scale-in 0.2s ease;
	--animate-scale-out: scale-out 0.15s ease;
	--animate-fade-in: fade-in 0.2s ease;
	--animate-fade-out: fade-out 0.15s ease;
	--animate-enter-from-left: enter-from-left 0.2s ease;
	--animate-enter-from-right: enter-from-right 0.2s ease;
	--animate-exit-to-left: exit-to-left 0.2s ease;
	--animate-exit-to-right: exit-to-right 0.2s ease;
 
	--font-sans: "Inter", "sans-serif";
	--font-mono: "Source Code Pro", "monospace";
	--font-alt: "Courier", "sans-serif";
	--font-display: "Cal Sans", "sans-serif";
 
	@keyframes accordion-down {
		from {
			height: 0;
		}
		to {
			height: var(--bits-accordion-content-height);
		}
	}
 
	@keyframes accordion-up {
		from {
			height: var(--bits-accordion-content-height);
		}
		to {
			height: 0;
		}
	}
 
	@keyframes caret-blink {
		0%,
		70%,
		100% {
			opacity: 1;
		}
		20%,
		50% {
			opacity: 0;
		}
	}
 
	@keyframes enter-from-right {
		from {
			opacity: 0;
			transform: translateX(200px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
 
	@keyframes enter-from-left {
		from {
			opacity: 0;
			transform: translateX(-200px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
 
	@keyframes exit-to-right {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(200px);
		}
	}
 
	@keyframes exit-to-left {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(-200px);
		}
	}
 
	@keyframes scale-in {
		from {
			opacity: 0;
			transform: rotateX(-10deg) scale(0.9);
		}
		to {
			opacity: 1;
			transform: rotateX(0deg) scale(1);
		}
	}
 
	@keyframes scale-out {
		from {
			opacity: 1;
			transform: rotateX(0deg) scale(1);
		}
		to {
			opacity: 0;
			transform: rotateX(-10deg) scale(0.95);
		}
	}
 
	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
 
	@keyframes fade-out {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
}
 
@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-border-card, currentColor);
	}
 
	* {
		@apply border-border;
	}
	html {
		-webkit-text-size-adjust: 100%;
		font-variation-settings: normal;
		scrollbar-color: var(--bg-muted);
	}
 
	body {
		@apply bg-background text-foreground;
		font-feature-settings:
			"rlig" 1,
			"calt" 1;
	}
 
	::selection {
		background: #fdffa4;
		color: black;
	}
}
 
@layer components {
	*:not(body):not(.focus-override) {
		outline: none !important;
		&:focus-visible {
			@apply focus-visible:ring-foreground focus-visible:ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1;
		}
	}
 
	.link {
		@apply hover:text-foreground/80 focus-visible:ring-foreground focus-visible:ring-offset-background rounded-xs focus-visible:outline-hidden inline-flex items-center gap-1 font-medium underline underline-offset-4 focus-visible:ring-2 focus-visible:ring-offset-2;
	}
}

Structure

	<script lang="ts">
  import { ScrollArea } from "bits-ui";
</script>
 
<ScrollArea.Root>
  <ScrollArea.Viewport>
    <!-- Scrollable content here -->
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Reusable Components

If you're planning to use the Scroll Area throughout your application, it's recommended to create a reusable component to reduce the amount of code you need to write each time.

This example shows you how to create a Scroll Area component that accepts a few custom props that make it more capable.

MyScrollArea.svelte

	<script lang="ts">
  import { ScrollArea, type WithoutChild } from "bits-ui";
 
  type Props = WithoutChild<ScrollArea.RootProps> & {
    orientation: "vertical" | "horizontal" | "both";
    viewportClasses?: string;
  };
 
  let {
    ref = $bindable(null),
    orientation = "vertical",
    viewportClasses,
    children,
    ...restProps
  }: Props = $props();
</script>
 
{#snippet Scrollbar({
  orientation,
}: {
  orientation: "vertical" | "horizontal";
})}
  <ScrollArea.Scrollbar {orientation}>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
{/snippet}
 
<ScrollArea.Root bind:ref {...restProps}>
  <ScrollArea.Viewport class={viewportClasses}>
    {@render children?.()}
  </ScrollArea.Viewport>
  {#if orientation === "vertical" || orientation === "both"}
    {@render Scrollbar({ orientation: "vertical" })}
  {/if}
  {#if orientation === "horizontal" || orientation === "both"}
    {@render Scrollbar({ orientation: "horizontal" })}
  {/if}
  <ScrollArea.Corner />
</ScrollArea.Root>

We'll use this custom component in the following examples to demonstrate how to customize the behavior of the Scroll Area.

Scroll Area Types

Hover

The hover type is the default type of the scroll area, demonstrated in the featured example above. It only shows scrollbars when the user hovers over the scroll area and the content is larger than the viewport.

	<MyScrollArea type="hover">
  <!-- ... -->
</MyScrollArea>

Scroll Area

Scroll

The scroll type displays the scrollbars when the user scrolls the content. This is similar to the behavior of MacOS.

	<MyScrollArea type="scroll">
  <!-- ... -->
</MyScrollArea>

Scroll Area

Auto

The auto type behaves similarly to your typical browser scrollbars. When the content is larger than the viewport, the scrollbars will appear and remain visible at all times.

	<MyScrollArea type="auto">
  <!-- ... -->
</MyScrollArea>

Scroll Area

Always

The always type behaves as if you set overflow: scroll on the scroll area. Scrollbars will always be visible, even when the content is smaller than the viewport. We've also set the orientation prop on the MyScrollArea to 'both' to ensure both scrollbars are rendered.

	<MyScrollArea type="always" orientation="both">
  <!-- ... -->
</MyScrollArea>

Scroll Area

Customizing the Hide Delay

You can customize the hide delay of the scrollbars using the scrollHideDelay prop.

	<MyScrollArea scrollHideDelay={10}>
  <!-- ... -->
</MyScrollArea>

Scroll Area

API Reference

ScrollArea.Root

The container of all scroll area components. Overflow is hidden on this element to prevent double scrollbars.

Property	Type	Description
`type`	`enum`	The type of scroll area. `Default: 'hover'`
`scrollHideDelay`	`number`	The delay in milliseconds before the scroll area hides itself when using `'hover'` or `'scroll'` type. `Default: 600`
`dir`	`enum`	The reading direction of the app. `Default: 'ltr'`
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-scroll-area-root`	`''`	Present on the root element.

ScrollArea.Viewport

The component which wraps the content and is responsible for computing the scroll area size.

Property	Type	Description	Details
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-scroll-area-viewport`	`''`	Present on the viewport element.

ScrollArea.Scrollbar

A scrollbar of the scroll area.

Property	Type	Description
`orientation` required	`enum`	The orientation of the scrollbar. `Default: —— undefined`
`forceMount`	`boolean`	Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content. `Default: false`
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-state`	`enum`	The visibility state of the scrollbar
`data-scroll-area-scrollbar-x`	`''`	Present on the `'horizontal'` scrollbar element.
`data-scroll-area-scrollbar-y`	`''`	Present on the `'vertical'` scrollbar element.

ScrollArea.Thumb

A thumb of a scrollbar in the scroll area.

Property	Type	Description
`forceMount`	`boolean`	Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content. `Default: false`
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-state`	`enum`	The visibility state of the scrollbar
`data-scroll-area-thumb-x`	`''`	Present on the `'horizontal'` thumb element.
`data-scroll-area-thumb-y`	`''`	Present on the `'vertical'` thumb element.

ScrollArea.Corner

The corner element between the X and Y scrollbars.

Property	Type	Description
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-scroll-area-corner`	`''`	Present on the corner element.

Scroll Area Documentation

Scroll Area

Structure

Reusable Components

Scroll Area Types

Hover

Scroll Area

Scroll

Scroll Area

Auto

Scroll Area

Always

Scroll Area

Customizing the Hide Delay

Scroll Area

API Reference

ScrollArea.Root

ScrollArea.Viewport

ScrollArea.Scrollbar

ScrollArea.Thumb

ScrollArea.Corner

Scroll Area