README.md in lookbook-0.2.4 vs README.md in lookbook-0.3.0.beta.0

@@ -110,10 +110,33 @@
   def secondary
     render ButtonComponent.new do
       "Click me"
     end
   end
+
+  # @!group More examples
+
+  def short_text
+    render ButtonComponent.new do
+      "Go"
+    end
+  end
+
+  def long_text
+    render ButtonComponent.new do
+      "Click here to do this thing because it's the best way to do it"
+    end
+  end
+
+  def emoji_text
+    render ButtonComponent.new do
+      "👀📗"
+    end
+  end
+
+  # @!endgroup
+
 end
 ```
 
 **Tags** are just strings identified by their `@` prefix - for example `@hidden`. Tags are always placed in a comment above the relevant preview class or example method.
 
@@ -151,10 +174,56 @@
   def default
   end
 end
 ```
 
+#### `@!group <name> ... @!endgroup`
+
+For smaller components, it can often make sense to render a set of preview examples in a single window, rather than representing them as individual items in the navigation which can start to look a bit cluttered.
+
+You can group a set of examples by wrapping them in `@!group <name>` / `@!endgroup` tags within your preview file:
+
+```ruby
+class HeaderComponentPreview < ViewComponent::Preview
+
+  def standard
+    render Elements::HeaderComponent.new do
+      "Standard header"
+    end
+  end
+
+  # @!group Sizes
+
+  def small
+    render Elements::HeaderComponent.new(size: 12) do
+      "Small header"
+    end
+  end
+
+  def medium
+    render Elements::HeaderComponent.new(size: 16) do
+      "Small header"
+    end
+  end
+
+  def big
+    render Elements::HeaderComponent.new(size: 24) do
+      "Small header"
+    end
+  end
+
+  # @!endgroup
+
+end
+```
+
+The example above would display the `Sizes` examples grouped together on a single page, rather than as indiviual items in the navigation:
+
+<img src=".github/assets/nav_group.png">
+
+You can have as many groups as you like within a single preview class, but each example can only belong to one group.
+
 #### Adding notes
 
 All comment text other than tags will be treated as markdown and rendered in the **Notes** panel for that example in the Lookbook UI.
 
 ```ruby
@@ -190,9 +259,21 @@
 If you wish to add additional paths to listen for changes in, you can use the `listen_paths` option:
 
 ```ruby
 config.lookbook.listen_paths << Rails.root.join('app/other/directory')
 ```
+
+## Keyboard shortcuts
+
+Lookbook provides a few keyboard shortcuts to help you quickly move around the UI.
+
+- `f` - move focus to the nav filter box
+- `Esc` [when focus is in nav filter box] - Clear contents if text is present, or return focus to the UI if the box is already empty
+- `s` - Switch to Source tab in the inspector
+- `o` - Switch to Output tab in the inspector
+- `n` - Switch to Notes tab in the inspector
+- `r` - Refresh the preview (useful if using something like Faker to generate randomised data for the preview)
+- `w` - Open the standalone rendered preview in a new window
 
 ## Troubleshooting
 
 #### Blank preview window