diff --git a/src/main/kotlin/org/patternfly/showcase/component/Component.kt b/src/main/kotlin/org/patternfly/showcase/component/Component.kt
index d179091..8ea1aa9 100644
--- a/src/main/kotlin/org/patternfly/showcase/component/Component.kt
+++ b/src/main/kotlin/org/patternfly/showcase/component/Component.kt
@@ -36,6 +36,7 @@ val components = listOf(
     Component("tabs", "Tabs", TabsComponent.content),
     Component("text", "Text", TextContentComponent.content),
     Component("title", "Title", TitleComponent.content),
+    Component("toggle-group", "Toggle group", ToggleGroupComponent.content),
     Component("tree-view", "Tree view", TreeViewComponent.content),
 )
 
diff --git a/src/main/kotlin/org/patternfly/showcase/component/DataList.kt b/src/main/kotlin/org/patternfly/showcase/component/DataList.kt
index 57ec281..482851f 100644
--- a/src/main/kotlin/org/patternfly/showcase/component/DataList.kt
+++ b/src/main/kotlin/org/patternfly/showcase/component/DataList.kt
@@ -10,7 +10,7 @@ import org.patternfly.actionList
 import org.patternfly.classes
 import org.patternfly.clickButton
 import org.patternfly.component
-import org.patternfly.dataList2
+import org.patternfly.dataList
 import org.patternfly.fas
 import org.patternfly.icon
 import org.patternfly.layout
