diff --git a/.circleci/config.yml b/.circleci/config.yml
index 56980df53..8c64c0175 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -73,7 +73,6 @@ commands:
       - run: bundle install --path vendor/bundle
       - run: |
           cd preview
-          bundle config https://rubygems.pkg.github.com/ably $GITHUB_REGISTRY_USERNAME:$GITHUB_REGISTRY_TOKEN
           bundle config set --local path 'vendor/bundle'
           bundle install
       - save_bundle_cache
diff --git a/.github/workflows/delete-old-packages.yml b/.github/workflows/delete-old-packages.yml
deleted file mode 100644
index 0e75f9b3a..000000000
--- a/.github/workflows/delete-old-packages.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-name: Remove old package versions
-on:
-  schedule:
-    # every Monday 9:00am
-    - cron: "0 9 * * 1"
-
-jobs:
-  remove-package-versions:
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-    steps:
-      - name: Remove package versions
-        uses: smartsquaregmbh/delete-old-packages@v0.2.0
-        with:
-          # See https://github.com/marketplace/actions/delete-old-packages for options
-          names: ably-ui
-          # should match 2.1.2.dev.3gdf4 and 2.1.2-dev.3gdf4
-          version-pattern: "^\\d+\\.\\d+\\.\\d+(\\.|-)dev\\..+"
-          keep: 20
diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml
index 9466b1b9f..dfd47c352 100644
--- a/.github/workflows/release-tag.yml
+++ b/.github/workflows/release-tag.yml
@@ -28,8 +28,8 @@ jobs:
           chmod +x "./scripts/update-dependents.sh"
       - name: Release latest Ably UI version
         env:
-          GITHUB_REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
-          BUNDLE_RUBYGEMS__PKG__GITHUB__COM: "${{ secrets.REGISTRY_USERNAME }}:${{ secrets.REGISTRY_TOKEN }}"
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          RUBYGEMS_API_KEY: "${{ secrets.RUBYGEMS_API_KEY }}"
         run: |
           git config --global user.email "github@action.code"
           git config --global user.name "Github Action"
@@ -37,9 +37,7 @@ jobs:
         shell: bash
       - name: Create PR on Voltaire and Website
         env:
-          GITHUB_REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
           REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
           REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
-          BUNDLE_RUBYGEMS__PKG__GITHUB__COM: "${{ secrets.REGISTRY_USERNAME }}:${{ secrets.REGISTRY_TOKEN }}"
         run: "./scripts/update-dependents.sh"
         shell: bash
