Source: https://www.radix-ui.com/themes/docs/components/scroll-area

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Components

Scroll Area

Custom-styled scrollable area using native functionality.

View source Report an issue View in Playground

Principles of the typographic craft

Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense “legible” and “readable” are often used synonymously, typographically they are separate but related concepts.

Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as “the quality of being decipherable and recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to distinguish at small sizes, this is a problem of legibility.

Typographers are concerned with legibility insofar as it is their job to select the correct font to use. Brush Script is an example of a font containing many characters that might be difficult to distinguish. The selection of cases influences the legibility of typography because using only uppercase letters (all-caps) reduces legibility.

<ScrollArea type="always" scrollbars="vertical" style={{ height: 180 }}>
	<Box p="2" pr="8">
		<Heading size="4" mb="2" trim="start">
			Principles of the typographic craft
		</Heading>
		<Flex direction="column" gap="4">
			<Text as="p">
				Three fundamental aspects of typography are legibility, readability, and
				aesthetics. Although in a non-technical sense “legible” and “readable”
				are often used synonymously, typographically they are separate but
				related concepts.
			</Text>

			<Text as="p">
				Legibility describes how easily individual characters can be
				distinguished from one another. It is described by Walter Tracy as “the
				quality of being decipherable and recognisable”. For instance, if a “b”
				and an “h”, or a “3” and an “8”, are difficult to distinguish at small
				sizes, this is a problem of legibility.
			</Text>

			<Text as="p">
				Typographers are concerned with legibility insofar as it is their job to
				select the correct font to use. Brush Script is an example of a font
				containing many characters that might be difficult to distinguish. The
				selection of cases influences the legibility of typography because using
				only uppercase letters (all-caps) reduces legibility.
			</Text>
		</Flex>
	</Box>
</ScrollArea>

API Reference

---

This component inherits props from the ScrollArea primitive Root and Viewport parts. It supports common margin props .

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | No default value | | size | Responsive<"1" \| "2" \| "3"> | "1" | | radius<br><br>Prop description | "none" \| "small" \| "medium" \| "large" \| "full" | No default value | | scrollbars<br><br>Prop description | "vertical" \| "horizontal" \| "both" | "both" |

Examples

---

Size

Use the size prop to control the size of the scrollbar handles.

<Flex direction="column" gap="2">
	<ScrollArea
		size="1"
		type="always"
		scrollbars="horizontal"
		style={{ width: 300, height: 12 }}
	>
		<Box width="800px" height="1px" />
	</ScrollArea>

	<ScrollArea
		size="2"
		type="always"
		scrollbars="horizontal"
		style={{ width: 350, height: 16 }}
	>
		<Box width="900px" height="1px" />
	</ScrollArea>

	<ScrollArea
		size="3"
		type="always"
		scrollbars="horizontal"
		style={{ width: 400, height: 20 }}
	>
		<Box width="1000px" height="1px" />
	</ScrollArea>
</Flex>

Radius

Use the radius prop to assign a specific radius to the handles.

<Flex direction="column" gap="3">
	<ScrollArea
		radius="none"
		type="always"
		scrollbars="horizontal"
		style={{ width: 350, height: 20 }}
	>
		<Box width="800px" height="1px" />
	</ScrollArea>

	<ScrollArea
		radius="full"
		type="always"
		scrollbars="horizontal"
		style={{ width: 350, height: 20 }}
	>
		<Box width="800px" height="1px" />
	</ScrollArea>
</Flex>

Scrollbars

Use the scrollbars prop to limit scrollable axes.

Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense "legible" and "readable" are often used synonymously, typographically they are separate but related concepts.Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable and recognisable". For instance, if a "b" and an "h", or a "3" and an "8", are difficult to distinguish at small sizes, this is a problem of legibility.

Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense "legible" and "readable" are often used synonymously, typographically they are separate but related concepts.Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable and recognisable". For instance, if a "b" and an "h", or a "3" and an "8", are difficult to distinguish at small sizes, this is a problem of legibility.

<Grid columns="2" gap="2">
	<ScrollArea type="always" scrollbars="vertical" style={{ height: 150 }}>
		<Flex p="2" pr="8" direction="column" gap="4">
			<Text size="2" trim="both">
				Three fundamental aspects of typography are legibility, readability, and
				aesthetics. Although in a non-technical sense "legible" and "readable"
				are often used synonymously, typographically they are separate but
				related concepts.
			</Text>

			<Text size="2" trim="both">
				Legibility describes how easily individual characters can be
				distinguished from one another. It is described by Walter Tracy as "the
				quality of being decipherable and recognisable". For instance, if a "b"
				and an "h", or a "3" and an "8", are difficult to distinguish at small
				sizes, this is a problem of legibility.
			</Text>
		</Flex>
	</ScrollArea>

	<ScrollArea type="always" scrollbars="horizontal" style={{ height: 150 }}>
		<Flex gap="4" p="2" width="700px">
			<Text size="2" trim="both">
				Three fundamental aspects of typography are legibility, readability, and
				aesthetics. Although in a non-technical sense "legible" and "readable"
				are often used synonymously, typographically they are separate but
				related concepts.
			</Text>

			<Text size="2" trim="both">
				Legibility describes how easily individual characters can be
				distinguished from one another. It is described by Walter Tracy as "the
				quality of being decipherable and recognisable". For instance, if a "b"
				and an "h", or a "3" and an "8", are difficult to distinguish at small
				sizes, this is a problem of legibility.
			</Text>
		</Flex>
	</ScrollArea>
</Flex>

PreviousRadio Cards

NextSegmented Control

Edit this page on GitHub.