@@ -29,7 +29,7 @@ object DataListComponent {
         )
         pageSection {
             snippet("Basic", DataListCode.BASIC) {
-                dataList2 {
+                dataList {
                     item {
                         cell { span(id = this@item.id) { +"Primary content" } }
                         cell { +"Secondary content" }
@@ -47,7 +47,7 @@ object DataListComponent {
                 }
             }
             snippet("Compact", DataListCode.COMPACT) {
-                dataList2(compact = true) {
+                dataList(compact = true) {
                     item {
                         cell { span(id = this@item.id) { +"Primary content" } }
                         cell { +"Secondary content" }
@@ -65,7 +65,7 @@ object DataListComponent {
                 }
             }
             snippet("Checkboxes, actions and additional cells", DataListCode.CHECKBOXES) {
-                val dl = dataList2 {
+                val dl = dataList {
                     item {
                         check()
                         cell { span(id = this@item.id) { +loremIpsum() } }
@@ -114,7 +114,7 @@ object DataListComponent {
                 }
             }
             snippet("Actions: single and multiple", DataListCode.ACTIONS) {
-                dataList2 {
+                dataList {
                     item {
                         cell { span(id = this@item.id) { +"Single actionable - primary content" } }
                         cell { +"Single actionable - secondary content" }
@@ -132,7 +132,7 @@ object DataListComponent {
                 }
             }
             snippet("Expandable", DataListCode.EXPANDABLE) {
-                dataList2 {
+                dataList {
                     arrayOf("Primary", "Secondary", "Tertiary").forEachIndexed { index, kind ->
                         item {
                             toggle()
@@ -156,7 +156,7 @@ object DataListComponent {
                 }
             }
             snippet("Selectable", "n/a") {
-                dataList2(selectable = true) {
+                dataList(selectable = true) {
                     item {
                         cell { span(id = this@item.id) { +"Single actionable - primary content" } }
                         cell { +"Single actionable - secondary content" }
@@ -183,8 +183,8 @@ object DataListComponent {
                 val store = storeOf(demos)
                 val selection = storeOf<Demo?>(null)
 
-                dataList2(selectable = true) {
-                    items(store, selection, { it.id }) { demo ->
+                dataList(selectable = true) {
+                    items(store, { it.id }, selection) { demo ->
                         item {
                             cell {
                                 span(id = demo.id) { +demo.name }
@@ -223,8 +223,8 @@ object DataListComponent {
                 val store = storeOf(demos)
                 val selection = storeOf<List<Demo>>(emptyList())
 
-                dataList2 {
-                    items(store, selection, { it.id }) { demo ->
+                dataList {
+                    items(store, { it.id }, selection) { demo ->
                         item {
                             check()
                             cell {
diff --git a/src/main/kotlin/org/patternfly/showcase/component/Tabs.kt b/src/main/kotlin/org/patternfly/showcase/component/Tabs.kt
index de8df94..2f1703e 100644
--- a/src/main/kotlin/org/patternfly/showcase/component/Tabs.kt
+++ b/src/main/kotlin/org/patternfly/showcase/component/Tabs.kt
@@ -4,20 +4,17 @@ package org.patternfly.showcase.component
 
 import dev.fritz2.binding.storeOf
 import dev.fritz2.dom.html.RenderContext
+import dev.fritz2.lenses.IdProvider
 import kotlinx.coroutines.flow.map
-import org.patternfly.TabItem
-import org.patternfly.TabStore
 import org.patternfly.classes
+import org.patternfly.dom.Id
 import org.patternfly.fas
-import org.patternfly.icon
-import org.patternfly.item
-import org.patternfly.items
 import org.patternfly.layout
 import org.patternfly.modifier
 import org.patternfly.pageSection
 import org.patternfly.slider
 import org.patternfly.tabs
-import org.patternfly.util
+import org.patternfly.toggleGroup
 
 object TabsComponent {
     val content: RenderContext.() -> Unit = {
@@ -28,144 +25,389 @@ object TabsComponent {
         )
         pageSection {
             snippet("Default", TabsCode.DEFAULT) {
-                tabs<String> {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
+                tabs {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
                     }
                 }
             }
             snippet("Box", TabsCode.BOX) {
-                tabs<String>(box = true) {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
+                tabs(box = true) {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
                     }
                 }
             }
             snippet("Box light", TabsCode.BOX_LIGHT) {
-                tabs<String>(box = true, baseClass = "color-scheme--light-300".modifier()) {
-                    contentDisplay {
-                        domNode.style.backgroundColor = "var(--pf-global--BackgroundColor--light-300)"
-                    }
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
+                tabs(box = true, baseClass = "color-scheme--light-300".modifier()) {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
                     }
                 }
             }
             snippet("Overflow", TabsCode.OVERFLOW) {
-                tabs<String> {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
-                        item("Tab item 7") { +"Tab content 7" }
-                        item("Tab item 8") { +"Tab content 8" }
-                        item("Tab item 9") { +"Tab content 9" }
-                        item("Tab item 10") { +"Tab content 10" }
-                        item("Tab item 11") { +"Tab content 11" }
+                tabs {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
+                    }
+                    for (i in 1..10) {
+                        item {
+                            tab("Tab item $i")
+                            content { +"Tab content $i" }
+                        }
+                    }
+                }
+            }
+            snippet("Vertical", TabsCode.VERTICAL) {
+                tabs(vertical = true) {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
+                    }
+                }
+            }
+            snippet("Vertical box", TabsCode.VERTICAL_BOX) {
+                tabs(vertical = true, box = true) {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
                     }
                 }
             }
             snippet("Inset", TabsCode.INSET) {
-                tabs<String>(baseClass = classes {
+                tabs(baseClass = classes {
                     +"inset-sm-on-md".modifier()
                     +"inset-lg-on-lg".modifier()
                     +"inset-2xl-on-xl".modifier()
                 }) {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
+                    }
+                    item {
+                        tab("Server")
+                        content { +"Server" }
+                    }
+                    item {
+                        tab("System")
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab("Network")
+                        content { +"Network" }
+                        disabled(true)
                     }
                 }
             }
-            snippet("Filled", TabsCode.FILLED) {
-                tabs<String>(filled = true) {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
+            snippet("Icons", TabsCode.ICONS) {
+                tabs {
+                    item {
+                        tab {
+                            +"Users"
+                            icon("users".fas())
+                        }
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab {
+                            +"Containers"
+                            icon("box".fas())
+                        }
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab {
+                            +"Database"
+                            icon("database".fas())
+                        }
+                        content { +"Database" }
+                    }
+                    item {
+                        tab {
+                            +"Server"
+                            icon("server".fas())
+                        }
+                        content { +"Server" }
+                    }
+                    item {
+                        tab {
+                            +"System"
+                            icon("laptop".fas())
+                        }
+                        content { +"System" }
+                        disabled(true)
+                    }
+                    item {
+                        tab {
+                            +"Network"
+                            icon("project-diagram".fas())
+                        }
+                        content { +"Network" }
+                        disabled(true)
                     }
                 }
             }
-            snippet("Vertical", TabsCode.VERTICAL) {
-                tabs<String>(vertical = true) {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
+            snippet("Filled", TabsCode.FILLED) {
+                tabs(filled = true) {
+                    item {
+                        tab("Users")
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers")
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database")
+                        content { +"Database" }
                     }
                 }
             }
-            snippet("Vertical box", TabsCode.VERTICAL_BOX) {
-                tabs<String>(vertical = true, box = true) {
-                    items {
-                        item("Users") { +"Users" }
-                        item("Containers") { +"Containers" }
-                        item("Database") { +"Database" }
-                        item("Server") { +"Server" }
-                        item("System") { +"System" }
-                        item("Network") { +"Network" }
+            snippet("Filled", TabsCode.FILLED_ICONS) {
+                tabs(filled = true) {
+                    item {
+                        tab("Users") { icon("users".fas()) }
+                        content { +"Users" }
+                        selected(true)
+                    }
+                    item {
+                        tab("Containers") { icon("box".fas()) }
+                        content { +"Containers" }
+                    }
+                    item {
+                        tab("Database") { icon("database".fas()) }
+                        content { +"Database" }
                     }
                 }
             }
-            snippet("Icons", TabsCode.ICONS) {
-                tabs<String> {
-                    items {
-                        item("Users", icon = { icon("users".fas()) }) { +"Users" }
-                        item("Containers", icon = { icon("box".fas()) }) { +"Containers" }
-                        item("Database", icon = { icon("database".fas()) }) { +"Database" }
-                        item("Server", icon = { icon("server".fas()) }) { +"Server" }
-                        item("System", icon = { icon("laptop".fas()) }) { +"System" }
-                        item("Network", icon = { icon("project-diagram".fas()) }) { +"Network" }
+            snippet("Store", TabsCode.STORE) {
+                data class Demo(val id: String, val name: String)
+
+                val demos = storeOf(
+                    listOf(
+                        Demo("foo", "Foo"),
+                        Demo("bar", "Bar")
+                    )
+                )
+                val idProvider: IdProvider<Demo, String> = { Id.build(it.id, "store") }
+
+                tabs {
+                    items(demos, idProvider) { demo ->
+                        item {
+                            tab(demo.name)
+                            content { +demo.name }
+                        }
                     }
                 }
             }
             snippet("Reactive", TabsCode.REACTIVE) {
-                val range = storeOf(5)
-                val store = TabStore<Int>()
+                val range = 2..20
+                val numberOfTabs = storeOf(5)
+                val values = storeOf(range.toList())
+                val selectedTab = storeOf<Int?>(null)
+                val disabledTabs = storeOf<List<Int>>(listOf())
+                val idProvider: IdProvider<Int, String> = { Id.build(it.toString(), "reactive") }
 
-                div(baseClass = classes {
-                    +"flex".layout()
-                    +"align-items-center".modifier()
-                    +"mb-md".util()
-                }) {
-                    slider(range, 2..12, baseClass = "w-50".util()) {
-                        leftActions { decrease() }
-                        showTicks()
-                        rightActions { increase() }
+                numberOfTabs.data.map { tabs -> (1..tabs).toList() } handledBy values.update
+
+                div(baseClass = classes("grid".layout(), "gutter".modifier())) {
+                    inlineStyle("align-items: center;")
+                    div(baseClass = classes("grid".layout("item"), "2-col".modifier())) {
+                        numberOfTabs.data.renderText()
+                        +" tabs"
+                    }
+                    div(baseClass = classes("grid".layout("item"), "10-col".modifier())) {
+                        slider(numberOfTabs, range) {
+                            leftActions { decrease() }
+                            showTicks()
+                            rightActions { increase() }
+                        }
+                    }
+                    div(baseClass = classes("grid".layout("item"), "2-col".modifier())) {
+                        +"Selected tab"
+                    }
+                    div(baseClass = classes("grid".layout("item"), "10-col".modifier())) {
+                        toggleGroup(singleSelect = true) {
+                            items(values, idProvider, singleSelection = selectedTab) {
+                                item { +"#$it" }
+                            }
+                        }
+                    }
+                    div(baseClass = classes("grid".layout("item"), "2-col".modifier())) {
+                        +"Disabled tabs"
+                    }
+                    div(baseClass = classes("grid".layout("item"), "10-col".modifier())) {
+                        toggleGroup {
+                            items(values, idProvider, multiSelection = disabledTabs) {
+                                item { +"#$it" }
+                            }
+                        }
+                    }
+                    div(baseClass = classes("grid".layout("item"), "12-col".modifier())) {
+                        tabs {
+                            items(values, idProvider, selectedTab, disabledTabs) { number ->
+                                item {
+                                    tab("Tab item $number")
+                                    content { +"Tab content $number" }
+                                }
+                            }
+                        }
                     }
                 }
-                tabs(store) {
-                    tabDisplay { +"Tab item $it" }
-                    contentDisplay { +"Content $it" }
-                }
-                range.data.map { tabs ->
-                    (1..tabs).map { number -> TabItem(number, selected = number == 1) }
-                } handledBy store.update
             }
         }
     }
@@ -176,14 +418,20 @@ object TabsCode {
     //language=kotlin
     const val DEFAULT: String = """fun main() {
     render {
-        tabs<String> {
-            item("Users") { +"Users" }
-            item("Containers") { +"Containers" }
-            item("Database") { +"Database" }
-            item("Server") { +"Server" }
-            item("System") { +"System" }
-            item("Network") { +"Network" }
+        tabs {
+            item(id = "users-dft", selected = true) { +"Users" }
+            item(id = "containers-dft") { +"Containers" }
+            item(id = "database-dft") { +"Database" }
+            item(id = "server-dft") { +"Server" }
+            item(id = "system-dft", disabled = true) { +"System" }
+            item(id = "network-dft", disabled = true) { +"Network" }
         }
+        tabContent("users-dft") { +"Users" }
+        tabContent("containers-dft") { +"Containers" }
+        tabContent("database-dft") { +"Database" }
+        tabContent("server-dft") { +"Server" }
+        tabContent("system-dft") { +"System" }
+        tabContent("network-dft") { +"Network" }
     }
 }
 """
@@ -191,14 +439,20 @@ object TabsCode {
     //language=kotlin
     const val BOX: String = """fun main() {
     render {
-        tabs<String>(box = true) {
-            item("Users") { +"Users" }
-            item("Containers") { +"Containers" }
-            item("Database") { +"Database" }
-            item("Server") { +"Server" }
-            item("System") { +"System" }
-            item("Network") { +"Network" }
+        tabs(box = true) {
+            item(id = "users-box", selected = true) { +"Users" }
+            item(id = "containers-box") { +"Containers" }
+            item(id = "database-box") { +"Database" }
+            item(id = "server-box") { +"Server" }
+            item(id = "system-box", disabled = true) { +"System" }
+            item(id = "network-box", disabled = true) { +"Network" }
         }
+        tabContent("users-box") { +"Users" }
+        tabContent("containers-box") { +"Containers" }
+        tabContent("database-box") { +"Database" }
+        tabContent("server-box") { +"Server" }
+        tabContent("system-box") { +"System" }
+        tabContent("network-box") { +"Network" }
     }
 }
 """
@@ -206,17 +460,20 @@ object TabsCode {
     //language=kotlin
     const val BOX_LIGHT: String = """fun main() {
     render {
-        tabs<String>(box = true, baseClass = "color-scheme--light-300".modifier()) {
-            contentDisplay = {
-                domNode.style.backgroundColor = "var(--pf-global--BackgroundColor--light-300)"
-            }
-            item("Users") { +"Users" }
-            item("Containers") { +"Containers" }
-            item("Database") { +"Database" }
-            item("Server") { +"Server" }
-            item("System") { +"System" }
-            item("Network") { +"Network" }
+        tabs(box = true, baseClass = "color-scheme--light-300".modifier()) {
+            item(id = "users-bl", selected = true) { +"Users" }
+            item(id = "containers-bl") { +"Containers" }
+            item(id = "database-bl") { +"Database" }
+            item(id = "server-bl") { +"Server" }
+            item(id = "system-bl", disabled = true) { +"System" }
+            item(id = "network-bl", disabled = true) { +"Network" }
         }
+        tabContent("users-bl") { +"Users" }
+        tabContent("containers-bl") { +"Containers" }
+        tabContent("database-bl") { +"Database" }
+        tabContent("server-bl") { +"Server" }
+        tabContent("system-bl") { +"System" }
+        tabContent("network-bl") { +"Network" }
     }
 }
 """
@@ -224,18 +481,25 @@ object TabsCode {
     //language=kotlin
     const val OVERFLOW: String = """fun main() {
     render {
-        tabs<String> {
-            item("Users") { +"Users" }
-            item("Containers") { +"Containers" }
-            item("Database") { +"Database" }
-            item("Server") { +"Server" }
-            item("System") { +"System" }
-            item("Network") { +"Network" }
-            item("Tab item 7") { +"Tab content 7" }
-            item("Tab item 8") { +"Tab content 8" }
-            item("Tab item 9") { +"Tab content 9" }
-            item("Tab item 10") { +"Tab content 10" }
-            item("Tab item 11") { +"Tab content 11" }
+        tabs(box = true, baseClass = "color-scheme--light-300".modifier()) {
+            item(id = "users-ofl", selected = true) { +"Users" }
+            item(id = "containers-ofl") { +"Containers" }
+            item(id = "database-ofl") { +"Database" }
+            item(id = "server-ofl") { +"Server" }
+            item(id = "system-ofl", disabled = true) { +"System" }
+            item(id = "network-ofl", disabled = true) { +"Network" }
+            for (i in 1..10) {
+                item(id = "tab-${'$'}i-ofl", title = "Tab item ${'$'}i")
+            }
+        }
+        tabContent("users-ofl") { +"Users" }
+        tabContent("containers-ofl") { +"Containers" }
+        tabContent("database-ofl") { +"Database" }
+        tabContent("server-ofl") { +"Server" }
+        tabContent("system-ofl") { +"System" }
+        tabContent("network-ofl") { +"Network" }
+        for (i in 1..10) {
+            tabContent("tab-${'$'}i-ofl") { +"Tab content ${'$'}i" }
         }
     }
 }
@@ -273,18 +537,36 @@ object TabsCode {
 """
 
     //language=kotlin
-    const val VERTICAL: String = """fun main() {
+    const val FILLED_ICONS: String = """fun main() {
     render {
-        tabs<String>(vertical = true) {
+        tabs<String>(filled = true) {
             item("Users") { +"Users" }
             item("Containers") { +"Containers" }
             item("Database") { +"Database" }
-            item("Server") { +"Server" }
-            item("System") { +"System" }
-            item("Network") { +"Network" }
         }
     }
 }
+"""
+
+    //language=kotlin
+    const val VERTICAL: String = """fun main() {
+    render {
+        tabs(vertical = true) {
+            item(id = "users-vert", selected = true) { +"Users" }
+            item(id = "containers-vert") { +"Containers" }
+            item(id = "database-vert") { +"Database" }
+            item(id = "server-vert") { +"Server" }
+            item(id = "system-vert", disabled = true) { +"System" }
+            item(id = "network-vert", disabled = true) { +"Network" }
+        }
+        tabContent("users-vert") { +"Users" }
+        tabContent("containers-vert") { +"Containers" }
+        tabContent("database-vert") { +"Database" }
+        tabContent("server-vert") { +"Server" }
+        tabContent("system-vert") { +"System" }
+        tabContent("network-vert") { +"Network" }
+    }
+}
 """
 
     //language=kotlin
@@ -315,49 +597,73 @@ object TabsCode {
         }
     }
 }
+"""
+
+    //language=kotlin
+    const val STORE: String = """fun main() {
+    render {
+    
+    }
+}
 """
 
     //language=kotlin
     const val REACTIVE: String = """fun main() {
     render {
-        lateinit var range: Input
-        val store = TabStore<Int>()
+        val range = 2..20
+        val numberOfTabs = storeOf(5)
+        val values = storeOf(range.toList())
+        val selectedTab = storeOf<Int?>(null)
+        val disabledTabs = storeOf<List<Int>>(listOf())
+        val idProvider: IdProvider<Int, String> = { Id.build(it.toString(), "reactive") }
 
-        div(baseClass = classes {
-            +"flex".layout()
-            +"align-items-center".modifier()
-            +"mb-md".util()
-        }) {
-            label {
-                +"Tabs: "
-                `for`("range")
+        numberOfTabs.data.map { tabs -> (1..tabs).toList() } handledBy values.update
+
+        div(baseClass = classes("grid".layout(), "gutter".modifier())) {
+            inlineStyle("align-items: center;")
+            div(baseClass = classes("grid".layout("item"), "2-col".modifier())) {
+                numberOfTabs.data.renderText()
+                +" tabs"
             }
-            range = input(id = "range", baseClass = "w-50".util()) {
-                type("range")
-                min("1")
-                max("12")
-                value("5")
+            div(baseClass = classes("grid".layout("item"), "10-col".modifier())) {
+                slider(numberOfTabs, range) {
+                    leftActions { decrease() }
+                    showTicks()
+                    rightActions { increase() }
+                }
             }
-            span {
-                range.inputs.events
-                    .map { it.target.unsafeCast<HTMLInputElement>().value }.asText()
+            div(baseClass = classes("grid".layout("item"), "2-col".modifier())) {
+                +"Selected tab"
+            }
+            div(baseClass = classes("grid".layout("item"), "10-col".modifier())) {
+                toggleGroup(singleSelect = true) {
+                    items(values, idProvider, singleSelection = selectedTab) {
+                        item { +"#${'$'}it" }
+                    }
+                }
+            }
+            div(baseClass = classes("grid".layout("item"), "2-col".modifier())) {
+                +"Disabled tabs"
+            }
+            div(baseClass = classes("grid".layout("item"), "10-col".modifier())) {
+                toggleGroup {
+                    items(values, idProvider, multiSelection = disabledTabs) {
+                        item { +"#${'$'}it" }
+                    }
+                }
+            }
+            div(baseClass = classes("grid".layout("item"), "12-col".modifier())) {
+                tabs {
+                    items(values, idProvider, selectedTab, disabledTabs) { number ->
+                        item { +"Tab item ${'$'}number" }
+                    }
+                }
+                values.data.renderEach(idProvider) { number ->
+                    tabContent(number, idProvider) {
+                        +"Tab content ${'$'}number"
+                    }
+                }
             }
-        }
-        tabs(store) {
-            itemDisplay = { +"Tab item ${'$'}it" }
-            contentDisplay = { +"Content ${'$'}it" }
-        }
-
-        range.changes.valuesAsNumber()
-            .map { it.toInt() }
-            .map { tabs ->
-                (1..tabs).map { number -> item(number, selected = number == 1) }
-            } handledBy store.update
-
-        MainScope().launch {
-            delay(EVENT_DELAY)
-            range.domNode.dispatchEvent(Event(Events.input.name))
-            range.domNode.dispatchEvent(Event(Events.change.name))
         }
     }
 }
diff --git a/src/main/kotlin/org/patternfly/showcase/component/ToggleGroup.kt b/src/main/kotlin/org/patternfly/showcase/component/ToggleGroup.kt
new file mode 100644
index 0000000..f7102ea
--- /dev/null
+++ b/src/main/kotlin/org/patternfly/showcase/component/ToggleGroup.kt
@@ -0,0 +1,216 @@
+package org.patternfly.showcase.component
+
+import dev.fritz2.binding.RootStore
+import dev.fritz2.binding.storeOf
+import dev.fritz2.dom.html.RenderContext
+import dev.fritz2.lenses.IdProvider
+import kotlinx.coroutines.flow.map
+import org.patternfly.ButtonVariant.primary
+import org.patternfly.clickButton
+import org.patternfly.dom.Id
+import org.patternfly.fas
+import org.patternfly.pageSection
+import org.patternfly.toggleGroup
+import org.patternfly.util
+
+object ToggleGroupComponent {
+    val content: RenderContext.() -> Unit = {
+        intro(
+            title = "Title",
+            text = "A title component applies top and bottom margins, font-weight, font-size, and line-height to titles.",
+            designGuidelines = "https://www.patternfly.org/v4/components/title/design-guidelines"
+        )
+        pageSection {
+            snippet("Default with multiple selectable", ToggleGroupCode.DEFAULT_MULTIPLE) {
+                val disabled = object : RootStore<Boolean>(false) {
+                    val toggle = handle { value -> !value }
+                }
+
+                clickButton(primary, baseClass = "mb-md".util()) {
+                    disabled.data.map { if (it) "Enable back" else "Disable all" }.renderText()
+                } handledBy disabled.toggle
+                br { }
+                toggleGroup {
+                    item(id = "opt1-tgl") {
+                        +"Option 1"
+                        disabled(disabled.data)
+                    }
+                    item(id = "opt2-tgl") {
+                        +"Option 2"
+                        disabled(disabled.data)
+                    }
+                    item {
+                        +"Option 3"
+                        disabled(true)
+                    }
+                }
+            }
+            snippet("Default with single selectable", ToggleGroupCode.DEFAULT_SINGLE) {
+                toggleGroup(singleSelect = true) {
+                    item { +"Option 1" }
+                    item { +"Option 2" }
+                    item { +"Option 3" }
+                }
+            }
+            snippet("Icons", ToggleGroupCode.ICONS) {
+                toggleGroup {
+                    item { icon("copy".fas()) }
+                    item { icon("undo".fas()) }
+                    item { icon("share-square".fas()) }
+                }
+            }
+            snippet("Text and icons", ToggleGroupCode.TEXT_ICONS) {
+                data class IconAndText(val icon: String, val text: String)
+
+                val share = IconAndText("share-square".fas(), "Share")
+                val values = storeOf(
+                    listOf(
+                        IconAndText("copy".fas(), "Copy"),
+                        IconAndText("undo".fas(), "Undo"),
+                        share,
+                    )
+                )
+                val idProvider: IdProvider<IconAndText, String> = { Id.build(it.text, "tgl") }
+                val selection = storeOf(listOf(share))
+
+                // use the same selection store to sync selections
+                toggleGroup {
+                    items(values, idProvider, multiSelection = selection) {
+                        item {
+                            icon(it.icon)
+                            +it.text
+                        }
+                    }
+                }
+                br { }
+                toggleGroup {
+                    items(values, idProvider, multiSelection = selection) {
+                        item {
+                            +it.text
+                            icon(it.icon)
+                        }
+                    }
+                }
+            }
+            snippet("Compact variant", ToggleGroupCode.COMPACT) {
+                toggleGroup(compact = true) {
+                    item { +"Option 1" }
+                    item { +"Option 2" }
+                    item {
+                        +"Option 3"
+                        disabled(true)
+                    }
+                }
+            }
+        }
+    }
+}
+
+object ToggleGroupCode {
+
+    //language=kotlin
+    const val DEFAULT_MULTIPLE: String = """fun main() {
+    render {
+        val disabled = object : RootStore<Boolean>(false) {
+            val toggle = handle { value -> !value }
+        }
+
+        clickButton(primary, baseClass = "mb-md".util()) {
+            disabled.data.map { if (it) "Enable back" else "Disable all" }.renderText()
+        } handledBy disabled.toggle
+        br { }
+        toggleGroup {
+            item(id = "opt1-tgl") {
+                +"Option 1"
+                disabled(disabled.data)
+            }
+            item(id = "opt2-tgl") {
+                +"Option 2"
+                disabled(disabled.data)
+            }
+            item {
+                +"Option 3"
+                disabled(true)
+            }
+        }
+    }
+}
+"""
+
+    //language=kotlin
+    const val DEFAULT_SINGLE: String = """fun main() {
+    render {
+        toggleGroup(singleSelect = true) {
+            item { +"Option 1" }
+            item { +"Option 2" }
+            item { +"Option 3" }
+        }
+    }
+}
+"""
+
+    //language=kotlin
+    const val ICONS: String = """fun main() {
+    render {
+        toggleGroup {
+            item { icon("copy".fas()) }
+            item { icon("undo".fas()) }
+            item { icon("share-square".fas()) }
+        }
+    }
+}
+"""
+
+    //language=kotlin
+    const val TEXT_ICONS: String = """fun main() {
+    render {
+        data class IconAndText(val icon: String, val text: String)
+
+        val share = IconAndText("share-square".fas(), "Share")
+        val values = storeOf(
+            listOf(
+                IconAndText("copy".fas(), "Copy"),
+                IconAndText("undo".fas(), "Undo"),
+                share,
+            )
+        )
+        val idProvider: IdProvider<IconAndText, String> = { Id.build(it.text, "tgl") }
+        val selection = storeOf(listOf(share))
+
+        // use the same selection store to sync selections
+        toggleGroup {
+            items(values, idProvider, multiSelection = selection) {
+                item {
+                    icon(it.icon)
+                    +it.text
+                }
+            }
+        }
+        br { }
+        toggleGroup {
+            items(values, idProvider, multiSelection = selection) {
+                item {
+                    +it.text
+                    icon(it.icon)
+                }
+            }
+        }
+    }
+}
+"""
+
+    //language=kotlin
+    const val COMPACT: String = """fun main() {
+    render {
+        toggleGroup(compact = true) {
+            item { +"Option 1" }
+            item { +"Option 2" }
+            item {
+                +"Option 3"
+                disabled(true)
+            }
+        }
+    }
+}
+"""
+}
diff --git a/src/main/kotlin/org/patternfly/showcase/demo/User.kt b/src/main/kotlin/org/patternfly/showcase/demo/User.kt
index ce648f0..00ed2ec 100644
--- a/src/main/kotlin/org/patternfly/showcase/demo/User.kt
+++ b/src/main/kotlin/org/patternfly/showcase/demo/User.kt
@@ -16,25 +16,13 @@ import kotlinx.coroutines.launch
 import org.patternfly.Align
 import org.patternfly.ButtonVariant.control
 import org.patternfly.ButtonVariant.plain
-import org.patternfly.ButtonVariant.secondary
 import org.patternfly.ItemsStore
-import org.patternfly.Severity
 import org.patternfly.SortInfo
 import org.patternfly.aria
 import org.patternfly.bulkSelect
 import org.patternfly.cardView
 import org.patternfly.classes
 import org.patternfly.clickButton
-import org.patternfly.dataList
-import org.patternfly.dataListAction
-import org.patternfly.dataListCell
-import org.patternfly.dataListCheckbox
-import org.patternfly.dataListContent
-import org.patternfly.dataListControl
-import org.patternfly.dataListExpandableContent
-import org.patternfly.dataListItem
-import org.patternfly.dataListRow
-import org.patternfly.dataListToggle
 import org.patternfly.dataTable
 import org.patternfly.dataTableActionColumn
 import org.patternfly.dataTableColumn
@@ -60,9 +48,7 @@ import org.patternfly.mvp.Presenter
 import org.patternfly.mvp.View
 import org.patternfly.mvp.ViewContent
 import org.patternfly.mvp.WithPresenter
-import org.patternfly.notification
 import org.patternfly.pageSection
-import org.patternfly.pagination
 import org.patternfly.pushButton
 import org.patternfly.showcase.data.Location
 import org.patternfly.showcase.data.User
@@ -220,6 +206,7 @@ class UserDemoView(override val presenter: UserDemoPresenter) : View, WithPresen
                     }
                 }
             }
+/*
             dataList(presenter.userStore) {
                 classMap(activeComponent.data.map { mapOf("display-none".util() to (it != LIST)) })
                 display { user ->
@@ -268,6 +255,7 @@ class UserDemoView(override val presenter: UserDemoPresenter) : View, WithPresen
                     }
                 }
             }
+*/
             dataTable(presenter.userStore) {
                 classMap(activeComponent.data.map { mapOf("display-none".util() to (it != TABLE)) })
                 dataTableColumns {