Quick Links

Scroll Area

Custom-styled scrollable area using native functionality.

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.Root>
  <ScrollArea.Viewport 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.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

API Reference

Root

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`type`	`"auto" \| "always" \| "scroll" \| "hover"`	`"hover"`

Viewport

The viewport area of the scroll area.

Prop	Type	Default
`indicators`	`"left" \| "right" \| "top" \| "bottom" \| "y" \| "x" \| "all" \| "none"`	`"none"`

Scrollbar

The vertical scrollbar. Add a second Scrollbar with an orientation prop to enable horizontal scrolling.

Examples

With scroll indicators

Principles of the typographic craft

 <ScrollArea.Root>
  <ScrollArea.Viewport indicators="all" 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.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

With custom indicators sides

In most cases the default behavior of none or all should adapt to most situations, but when you need more control you can use a more specific indicator:

Top only indicator

Bottom only indicator

 <Grid columns="2" gap="2">
  <ScrollArea.Root>
    <ScrollArea.Viewport indicators="top" style={{ height: 180 }}>
      <Box p="2" pr="8">
        <Heading size="4" mb="2" trim="start">
          Top only indicator
        </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.Viewport>

    <ScrollArea.Scrollbar orientation="horizontal" />
    <ScrollArea.Scrollbar orientation="vertical" />
  </ScrollArea.Root>

  <ScrollArea.Root>
    <ScrollArea.Viewport indicators="bottom" style={{ height: 180 }}>
      <Box p="2" pr="8">
        <Heading size="4" mb="2" trim="start">
          Bottom only indicator
        </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.Viewport>

    <ScrollArea.Scrollbar orientation="horizontal" />
    <ScrollArea.Scrollbar orientation="vertical" />
  </ScrollArea.Root>
</Grid>

Horizontal scroll with indicators

Principles of the typographic craft

 <ScrollArea.Root>
  <ScrollArea.Viewport indicators="x" style={{ height: 180 }}>
    <Box p="2" pr="8">
      <Heading size="4" mb="2" trim="start">
        Principles of the typographic craft
      </Heading>
      <Box
        height="120px"
        width="100vw"
        style={{
          background: 'linear-gradient(45deg, var(--accent-9), var(--jade-9))',
        }}
      />
    </Box>
  </ScrollArea.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

Vertical and horizontal with scroll indicators

Principles of the typographic craft

 <ScrollArea.Root>
  <ScrollArea.Viewport indicators="all" 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>

        <Box
          height="80px"
          width="100vw"
          style={{
            background:
              'linear-gradient(45deg, var(--accent-9), var(--jade-9))',
          }}
        />

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

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>

With content smaller than viewport

Principles of the typographic craft

 <ScrollArea.Root>
  <ScrollArea.Viewport indicators="all" style={{ height: 180 }}>
    <Box p="2" pr="8">
      <Heading size="4" mb="2" trim="start">
        Principles of the typographic craft
      </Heading>
      <Box
        height="120px"
        width="120px"
        style={{
          background: 'linear-gradient(45deg, var(--accent-9), var(--jade-9))',
        }}
      />
    </Box>
  </ScrollArea.Viewport>

  <ScrollArea.Scrollbar orientation="horizontal" />
  <ScrollArea.Scrollbar orientation="vertical" />
</ScrollArea.Root>