# Scroll Area

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<ScrollArea type="always" scrollbars="vertical" style={{
    "height": "180px"
  }}>

	<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](/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`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                            | —        |
| `size`                                                                                                                                                                 | `Responsive<"1" \| "2" \| "3">`                      | `"1"`    |
| `radius`Overrides the radius inherited from the theme. See the [radius guide](/themes/docs/theme/radius) for more details.                                             | `"none" \| "small" \| "medium" \| "large" \| "full"` | —        |
| `scrollbars`Controls the scrollable axes.                                                                                                                              | `"vertical" \| "horizontal" \| "both"`               | `"both"` |

## Examples

### 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": "300px",
      "height": "12px"
    }}>

		<Box width="800px" height="1px" />

	</ScrollArea>



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

		<Box width="900px" height="1px" />

	</ScrollArea>



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

		<Box width="1000px" height="1px" />

	</ScrollArea>

</Flex>
```

### 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": "350px",
      "height": "20px"
    }}>

		<Box width="800px" height="1px" />

	</ScrollArea>



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

		<Box width="800px" height="1px" />

	</ScrollArea>

</Flex>
```

### Scrollbars

Use the `scrollbars` prop to limit scrollable axes.

```jsx
<Grid columns="2" gap="2">

	<ScrollArea type="always" scrollbars="vertical" style={{
      "height": "150px"
    }}>

		<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": "150px"
    }}>

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

</Grid>
```