Setup a very basic storybook

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+    "stories": [
+        "../src/**/*.stories.tsx",
+    ],
+    "addons": [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+        "@storybook/preset-create-react-app"
+    ],
+    "framework": "@storybook/react",
+    "core": {
+        "builder": "@storybook/builder-webpack5"
+    },
+    "staticDirs": ['../public']
+}

.storybook/preview.js

@@ -0,0 +1,13 @@
+export const parameters = {
+    actions: {argTypesRegex: "^on[A-Z].*"},
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    options: {
+        storySort: (a, b) =>
+            a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, {numeric: true}),
+    },
+}

README.md

@@ -32,6 +32,9 @@ yarn build-keycloak-theme
 # Read the instruction printed on the console to see how to test
 # your theme on a real Keycloak instance.
 
+# For launching the Storybook
+yarn storybook
+
 # For customizing other pages at the component level
 npx eject-keycloak-page # Then select the page you want