diff --git a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/builder/component/VerticalScrollBarBuilder.kt b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/builder/component/VerticalScrollBarBuilder.kt
index a4a31706f8..0d58a2bcdb 100644
--- a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/builder/component/VerticalScrollBarBuilder.kt
+++ b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/builder/component/VerticalScrollBarBuilder.kt
@@ -19,17 +19,24 @@ class VerticalScrollBarBuilder(
     private var maxValue: Int = 100
 ) : BaseComponentBuilder<ScrollBar, VerticalScrollBarBuilder>(VerticalScrollBarRenderer()) {
 
+    private var itemsShownAtOnce: Int? = null
+
     fun withNumberOfScrollableItems(items: Int) = also {
         require(items > 0) { "Number of items must be greater than 0." }
         this.maxValue = items
     }
 
+    fun withItemsShownAtOnce(count: Int) = also {
+        require(count > 0) { "Count must be greater than 0." }
+        this.itemsShownAtOnce = count
+    }
+
     override fun build(): ScrollBar = DefaultVerticalScrollBar(
         componentMetadata = createMetadata(),
         renderingStrategy = createRenderingStrategy(),
         minValue = minValue,
         maxValue = maxValue,
-        itemsShownAtOnce = size.height,
+        itemsShownAtOnce = itemsShownAtOnce ?: size.height,
         numberOfSteps = size.height,
     )
 
diff --git a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/fragment/ScrollableList.kt b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/fragment/ScrollableList.kt
new file mode 100644
index 0000000000..71ed3b703c
--- /dev/null
+++ b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/api/fragment/ScrollableList.kt
@@ -0,0 +1,10 @@
+package org.hexworks.zircon.api.fragment
+
+import org.hexworks.zircon.api.Beta
+import org.hexworks.zircon.api.component.Fragment
+
+@Beta
+interface ScrollableList<T> : Fragment {
+    val items: List<T>
+    fun scrollTo(idx: Int)
+}
diff --git a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/BaseScrollBar.kt b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/BaseScrollBar.kt
index a4d7503b61..626a2aedc1 100644
--- a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/BaseScrollBar.kt
+++ b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/BaseScrollBar.kt
@@ -59,11 +59,7 @@ abstract class BaseScrollBar(
     }
 
     private fun computeCurrentStep(newValue: Int) {
-        val actualValue = when {
-            newValue > maxValue -> maxValue
-            newValue < minValue -> minValue
-            else -> newValue
-        }
+        val actualValue = newValue.coerceIn(minValue..maxValue)
         val actualStep = actualValue.toDouble() / valuePerStep
         val roundedStep = truncate(actualStep)
         currentStep = roundedStep.toInt()
@@ -84,6 +80,9 @@ abstract class BaseScrollBar(
     override fun incrementStep() {
         if (currentStep + barSizeInSteps < numberOfSteps) {
             computeValueToClosestOfStep(currentStep + 1)
+        } else {
+            // Try to increase by partial step, so we can always get to the last partial page of items
+            incrementValues()
         }
     }
 
@@ -168,6 +167,20 @@ abstract class BaseScrollBar(
         } else Pass
     }
 
+    override fun mouseWheelRotatedUp(event: MouseEvent, phase: UIEventPhase): UIEventResponse {
+        if (phase != UIEventPhase.TARGET) return Pass
+        val originalValue = currentValue
+        decrementStep()
+        return if (currentValue != originalValue) Processed else Pass
+    }
+
+    override fun mouseWheelRotatedDown(event: MouseEvent, phase: UIEventPhase): UIEventResponse {
+        if (phase != UIEventPhase.TARGET) return Pass
+        val originalValue = currentValue
+        incrementStep()
+        return if (currentValue != originalValue) Processed else Pass
+    }
+
     abstract override fun keyPressed(event: KeyboardEvent, phase: UIEventPhase): UIEventResponse
 
     override fun activated() = whenEnabledRespondWith {
diff --git a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/DefaultVerticalScrollBar.kt b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/DefaultVerticalScrollBar.kt
index 4e30cea77b..f8fb9f1bc9 100644
--- a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/DefaultVerticalScrollBar.kt
+++ b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/impl/DefaultVerticalScrollBar.kt
@@ -31,11 +31,11 @@ class DefaultVerticalScrollBar(
         if (phase == UIEventPhase.TARGET) {
             when (event.code) {
                 KeyCode.UP -> {
-                    incrementValues()
+                    decrementValues()
                     Processed
                 }
                 KeyCode.DOWN -> {
-                    decrementValues()
+                    incrementValues()
                     Processed
                 }
                 KeyCode.RIGHT -> {
diff --git a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/renderer/VerticalScrollBarRenderer.kt b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/renderer/VerticalScrollBarRenderer.kt
index 7f19fa2770..88d43a7557 100644
--- a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/renderer/VerticalScrollBarRenderer.kt
+++ b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/component/renderer/VerticalScrollBarRenderer.kt
@@ -8,10 +8,12 @@ import org.hexworks.zircon.api.data.Position
 import org.hexworks.zircon.api.data.Tile
 import org.hexworks.zircon.api.graphics.TileGraphics
 
-@Suppress("DuplicatedCode")
-class VerticalScrollBarRenderer : ComponentRenderer<ScrollBar> {
+open class VerticalScrollBarRenderer internal constructor() : ComponentRenderer<ScrollBar> {
+    open val aboveBarCharacter: Char = ' '
+    open val belowBarCharacter: Char = ' '
+    open val barCharacter: Char = ' '
 
-    override fun render(tileGraphics: TileGraphics, context: ComponentRenderContext<ScrollBar>) {
+    final override fun render(tileGraphics: TileGraphics, context: ComponentRenderContext<ScrollBar>) {
         val defaultStyleSet = context.componentStyle.fetchStyleFor(ComponentState.DEFAULT)
         val invertedDefaultStyleSet = defaultStyleSet
             .withBackgroundColor(defaultStyleSet.foregroundColor)
@@ -24,18 +26,18 @@ class VerticalScrollBarRenderer : ComponentRenderer<ScrollBar> {
 
         tileGraphics.applyStyle(context.currentStyle)
 
-        (0..totalScrollBarHeight).forEach { idx ->
+        (0 until totalScrollBarHeight).forEach { idx ->
             when {
                 idx < lowBarPosition -> tileGraphics.draw(
-                    Tile.createCharacterTile(' ', disabledStyleSet),
+                    Tile.createCharacterTile(aboveBarCharacter, disabledStyleSet),
                     Position.create(0, idx)
                 )
                 idx > highBarPosition -> tileGraphics.draw(
-                    Tile.createCharacterTile(' ', disabledStyleSet),
+                    Tile.createCharacterTile(belowBarCharacter, disabledStyleSet),
                     Position.create(0, idx)
                 )
                 else -> tileGraphics.draw(
-                    Tile.createCharacterTile(' ', invertedDefaultStyleSet),
+                    Tile.createCharacterTile(barCharacter, invertedDefaultStyleSet),
                     Position.create(0, idx)
                 )
             }
diff --git a/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/fragment/impl/VerticalScrollableList.kt b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/fragment/impl/VerticalScrollableList.kt
new file mode 100644
index 0000000000..20be78596f
--- /dev/null
+++ b/zircon.core/src/commonMain/kotlin/org/hexworks/zircon/internal/fragment/impl/VerticalScrollableList.kt
@@ -0,0 +1,138 @@
+package org.hexworks.zircon.internal.fragment.impl
+
+import org.hexworks.zircon.api.Components
+import org.hexworks.zircon.api.component.Label
+import org.hexworks.zircon.api.component.ScrollBar
+import org.hexworks.zircon.api.component.renderer.ComponentRenderer
+import org.hexworks.zircon.api.data.Position
+import org.hexworks.zircon.api.data.Size
+import org.hexworks.zircon.api.fragment.ScrollableList
+import org.hexworks.zircon.api.graphics.Symbols
+import org.hexworks.zircon.api.uievent.ComponentEventType
+
+/**
+ * This creates a vertically-scrolling list. You provide a list of [items] and a subset of them are rendered with
+ * a scrollbar on the right side.
+ *
+ * ### Navigation
+ * * To scroll by **single row**, you can click or activate the top/bottom arrows. Arrow keys while the bar is focused also
+ * works.
+ * * To scroll by **step** (small jumps), you can click on the empty parts above or below the bar, or use the mouse wheel.
+ * * You can also click and drag the bar itself.
+ *
+ * ### Limitations
+ * * [items] is immutable. You can't change the list after its created.
+ * * [items] aren't focusable. You can click on them, but you can't tab to them.
+ * * Each [item][items] can't span multiple lines. It will be clipped if it's too long.
+ * * Even if [items] fully fits in [size], a scrollbar will still be displayed.
+ */
+class VerticalScrollableList<T>(
+    private val size: Size,
+    position: Position,
+    override val items: List<T>,
+    /** Handler for when an item in the list is activated. */
+    private val onItemActivated: (item: T, idx: Int) -> Unit = { _, _ -> },
+    /** Transform items in [items] into displayable strings. */
+    private val renderItem: (T) -> String = { it.toString() },
+    /** If set, use this instead of the default [ComponentRenderer] for the [ScrollBar] created internally. */
+    private val scrollbarRenderer: ComponentRenderer<ScrollBar>? = null
+) : ScrollableList<T> {
+    /** Reusable list of labels we display in the main scroll panel. */
+    private val labels = mutableListOf<Label>()
+
+    /** Index in [items] of the top item we're showing in the main scroll panel. */
+    private var topItemIdx: Int = 0
+
+    override val root = Components.hbox()
+        .withSize(size)
+        .withPosition(position)
+        .withSpacing(0)
+        .build()
+
+    private val scrollPanel = Components.vbox()
+        .withSize(size.withRelativeWidth(-1))
+        .withDecorations()
+        .withSpacing(0)
+        .build()
+
+    private val scrollBarVbox = Components.vbox()
+        .withSize(size.withWidth(1))
+        .withDecorations()
+        .withSpacing(0)
+        .build()
+
+    private val actualScrollbar: ScrollBar = Components.verticalScrollbar()
+        .withSize(1, size.height - 2)
+        .withItemsShownAtOnce(size.height)
+        .withNumberOfScrollableItems(items.size)
+        .withDecorations()
+        .also { builder ->
+            scrollbarRenderer?.let { builder.withComponentRenderer(it) }
+        }
+        .build()
+
+    private val decrementButton = Components.button()
+        .withText("${Symbols.TRIANGLE_UP_POINTING_BLACK}")
+        .withSize(1, 1)
+        .withDecorations()
+        .build()
+
+    private val incrementButton = Components.button()
+        .withText("${Symbols.TRIANGLE_DOWN_POINTING_BLACK}")
+        .withSize(1, 1)
+        .withDecorations()
+        .build()
+
+    init {
+        root.addComponents(scrollPanel, scrollBarVbox)
+
+        decrementButton.processComponentEvents(ComponentEventType.ACTIVATED) {
+            actualScrollbar.decrementValues()
+        }
+        incrementButton.processComponentEvents(ComponentEventType.ACTIVATED) {
+            actualScrollbar.incrementValues()
+        }
+
+        actualScrollbar.onValueChange {
+            scrollTo(it.newValue)
+        }
+
+        scrollBarVbox.addComponents(decrementButton, actualScrollbar, incrementButton)
+
+        displayListFromIndex()
+    }
+
+    override fun scrollTo(idx: Int) {
+        topItemIdx = idx
+        displayListFromIndex()
+    }
+
+    private fun displayListFromIndex() {
+        val maxIdx = when {
+            topItemIdx + size.height < items.size -> topItemIdx + size.height
+            else -> items.size
+        }
+        for (idx in topItemIdx until maxIdx) {
+            val labelIdx = idx - topItemIdx
+            // Generate and add labels until we have enough for the current entry
+            while (labelIdx > labels.lastIndex) {
+                labels.add(Components.label()
+                    .withDecorations()
+                    .withSize(scrollPanel.contentSize.withHeight(1))
+                    .build()
+                    .also { label ->
+                        scrollPanel.addComponent(label)
+                        label.onActivated {
+                            onItemActivated(items[topItemIdx + labelIdx], topItemIdx + labelIdx)
+                        }
+                    }
+                )
+            }
+            labels[labelIdx].text = renderItem(items[idx])
+        }
+        // Clear any remaining labels, just in case
+        for (labelIdx in (maxIdx - topItemIdx) until labels.size) {
+            labels[labelIdx].text = ""
+        }
+    }
+}
diff --git a/zircon.core/src/commonTest/kotlin/org/hexworks/zircon/internal/renderer/TestRenderer.kt b/zircon.core/src/commonTest/kotlin/org/hexworks/zircon/internal/renderer/TestRenderer.kt
new file mode 100644
index 0000000000..a758c6167e
--- /dev/null
+++ b/zircon.core/src/commonTest/kotlin/org/hexworks/zircon/internal/renderer/TestRenderer.kt
@@ -0,0 +1,79 @@
+package org.hexworks.zircon.internal.renderer
+
+import org.hexworks.cobalt.databinding.api.extension.toProperty
+import org.hexworks.cobalt.databinding.api.property.Property
+import org.hexworks.cobalt.databinding.api.value.ObservableValue
+import org.hexworks.zircon.api.behavior.Clearable
+import org.hexworks.zircon.api.component.ComponentContainer
+import org.hexworks.zircon.api.data.Size
+import org.hexworks.zircon.api.graphics.TileGraphics
+import org.hexworks.zircon.api.grid.TileGrid
+import org.hexworks.zircon.api.resource.TilesetResource
+import org.hexworks.zircon.api.uievent.UIEvent
+import org.hexworks.zircon.api.uievent.UIEventResponse
+import org.hexworks.zircon.api.view.base.BaseView
+import org.hexworks.zircon.internal.behavior.RenderableContainer
+import org.hexworks.zircon.internal.config.RuntimeConfig
+import org.hexworks.zircon.internal.graphics.FastTileGraphics
+import org.hexworks.zircon.internal.grid.ThreadSafeTileGrid
+import org.hexworks.zircon.internal.uievent.UIEventDispatcher
+
+/**
+ * This is a simple test renderer that draws things back into the provided [tileGraphics]. After instantiation,
+ * you should call [withComponentContainer] to add components and fragments, and then call [render] to see the result.
+ * You can also [dispatch] events to interact with it.
+ *
+ * @sample org.hexworks.zircon.internal.renderer.TestRendererTest.tinyExample
+ */
+class TestRenderer(
+    private val tileGraphics: TileGraphics,
+    tileset: TilesetResource = RuntimeConfig.config.defaultTileset,
+    gridSize: Size = Size.defaultGridSize()
+) : UIEventDispatcher, Renderer, Clearable {
+    private val tileGrid: TileGrid = ThreadSafeTileGrid(tileset, gridSize)
+    private val mainView = object : BaseView(tileGrid) {}
+    private val closedValueProperty: Property<Boolean> = false.toProperty()
+    override val closedValue: ObservableValue<Boolean> get() = closedValueProperty
+
+    init {
+        mainView.dock()
+    }
+
+    fun withComponentContainer(cb: ComponentContainer.() -> Unit) {
+        with(mainView.screen, cb)
+    }
+
+    override fun create() {
+    }
+
+    override fun clear() {
+        tileGraphics.clear()
+    }
+
+    override fun render() {
+        (tileGrid as RenderableContainer).renderables.forEach { renderable ->
+            if (!renderable.isHidden) {
+                val graphics = FastTileGraphics(
+                    initialSize = renderable.size,
+                    initialTileset = renderable.tileset,
+                    initialTiles = mapOf()
+                )
+                renderable.render(graphics)
+                graphics.contents().forEach { (pos, tile) ->
+                    tileGraphics.draw(tile, pos + renderable.position)
+                }
+            }
+        }
+    }
+
+    override fun dispatch(event: UIEvent): UIEventResponse = (mainView.screen as UIEventDispatcher).dispatch(event)
+
+    override fun close() {
+        if (!closedValueProperty.value) {
+            tileGrid.close()
+            closedValueProperty.value = true
+        }
+    }
+
+    override val isClosed: ObservableValue<Boolean> get() = closedValue
+}
diff --git a/zircon.core/src/jvmTest/kotlin/org/hexworks/zircon/internal/fragment/impl/VerticalScrollableListTest.kt b/zircon.core/src/jvmTest/kotlin/org/hexworks/zircon/internal/fragment/impl/VerticalScrollableListTest.kt
new file mode 100644
index 0000000000..c880742fdd
--- /dev/null
+++ b/zircon.core/src/jvmTest/kotlin/org/hexworks/zircon/internal/fragment/impl/VerticalScrollableListTest.kt
@@ -0,0 +1,185 @@
+package org.hexworks.zircon.internal.fragment.impl
+
+import org.assertj.core.api.Assertions.assertThat
+import org.hexworks.zircon.api.DrawSurfaces
+import org.hexworks.zircon.api.data.Position
+import org.hexworks.zircon.api.data.Size
+import org.hexworks.zircon.api.graphics.TileGraphics
+import org.hexworks.zircon.api.uievent.*
+import org.hexworks.zircon.convertCharacterTilesToString
+import org.hexworks.zircon.internal.component.renderer.VerticalScrollBarRenderer
+import org.hexworks.zircon.internal.renderer.TestRenderer
+import org.junit.Test
+
+class VerticalScrollableListTest {
+    private val graphics: TileGraphics =
+        DrawSurfaces
+            .tileGraphicsBuilder()
+            .withSize(Size.create(8, 10))
+            .build()
+
+    private val scrollableListFragment = VerticalScrollableList(
+        graphics.size,
+        Position.zero(),
+        (1..20).map { "Item $it" },
+        scrollbarRenderer = TestScrollbarRenderer
+    )
+    private val testRenderer = TestRenderer(graphics).apply {
+        withComponentContainer {
+            addFragment(scrollableListFragment)
+        }
+    }
+
+    @Test
+    fun rendersCorrectly() {
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo(
+            """
+            Item 1 ▲
+            Item 2 +
+            Item 3 +
+            Item 4 +
+            Item 5 +
+            Item 6 |
+            Item 7 |
+            Item 8 |
+            Item 9 |
+            Item 10▼
+        """.trimIndent()
+        )
+    }
+
+    @Test
+    fun scrollsCorrectly() {
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo(
+            """
+            Item 1 ▲
+            Item 2 +
+            Item 3 +
+            Item 4 +
+            Item 5 +
+            Item 6 |
+            Item 7 |
+            Item 8 |
+            Item 9 |
+            Item 10▼
+        """.trimIndent()
+        )
+        testRenderer.dispatch(TAB) // top arrow
+        testRenderer.dispatch(TAB) // scrollbar
+        testRenderer.dispatch(TAB) // bottom arrow
+        assertThat(testRenderer.dispatch(SPACE)).isEqualTo(Processed)
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo(
+            """
+            Item 2 ▲
+            Item 3 +
+            Item 4 +
+            Item 5 +
+            Item 6 +
+            Item 7 |
+            Item 8 |
+            Item 9 |
+            Item 10|
+            Item 11▼
+        """.trimIndent()
+        )
+    }
+
+    @Test
+    fun scrollsToBottomCorrectly() {
+        testRenderer.dispatch(TAB) // top arrow
+        testRenderer.dispatch(TAB) // scrollbar
+        testRenderer.dispatch(TAB) // bottom arrow
+        repeat(20) {
+            testRenderer.dispatch(SPACE)
+        }
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo(
+            """
+            Item 11▲
+            Item 12|
+            Item 13|
+            Item 14|
+            Item 15|
+            Item 16+
+            Item 17+
+            Item 18+
+            Item 19+
+            Item 20▼
+        """.trimIndent()
+        )
+    }
+
+    @Test
+    fun canScrollByMousePressingEmptyBar() {
+        val pos = Position.create(7, 6)
+        testRenderer.dispatch(
+            MouseEvent(
+                MouseEventType.MOUSE_PRESSED,
+                1,
+                pos
+            )
+        )
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo(
+            """
+            Item 4 ▲
+            Item 5 |
+            Item 6 +
+            Item 7 +
+            Item 8 +
+            Item 9 +
+            Item 10|
+            Item 11|
+            Item 12|
+            Item 13▼
+        """.trimIndent()
+        )
+    }
+
+    @Test
+    fun canScrollUsingMouseWheel() {
+        testRenderer.dispatch(
+            MouseEvent(
+                MouseEventType.MOUSE_WHEEL_ROTATED_DOWN,
+                1,
+                Position.create(7, 1)
+            )
+        )
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo(
+            """
+            Item 4 ▲
+            Item 5 |
+            Item 6 +
+            Item 7 +
+            Item 8 +
+            Item 9 +
+            Item 10|
+            Item 11|
+            Item 12|
+            Item 13▼
+        """.trimIndent()
+        )
+    }
+}
+
+private val SPACE = KeyboardEvent(
+    type = KeyboardEventType.KEY_PRESSED,
+    code = KeyCode.SPACE,
+    key = " "
+)
+
+private val TAB = KeyboardEvent(
+    type = KeyboardEventType.KEY_PRESSED,
+    key = "\t",
+    code = KeyCode.TAB
+)
+
+private object TestScrollbarRenderer : VerticalScrollBarRenderer() {
+    override val aboveBarCharacter = '|'
+    override val belowBarCharacter = '|'
+    override val barCharacter = '+'
+}
diff --git a/zircon.core/src/jvmTest/kotlin/org/hexworks/zircon/internal/renderer/TestRendererTest.kt b/zircon.core/src/jvmTest/kotlin/org/hexworks/zircon/internal/renderer/TestRendererTest.kt
new file mode 100644
index 0000000000..7b3f08889d
--- /dev/null
+++ b/zircon.core/src/jvmTest/kotlin/org/hexworks/zircon/internal/renderer/TestRendererTest.kt
@@ -0,0 +1,45 @@
+package org.hexworks.zircon.internal.renderer
+
+import org.assertj.core.api.Assertions.assertThat
+import org.hexworks.zircon.api.ComponentDecorations.box
+import org.hexworks.zircon.api.Components
+import org.hexworks.zircon.api.DrawSurfaces
+import org.hexworks.zircon.api.data.Size
+import org.hexworks.zircon.api.graphics.BoxType
+import org.hexworks.zircon.convertCharacterTilesToString
+import org.junit.Test
+
+class TestRendererTest {
+    @Test
+    fun tinyExample() {
+        val graphics = DrawSurfaces.tileGraphicsBuilder().withSize(Size.create(3, 1)).build()
+        val testRenderer = TestRenderer(graphics).apply {
+            withComponentContainer {
+                addComponent(Components.textBox(3).addParagraph("Foo").build())
+            }
+        }
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo("Foo")
+    }
+
+    @Test
+    fun rendersAsExpected() {
+        val text = "Hello Zircon"
+        val graphics = DrawSurfaces.tileGraphicsBuilder().withSize(Size.create(text.length + 2, 4)).build()
+        val testRenderer = TestRenderer(graphics).apply {
+            withComponentContainer {
+                addComponent(Components.textBox(text.length)
+                    .withDecorations(box(boxType = BoxType.TOP_BOTTOM_DOUBLE))
+                    .addParagraph(text, withNewLine = false)
+                    .build())
+            }
+        }
+        testRenderer.render()
+        assertThat(graphics.convertCharacterTilesToString()).isEqualTo("""
+            ╒════════════╕
+            │Hello Zircon│
+            │            │
+            ╘════════════╛
+        """.trimIndent())
+    }
+}
diff --git a/zircon.jvm.examples/src/main/kotlin/org/hexworks/zircon/examples/components/ScrollBarExample.kt b/zircon.jvm.examples/src/main/kotlin/org/hexworks/zircon/examples/components/ScrollBarExample.kt
index c94d116674..8b4635c474 100644
--- a/zircon.jvm.examples/src/main/kotlin/org/hexworks/zircon/examples/components/ScrollBarExample.kt
+++ b/zircon.jvm.examples/src/main/kotlin/org/hexworks/zircon/examples/components/ScrollBarExample.kt
@@ -7,24 +7,19 @@ import org.hexworks.zircon.api.Components
 
 import org.hexworks.zircon.api.SwingApplications
 import org.hexworks.zircon.api.application.AppConfig
-import org.hexworks.zircon.api.component.Fragment
 import org.hexworks.zircon.api.data.Position
 import org.hexworks.zircon.api.data.Size
 import org.hexworks.zircon.api.ComponentDecorations.box
 import org.hexworks.zircon.api.ComponentAlignments.positionalAlignment
 import org.hexworks.zircon.api.ComponentDecorations.shadow
 import org.hexworks.zircon.api.component.AttachedComponent
-import org.hexworks.zircon.api.graphics.Symbols
 import org.hexworks.zircon.api.screen.Screen
-import org.hexworks.zircon.api.uievent.ComponentEventType
-import org.hexworks.zircon.api.uievent.MouseEventType
-import org.hexworks.zircon.api.uievent.Processed
+import org.hexworks.zircon.internal.fragment.impl.VerticalScrollableList
 
 object ScrollBarExample {
 
     private val theme = ColorThemes.arc()
     private val tileset = CP437TilesetResources.wanderlust16x16()
-    private val attachments = mutableListOf<AttachedComponent>()
 
     @JvmStatic
     fun main(args: Array<String>) {
@@ -46,64 +41,16 @@ object ScrollBarExample {
         (0 until 70).forEach { idx ->
             demoList.add("Item $idx")
         }
-        val scrollFragment = DemoScrollFragment(Size.create(20, 15), Position.create(0, 1), demoList)
+        val scrollFragment = VerticalScrollableList(
+            Size.create(20, 15),
+            Position.create(0, 1),
+            demoList,
+            onItemActivated = { item, idx ->
+                println("You clicked on $item at idx $idx")
+            }
+        )
         panel.addFragment(scrollFragment)
 
-        val compositeScrollBarPanel = Components.vbox()
-                .withSize(1, 17)
-                .withSpacing(0)
-                .withAlignment(positionalAlignment(20, 0))
-                .build()
-        val scrollbar1 = Components.verticalScrollbar()
-                .withSize(1, 15)
-                .withNumberOfScrollableItems(70)
-                .withDecorations()
-                .build()
-        val decrementButton = Components.button()
-                .withText("${Symbols.TRIANGLE_UP_POINTING_BLACK}")
-                .withSize(1, 1)
-                .withDecorations()
-                .build().apply {
-                    processComponentEvents(ComponentEventType.ACTIVATED) {
-                        scrollbar1.decrementValues()
-                    }
-                }
-        val incrementButton = Components.button()
-                .withText("${Symbols.TRIANGLE_DOWN_POINTING_BLACK}")
-                .withSize(1, 1)
-                .withDecorations()
-                .build().apply {
-                    processComponentEvents(ComponentEventType.ACTIVATED) {
-                        scrollbar1.incrementValues()
-                    }
-                }
-        scrollbar1.onValueChange {
-            scrollFragment.scrollTo(it.newValue)
-        }
-        compositeScrollBarPanel.addComponent(decrementButton)
-        compositeScrollBarPanel.addComponent(scrollbar1)
-        compositeScrollBarPanel.addComponent(incrementButton)
-        panel.addComponent(compositeScrollBarPanel)
-
-        // register scrollbar1 for handling mouse events
-        scrollbar1.handleMouseEvents(MouseEventType.MOUSE_WHEEL_ROTATED_DOWN) { _, _ ->
-            scrollbar1.incrementValues()
-            Processed
-        }
-
-        scrollbar1.handleMouseEvents(MouseEventType.MOUSE_WHEEL_ROTATED_UP) { _, _ ->
-            scrollbar1.decrementValues()
-            Processed
-        }
-
-        /*scrollbar1.processMouseEvents(MouseEventType.MOUSE_WHEEL_ROTATED_DOWN) { _, _ ->
-            scrollbar1.incrementValues()
-        }
-
-        scrollbar1.processMouseEvents(MouseEventType.MOUSE_WHEEL_ROTATED_UP) { _, _ ->
-            scrollbar1.decrementValues()
-        }*/
-
         val scrollbar2 = Components.horizontalScrollbar()
                 .withSize(20, 1)
                 .withNumberOfScrollableItems(200)
@@ -133,41 +80,4 @@ object ScrollBarExample {
         screen.theme = theme
     }
 
-    class DemoScrollFragment(private val size: Size, position: Position, private var items: List<String>) : Fragment {
-        private var topDisplayedItem: Int = 0
-        override val root = Components.vbox()
-                .withSize(size)
-                .withAlignment(positionalAlignment(position))
-                .withDecorations()
-                .withSpacing(0)
-                .build()
-
-        init {
-            displayListFromIndex()
-        }
-
-        private fun displayListFromIndex() {
-            attachments.forEach {
-                it.detach()
-            }
-            attachments.clear()
-            val maxIdx = when {
-                topDisplayedItem + size.height < items.size -> topDisplayedItem + size.height
-                else -> items.size
-            }
-            (topDisplayedItem until maxIdx).forEach { idx ->
-                attachments.add(root.addComponent(
-                        Components.label()
-                                .withText(items[idx])
-                                .withDecorations()
-                                .build()))
-            }
-            root.theme = theme
-        }
-
-        fun scrollTo(idx: Int) {
-            topDisplayedItem = idx
-            displayListFromIndex()
-        }
-    }
 }