# Scroll Area

Custom-styled scrollable area using native functionality.

```jsx
<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](#api-reference)

This component inherits props from the ScrollArea primitive [Root](/primitives/docs/components/scroll-area#root) and [Viewport](/primitives/docs/components/scroll-area#viewport) parts. It supports [common margin props](/themes/docs/overview/layout#margin-props).

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

## [Examples](#examples)

### [Size](#size)

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

```jsx
<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](#radius)

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

```jsx
<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](#scrollbars)

Use the `scrollbars` prop to limit scrollable axes.

```jsx
<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>
```