diff --git a/.npmrc b/.npmrc
index c726e2191..8938bf04c 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,2 @@
-//npm.pkg.github.com/:_authToken=${GITHUB_REGISTRY_TOKEN}
-@ably:registry=https://npm.pkg.github.com
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 000000000..127fa0595
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,29 @@
+# Welcome 👋🏽
+
+Thank you for considering helping with this project. ❤️
+
+If you've noticed a bug or have a feature request, create an issue in the repo! It's generally best if you get confirmation of your bug or approval for your feature request before starting to code.
+
+If this is your first time contributing to open source, we recommend watching this [friendly guide](https://egghead.io/talks/git-how-to-make-your-first-open-source-contribution) to give you a grounding in some of the basic concepts.
+
+If anything in this guide or in this codebase doesn't make sense to you, please let us know by creating an issue in the repo.
+
+## Running the development server
+
+Please refer to the [README](./README.md#development) for instructions on how to set this up.
+
+## Testing
+
+This repo uses a combination of Jest and Cypress for testing.
+For a component that has both a React and Ruby please ensure there is a parity test, the easiest way to create that is to copy an existing one as an example.
+
+Please refer to the [README](./README.md#running-tests) for further details.
+
+## Contributing
+
+1. Fork the [repo](https://github.com/ably/ably-ui/).
+1. Create your update in a new branch - `git checkout -b new-feature`
+1. When you're ready to submit your contribution, create a Pull Request
+1. Make sure you have rebased against Ably UI's main branch.
+1. Fill in the PR description template with as much detail as possible
+1. Someone from Ably will be assigned to review and accept or decline the work.
diff --git a/Gemfile.lock b/Gemfile.lock
index c3dae955b..d8924ce82 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (4.2.0)
+    ably-ui (4.2.0.dev.f1eb220)
       view_component (~> 2.33.0)
 
 GEM
diff --git a/README.md b/README.md
index 7a6b9987d..2d394664d 100644
--- a/README.md
+++ b/README.md
@@ -34,20 +34,18 @@ Each module, apart from components, exposes a `scripts.js`, `styles.css` and `MO
 
 This type of installation gives you access to module/components assets as well as React components.
 
-Note, the package is currently hosted in our private GitHub registry, so you will need a `GITHUB_REGISTRY_TOKEN` environment variable in your shell to be able to install it. See [here](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token) for instructions on obtaining one.
-
 ```bash
-npm install @ably/ably-ui
+npm install @ably/ui
 
 # or
 
-yarn add @ably/ably-ui
+yarn add @ably/ui
 ```
 
 To attach the imported JavaScript from the `Core` module to the `window` object:
 
 ```js
-import "@ably/ably-ui/core/scripts";
+import "@ably/ui/core/scripts";
 
 // AblyUi.Core is now available on window
 ```
@@ -55,19 +53,19 @@ import "@ably/ably-ui/core/scripts";
 To import an es6 `core` module and expose nothing to window:
 
 ```js
-import ablyUiCore from "@ably/ably-ui/core/scripts";
+import ablyUiCore from "@ably/ui/core/scripts";
 ```
 
 To import the JavaScript for an `Accordion` component:
 
 ```js
-import Accordion from "@ably/ably-ui/core/accordion/component";
+import Accordion from "@ably/ui/core/accordion/component";
 ```
 
 If your bundler supports CSS importing, you can import it as well:
 
 ```js
-import "@ably/ably-ui/core/styles.css";
+import "@ably/ui/core/styles.css";
 ```
 
 ### Setting up TailwindCSS
@@ -79,7 +77,7 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
 1. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 
 ```js
-const extendConfig = require("@ably/ably-ui/tailwind.extend.js");
+const extendConfig = require("@ably/ui/tailwind.extend.js");
 
 module.exports = extendConfig((ablyUIConfig) => ({
   ...ablyUIConfig,
@@ -102,10 +100,10 @@ module.exports = extendConfig((ablyUIConfig) => ({
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "@ably/ably-ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
-@import "@ably/ably-ui/core/styles.css"; /* styles for core module components and more */
-@import "@ably/ably-ui/core/Meganav/component.css";
-@import "@ably/ably-ui/core/ContactFooter/component.css";
+@import "@ably/ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
+@import "@ably/ui/core/styles.css"; /* styles for core module components and more */
+@import "@ably/ui/core/Meganav/component.css";
+@import "@ably/ui/core/ContactFooter/component.css";
 ```
 
 #### Importing React components
@@ -113,7 +111,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
 Note that depending on the component, you might still need to include CSS & JS for it:
 
 ```js
-import Meganav from "@ably/ably-ui/core/Meganav";
+import Meganav from "@ably/ui/core/Meganav";
 ```
 
 #### Importing ViewComponent (Rails) components
@@ -123,18 +121,9 @@ To use `ably-ui` with [Ruby on Rails](https://rubyonrails.org/) add the `ably-ui
 ```ruby
 gem 'ably-ui',
     '1.0.0',
-    require: 'ably_ui',
-    source: 'https://rubygems.pkg.github.com/ably'
-```
-
-And then run:
-
-```bash
-bundle config https://rubygems.pkg.github.com/ably USERNAME:TOKEN
+    require: 'ably_ui'
 ```
 
-Where `USERNAME` is your GitHub username (without the `@`) and TOKEN is your [GitHub access token](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token). This is required because the gem is downloaded from a private gem registry on GitHub.
-
 Components are exposed as [View Components](https://github.com/github/view_component) and should be available in any view:
 
 ```erb
@@ -237,7 +226,7 @@ For `npm`:
 # in the root directory
 yarn link
 # in the the "preview" directory
-yarn link @ably/ably-ui
+yarn link @ably/ui
 ```
 
 For `ruby`:
@@ -259,7 +248,7 @@ If at anytime you don't want to use the local NPM package and/or gems any more,
 
 ```bash
 # in "preview" directory
-yarn unlink @ably/ably-ui
+yarn unlink @ably/ui
 ```
 
 Then change back `path` to source `source` in the `Gemfile`. If you need to update `Gemfile.lock` without installing gems, you can run `bundle lock`.
@@ -268,13 +257,20 @@ Then change back `path` to source `source` in the `Gemfile`. If you need to upda
 
 Make sure you commit & push your work and remove the [development-specific config](#using-the-development-build-of-ably-ui-in-the-preview-app) before doing this.
 
-You will need to authenticate with the GitHub [NPM registry](https://docs.github.com/en/free-pro-team@latest/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#authenticating-to-github-packages) and [gem registry](https://docs.github.com/en/free-pro-team@latest/packages/using-github-packages-with-your-projects-ecosystem/configuring-rubygems-for-use-with-github-packages#authenticating-with-a-personal-access-token) to publish.
+You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) and [Ruby Gems](https://guides.rubygems.org/api-key-scopes/) to publish.
 
 After the above, you should have:
 
-- GITHUB_REGISTRY_TOKEN set in your environment (`.npmrc` will read from it)
-- you should do registry login as described in the above docs with your GitHub username and password
-- a `~/.gem/credentials` file with a `:github: Bearer TOKEN` (replace GITHUB_REGISTRY_TOKEN with your token - interpolation does not work here)
+- NPM_TOKEN set in your environment
+- `.npmrc` file to read NPM_TOKEN from your environment like this:
+  ```
+  //registry.npmjs.org/:_authToken=${NPM_TOKEN}
+  ```
+- a `~/.gem/credentials` file that has your Rubygems API key:
+  ```
+  ---
+  :rubygems_api_key: REPLACE_THIS_WITH_YOUR_OWN_API_KEY
+  ```
 
 To deploy a review app with your in-progress code, you can use the `pre-release` script:
 
diff --git a/ably-ui.gemspec b/ably-ui.gemspec
index 54718ceab..4e045beef 100644
--- a/ably-ui.gemspec
+++ b/ably-ui.gemspec
@@ -6,8 +6,8 @@ require "ably_ui/version"
 Gem::Specification.new do |spec|
   spec.name          = "ably-ui"
   spec.version       = AblyUi::VERSION
-  spec.authors       = ["Dominik Piatek"]
-  spec.email         = ["dominik.piatek@ably.com"]
+  spec.authors       = ["Dominik Piatek", "Arti Mathanda", "Bruce Thomas"]
+  spec.email         = ["dominik.piatek@ably.com", "arti.mathanda@ably.com", "bruce.thomas@ably.com"]
   spec.summary       = "Shared component library and design system for Ably Real-time Ltd (ably.com)"
   spec.licenses      = ['Apache-2.0']
   spec.homepage      = "https://github.com/ably/ably-ui"
diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
index cd808641d..8df0a938a 100644
--- a/lib/ably_ui/version.rb
+++ b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '4.2.0'
+  VERSION = '4.2.0.dev.f1eb220'
 end
diff --git a/package.json b/package.json
index a866cea05..c673cd3e0 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@ably/ably-ui",
-  "version": "4.2.0",
+  "name": "@ably/ui",
+  "version": "4.2.0-dev.f1eb220",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
-  "repository": "git@github.com:ably/ably-ui.git",
-  "license": "Apache-2.0",
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ably/ably-ui.git"
   },
+  "license": "Apache-2.0",
   "files": [
     "src",
     "core",
@@ -74,5 +74,17 @@
     "react-dom": "^17.0.1",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/ably/ably-ui/issues"
+  },
+  "homepage": "https://github.com/ably/ably-ui#readme",
+  "keywords": [
+    "ui",
+    "tailwind",
+    "ably",
+    "react",
+    "view-components"
+  ],
+  "author": "Ably Real-time Ltd <support@ably.com>"
 }
diff --git a/pre-release.sh b/pre-release.sh
index 4866a130f..a01dfa31c 100755
--- a/pre-release.sh
+++ b/pre-release.sh
@@ -3,7 +3,7 @@
 # See https://coderwall.com/p/fkfaqq/safer-bash-scripts-with-set-euxo-pipefail
 set -euo pipefail
 
-echo "Fetching remote for up to date commit history"
+echo "> Fetching remote for up to date commit history"
 git fetch
 
 BRANCH=$(git branch --show-current)
@@ -19,11 +19,11 @@ if [[ `git status --porcelain --untracked-files=no` ]]; then
   exit 1
 fi
 
-echo "Save short SHA for package name"
+echo "> Save short SHA for package name"
 PACKAGE_SUFFIX=$(git rev-parse --short HEAD)
-echo "SHA is ${PACKAGE_SUFFIX}"
+echo "> SHA is ${PACKAGE_SUFFIX}"
 
-echo "Read the current semver from package.json, ignoring pre-release versions"
+echo "> Read the current semver from package.json, ignoring pre-release versions"
 ABLY_UI_VERSION=$(node -e "const p = require('./package.json'); console.log(p.version.split('-dev')[0]);")
 
 # Note the . and - before "dev" - this is due to the differences between gems and npm in what they consider a pre-release version
@@ -36,58 +36,59 @@ if git rev-parse "${TAG}" >/dev/null 2>&1; then
   exit 1
 fi
 
-echo "Install packages, making sure they are up to date"
+echo "> Install packages, making sure they are up to date"
+echo "> yarn (npm)"
 yarn --frozen-lockfile
+
+echo "> gems"
 bundle config set --local frozen true
 bundle
 bundle config set --local frozen false
 
-echo "Build library"
+echo "> Build library"
 NODE_ENV=production node scripts/build.js
 
-echo "Update version.rb file"
+echo "> Update version.rb file"
 echo -e "module AblyUi\n  VERSION = '$RUBY_VERSION'\nend" > ./lib/ably_ui/version.rb
 
-echo "Build the gem"
+echo "> Build the gem"
 gem build ably-ui.gemspec
 
-echo "Push the gem to the registry"
-gem push --key github \
-    --host https://rubygems.pkg.github.com/ably \
-    ably-ui-$RUBY_VERSION.gem
+echo "> Push the gem to the registry ($VERSION)"
+gem push ably-ui-$RUBY_VERSION.gem
 
-echo "Remove local gem artifact"
+echo "> Remove local gem artifact ($RUBY_VERSION)"
 rm ably-ui-$RUBY_VERSION.gem
 
-echo "Update Gemfile.lock"
+echo "> Update Gemfile.lock"
 bundle
 
-echo "Publish the npm package to the registry"
+echo "> Publish the npm package to the registry"
 yarn publish --no-git-tag-version --new-version $VERSION
 
-echo "Update preview app version"
+echo "> Update preview app version"
 cd preview
 
-echo "Update Gemfile"
+echo "> Update Gemfile"
 # Using -i.bak is a cross-platform way of using sed
 # https://stackoverflow.com/a/22084103
 sed -i.bak "s/gem 'ably-ui', '.*', require/gem 'ably-ui', '${RUBY_VERSION}', require/" Gemfile
 rm Gemfile.bak
 
-echo "Update ably-ui npm package in preview app"
-yarn upgrade @ably/ably-ui@$VERSION
+echo "> Update ably-ui npm package in preview app"
+yarn upgrade @ably/ui@$VERSION
 
-echo "Update Gemfile.lock"
+echo "> Update Gemfile.lock"
 bundle lock  # don't change contents gem dir as it might be using local paths
 
-echo "Commit version publish and preview app update to $TAG"
+echo "> Commit version publish and preview app update to $TAG"
 cd ..
 git add package.json lib/ably_ui/version.rb Gemfile.lock
 git add preview/package.json preview/yarn.lock preview/Gemfile preview/Gemfile.lock
 git commit -m "Publish $TAG and update preview app"
 
-echo "Tag commit with $TAG"
+echo "> Tag commit with $TAG"
 git tag -a $TAG -m "$TAG"
 
-echo "Push to repo"
+echo "> Push to repo"
 git push origin HEAD
diff --git a/preview/.npmrc b/preview/.npmrc
deleted file mode 100644
index c726e2191..000000000
--- a/preview/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-//npm.pkg.github.com/:_authToken=${GITHUB_REGISTRY_TOKEN}
-@ably:registry=https://npm.pkg.github.com
diff --git a/preview/Gemfile b/preview/Gemfile
index 85dcc4bea..23240fa3d 100644
--- a/preview/Gemfile
+++ b/preview/Gemfile
@@ -36,4 +36,4 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '4.2.0', require: 'ably_ui', source: 'https://rubygems.pkg.github.com/ably'
+gem 'ably-ui', '4.2.0.dev.f1eb220', require: 'ably_ui'
diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
index 5de1b39aa..046cf0ee6 100644
--- a/preview/Gemfile.lock
+++ b/preview/Gemfile.lock
@@ -1,8 +1,7 @@
 GEM
   remote: https://rubygems.org/
-  remote: https://rubygems.pkg.github.com/ably/
   specs:
-    ably-ui (4.2.0)
+    ably-ui (4.2.0.dev.f1eb220)
       view_component (~> 2.33.0)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -168,7 +167,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 4.2.0)!
+  ably-ui (= 4.2.0.dev.f1eb220)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)
diff --git a/preview/app/javascript/packs/application.js b/preview/app/javascript/packs/application.js
index f844b03b3..96799b4a7 100644
--- a/preview/app/javascript/packs/application.js
+++ b/preview/app/javascript/packs/application.js
@@ -1,14 +1,14 @@
 import "../styles/application.css";
 
-import Meganav from "@ably/ably-ui/core/Meganav";
-import Footer from "@ably/ably-ui/core/Footer";
-import ContactFooter from "@ably/ably-ui/core/ContactFooter";
-import Code from "@ably/ably-ui/core/Code";
-import Uptime from "@ably/ably-ui/core/Uptime";
-import CookieMessage from "@ably/ably-ui/core/CookieMessage";
-import Flash, { reducerFlashes } from "@ably/ably-ui/core/Flash";
-import Icon from "@ably/ably-ui/core/Icon";
-import FeaturedLink from "@ably/ably-ui/core/FeaturedLink";
+import Meganav from "@ably/ui/core/Meganav";
+import Footer from "@ably/ui/core/Footer";
+import ContactFooter from "@ably/ui/core/ContactFooter";
+import Code from "@ably/ui/core/Code";
+import Uptime from "@ably/ui/core/Uptime";
+import CookieMessage from "@ably/ui/core/CookieMessage";
+import Flash, { reducerFlashes } from "@ably/ui/core/Flash";
+import Icon from "@ably/ui/core/Icon";
+import FeaturedLink from "@ably/ui/core/FeaturedLink";
 
 import {
   reactRenderer,
@@ -19,9 +19,9 @@ import {
   reducerBlogPosts,
   fetchSessionData,
   reducerSessionData,
-} from "@ably/ably-ui/core/scripts";
+} from "@ably/ui/core/scripts";
 
-import sprites from "@ably/ably-ui/core/sprites.svg";
+import sprites from "@ably/ui/core/sprites.svg";
 
 document.addEventListener("DOMContentLoaded", () => {
   // Inserts a sprite map for <use> tags
diff --git a/preview/app/javascript/styles/application.css b/preview/app/javascript/styles/application.css
index f2318f2b7..d2faccf99 100644
--- a/preview/app/javascript/styles/application.css
+++ b/preview/app/javascript/styles/application.css
@@ -2,66 +2,62 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "@ably/ably-ui/reset/styles.css";
-@import "@ably/ably-ui/core/Meganav/component.css";
-@import "@ably/ably-ui/core/ContactFooter/component.css";
-@import "@ably/ably-ui/core/FeatureFooter/component.css";
-@import "@ably/ably-ui/core/Footer/component.css";
-@import "@ably/ably-ui/core/Showcase/component.css";
-@import "@ably/ably-ui/core/Code/component.css";
-@import "@ably/ably-ui/core/Uptime/component.css";
-@import "@ably/ably-ui/core/Notice/component.css";
-@import "@ably/ably-ui/core/Flash/component.css";
-@import "@ably/ably-ui/core/CookieMessage/component.css";
-@import "@ably/ably-ui/core/FeaturedLink/component.css";
-@import "@ably/ably-ui/core/Slider/component.css";
-@import "@ably/ably-ui/core/styles.css";
+@import "@ably/ui/reset/styles.css";
+@import "@ably/ui/core/Meganav/component.css";
+@import "@ably/ui/core/ContactFooter/component.css";
+@import "@ably/ui/core/FeatureFooter/component.css";
+@import "@ably/ui/core/Footer/component.css";
+@import "@ably/ui/core/Showcase/component.css";
+@import "@ably/ui/core/Code/component.css";
+@import "@ably/ui/core/Uptime/component.css";
+@import "@ably/ui/core/Notice/component.css";
+@import "@ably/ui/core/Flash/component.css";
+@import "@ably/ui/core/CookieMessage/component.css";
+@import "@ably/ui/core/FeaturedLink/component.css";
+@import "@ably/ui/core/Slider/component.css";
+@import "@ably/ui/core/styles.css";
 
 @layer base {
   @font-face {
     font-family: "NEXT Book";
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Light.eot");
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Light.eot?iefix")
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Light.eot");
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Light.eot?iefix")
         format("embedded-opentype"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Light.woff2") format("woff2"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Light.woff") format("woff");
+      url("~@ably/ui/core/fonts/NEXT-Book-Light.woff2") format("woff2"),
+      url("~@ably/ui/core/fonts/NEXT-Book-Light.woff") format("woff");
     font-weight: 300;
     font-style: normal;
   }
 
   @font-face {
     font-family: "NEXT Book";
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Light-Italic.eot");
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Light-Italic.eot?#iefix")
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Light-Italic.eot");
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Light-Italic.eot?#iefix")
         format("embedded-opentype"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Light-Italic.woff2")
-        format("woff2"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Light-Italic.woff")
-        format("woff");
+      url("~@ably/ui/core/fonts/NEXT-Book-Light-Italic.woff2") format("woff2"),
+      url("~@ably/ui/core/fonts/NEXT-Book-Light-Italic.woff") format("woff");
     font-weight: 300;
     font-style: italic;
   }
 
   @font-face {
     font-family: "NEXT Book";
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium.eot");
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium.eot?#iefix")
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Medium.eot");
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Medium.eot?#iefix")
         format("embedded-opentype"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium.woff2") format("woff2"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium.woff") format("woff");
+      url("~@ably/ui/core/fonts/NEXT-Book-Medium.woff2") format("woff2"),
+      url("~@ably/ui/core/fonts/NEXT-Book-Medium.woff") format("woff");
     font-weight: 500;
     font-style: normal;
   }
 
   @font-face {
     font-family: "NEXT Book";
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium-Italic.eot");
-    src: url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium-Italic.eot?#iefix")
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Medium-Italic.eot");
+    src: url("~@ably/ui/core/fonts/NEXT-Book-Medium-Italic.eot?#iefix")
         format("embedded-opentype"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium-Italic.woff2")
-        format("woff2"),
-      url("~@ably/ably-ui/core/fonts/NEXT-Book-Medium-Italic.woff")
-        format("woff");
+      url("~@ably/ui/core/fonts/NEXT-Book-Medium-Italic.woff2") format("woff2"),
+      url("~@ably/ui/core/fonts/NEXT-Book-Medium-Italic.woff") format("woff");
     font-weight: 500;
     font-style: italic;
   }
diff --git a/preview/package.json b/preview/package.json
index a9c82663b..4377316dd 100644
--- a/preview/package.json
+++ b/preview/package.json
@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ably-ui": "4.2.0",
+    "@ably/ui": "4.2.0-dev.f1eb220",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",
diff --git a/preview/tailwind.config.js b/preview/tailwind.config.js
index d1b68bfa4..c9d6586bd 100644
--- a/preview/tailwind.config.js
+++ b/preview/tailwind.config.js
@@ -1,4 +1,4 @@
-const extendConfig = require("@ably/ably-ui/tailwind.extend.js");
+const extendConfig = require("@ably/ui/tailwind.extend.js");
 
 module.exports = extendConfig((ablyUIConfig) => ({
   ...ablyUIConfig,
diff --git a/preview/yarn.lock b/preview/yarn.lock
index 1c4c5d576..aa74f04a5 100644
--- a/preview/yarn.lock
+++ b/preview/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/ably-ui@4.2.0":
-  version "4.2.0"
-  resolved "https://npm.pkg.github.com/download/@ably/ably-ui/4.2.0/704f4d685d75d41eb804f874baea2a5c6adb8911fdd86742806a95a4dd320208#4ef4b08985e1fc9cfd4a62c74591dd6a1e34d248"
-  integrity sha512-547dPfPISGfNUq6wz0WehHCTYR0Fq/itR4ONtsCtJGdydL87MJ2hWC3q38qP4u+1Y03WE11kfxjKTX4W+oAT8w==
+"@ably/ui@4.2.0-dev.f1eb220":
+  version "4.2.0-dev.f1eb220"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-4.2.0-dev.f1eb220.tgz#e07c532806067fd8bb873cbc90a5c8e976db07a4"
+  integrity sha512-8HxQwM0wMP6XNghlK+LTovIn0HC7jCoEhiMETBGoqiRaA0IG9KZbaQKWrjXpS31EW549rRsl14YtnLx586lfjQ==
   dependencies:
     array-flat-polyfill "^1.0.1"
     deepmerge "^4.2.2"
diff --git a/release.sh b/release.sh
index 30f74bf58..ed67b906c 100755
--- a/release.sh
+++ b/release.sh
@@ -28,16 +28,14 @@ mkdir -p ~/.gem
 
 cat << EOF > ~/.gem/credentials
 ---
-:github: Bearer ${GITHUB_REGISTRY_TOKEN}
+:rubygems_api_key: ${RUBYGEMS_API_KEY}
 EOF
 
 chmod 0600 ~/.gem/credentials
 set -x
 
 echo "Push the gem to the registry"
-gem push --key github \
-    --host https://rubygems.pkg.github.com/ably \
-    ably-ui-$VERSION.gem
+gem push ably-ui-$VERSION.gem
 
 echo "Update Gemfile.lock"
 bundle config unset deployment
@@ -57,7 +55,7 @@ sed -i.bak "s/gem 'ably-ui', '.*', require/gem 'ably-ui', '${VERSION}', require/
 rm Gemfile.bak
 
 echo "Update ably-ui npm package in preview app"
-yarn upgrade @ably/ably-ui@$VERSION
+yarn upgrade @ably/ui@$VERSION
 
 echo "Update Gemfile.lock"
 bundle lock  # don't change contents gem dir as it might be using local paths