Scroll Area

A scrollable container that styles native scrollbars with a thin, rounded thumb.

Examples

Vertical list

Constrain the wrapper height to scroll a long list of tags.

Tags

v1.2.0-beta.50

v1.2.0-beta.49

v1.2.0-beta.48

v1.2.0-beta.47

v1.2.0-beta.46

v1.2.0-beta.45

v1.2.0-beta.44

v1.2.0-beta.43

v1.2.0-beta.42

v1.2.0-beta.41

v1.2.0-beta.40

v1.2.0-beta.39

<.scroll_area class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <div class="mb-4 text-sm leading-none font-medium">Tags</div>
    <div class="text-sm">v1.2.0-beta.50</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.49</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.48</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.47</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.46</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.45</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.44</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.43</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.42</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.41</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.40</div>
    <div class="my-2 h-px bg-border"></div>
    <div class="text-sm">v1.2.0-beta.39</div>
  </div>
</.scroll_area>

Show code

Scrollable prose

Constrain the height to scroll a block of text.

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place.

The king and the kingdom were tired of Jokester's jokes, and they couldn't seem to stop them. But Jokester was clever and always one step ahead.

One day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh.

And once they started laughing, they couldn't stop. The kingdom was filled with laughter, and Jokester's identity remained a mystery.

<.scroll_area class="h-40 w-96 rounded-md border">
  <div class="space-y-3 p-4 text-sm">
    <p>Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place.</p>
    <p>The king and the kingdom were tired of Jokester's jokes, and they couldn't seem to stop them. But Jokester was clever and always one step ahead.</p>
    <p>One day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh.</p>
    <p>And once they started laughing, they couldn't stop. The kingdom was filled with laughter, and Jokester's identity remained a mystery.</p>
  </div>
</.scroll_area>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot