Components / Scroll Area
Scroll Area
Custom-styled scroll container with themed scrollbars. Native scrolling with tokenized scrollbar thumbs — three visibility modes (auto / always / hover) and three orientations (vertical / horizontal / both).
layout v0.7.0
Playground
Examples
Vertical (default · hover)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
<cg-scroll-area style="height:200px;width:360px;padding:16px;background:var(--cg-color-surface-cards-background);border:1px solid var(--cg-color-surface-cards-border);border-radius:10px;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 1</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 2</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 3</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 4</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 5</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 6</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 7</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 8</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 9</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 10</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 11</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 12</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 13</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 14</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 15</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 16</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 17</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 18</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 19</div><div style="padding:10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Item 20</div></div></cg-scroll-area>Horizontal (always)
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
<cg-scroll-area orientation="horizontal" type="always" style="height:96px;width:360px;padding:12px;background:var(--cg-color-surface-cards-background);border:1px solid var(--cg-color-surface-cards-border);border-radius:10px;"><div style="display:flex;gap:8px;"><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 1</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 2</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 3</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 4</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 5</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 6</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 7</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 8</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 9</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 10</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 11</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 12</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 13</div><div style="flex-shrink:0;padding:18px 24px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Card 14</div></div></cg-scroll-area>Both (always — wide grid)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
<cg-scroll-area orientation="both" type="always" style="height:200px;width:360px;padding:12px;background:var(--cg-color-surface-cards-background);border:1px solid var(--cg-color-surface-cards-border);border-radius:10px;"><div style="display:grid;grid-template-columns:repeat(8,120px);gap:8px;"><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 1</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 2</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 3</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 4</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 5</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 6</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 7</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 8</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 9</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 10</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 11</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 12</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 13</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 14</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 15</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 16</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 17</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 18</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 19</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 20</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 21</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 22</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 23</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 24</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 25</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 26</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 27</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 28</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 29</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 30</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 31</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 32</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 33</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 34</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 35</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 36</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 37</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 38</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 39</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 40</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 41</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 42</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 43</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 44</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 45</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 46</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 47</div><div style="padding:10px 14px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;white-space:nowrap;">Item 48</div></div></cg-scroll-area>Hover-only scrollbar
Hover the area to reveal the scrollbar.
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
<cg-scroll-area type="hover" style="height:160px;width:360px;padding:16px;background:var(--cg-color-surface-cards-background);border:1px solid var(--cg-color-surface-cards-border);border-radius:10px;"><p style="margin:0 0 12px;font-size:13px;color:var(--cg-color-surface-container-outlined);">Hover the area to reveal the scrollbar.</p><div style="display:flex;flex-direction:column;gap:6px;"><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 1</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 2</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 3</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 4</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 5</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 6</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 7</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 8</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 9</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 10</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 11</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 12</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 13</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 14</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 15</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 16</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 17</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 18</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 19</div><div style="padding:8px 10px;background:var(--cg-color-surface-container-background);border-radius:6px;font-size:13px;">Line 20</div></div></cg-scroll-area>Import
import { CgScrollArea } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-scroll-area';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | "both" | "vertical" | Scroll direction |
type | "auto" | "always" | "hover" | "hover" | Scrollbar visibility — auto = on overflow, always = always visible, hover = only when hovering the area |