chore: docs and smaller changes

Author: scriptcoded

packages/storybook/.storybook/preview.ts

@@ -57,7 +57,14 @@ export default definePreview({
     },
     options: {
       storySort: {
-        order: ["Basics", "Jamboree26", ["Bottom Bar", "Bottom Bar Item"]],
+        order: [
+          "Home",
+          "Setup – React",
+          "Setup – Web Components",
+          "Basics",
+          "Jamboree26",
+          ["Bottom Bar", "Bottom Bar Item"],
+        ],
       },
     },
   },

packages/storybook/src/setup-react.mdx

@@ -0,0 +1,66 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Setup - React" />
+
+# React setup guide
+
+This guide will help you get started with using the Scouterna Design System React
+components in your React project.
+
+## Install the packages
+
+You need to install both the Web Components package and the React wrapper
+package. The Web Components package is listed as a peer dependency of the React
+wrapper package. The versions of both packages should always match to ensure
+compatibility:
+```bash
+pnpm install @scouterna/ui-webc @scouterna/ui-react
+```
+
+## Usage
+
+Before you can use the React components, you need to load the styles for the
+components. This only has to be done once, probably in your main entry file:
+```js
+import '@scouterna/ui-webc/style.css';
+```
+
+Then you can start using the React components in your app:
+```js
+import { ScoutButton } from '@scouterna/ui-react';
+
+function MyApp() {
+  return (
+    <ScoutButton
+      variant="primary"
+      onScoutClick={() => alert('Button clicked!')}
+    >
+      Click me
+    </ScoutButton>
+  );
+}
+```
+
+## Design tokens
+
+The design tokens can be consumed either via CSS variables or through the
+Tailwind theme. Which you choose depends on your project setup.
+
+### CSS variables
+
+If you wish to use the design token CSS variables, install the design tokens package:
+```bash
+pnpm install @scouterna/design-tokens
+```
+
+Then import the CSS file somewhere in your project, probably in your main entry
+file:
+```js
+import '@scouterna/design-tokens/tokens.css';
+```
+
+This will make the design token CSS variables available globally in your project.
+
+### Tailwind theme
+
+More info coming soon...

packages/storybook/src/welcome.mdx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Home" />
+
+# Scouterna Design System
+
+Welcome to Scouterna's Design System for web applications. It's vaguely based on
+[our website](https://www.scouterna.se/)'s design with [our brand
+guidelines](https://www.scouterna.se/scout-ledare-kar/kommunicera/grafisk-profil/)
+in mind. However, we've also taken a lot of liberties to make it more suitable
+for application interfaces.
+
+These components are developed and maintained by [Scouternas
+E-tjänster](https://etjanster.scout.se/).
+
+## Flavors
+
+We write our components as [Web
+Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) using
+[Stencil](https://stenciljs.com/). This means you can use them in any web
+application, regardless of framework. However, we also provide wrappers for
+React. If you need support for another framework that's [supported by
+Stencil](https://stenciljs.com/docs/overview), please [raise an
+issue](https://github.com/Scouterna/j26-web-components/issues).

packages/ui-react/package.json

@@ -17,13 +17,15 @@
   "license": "UNLICENSED",
   "packageManager": "pnpm@10.7.0",
   "dependencies": {
-    "@scouterna/ui-webc": "workspace:^",
     "@stencil/react-output-target": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@scouterna/ui-webc": "workspace:*"
   }
 }

packages/ui-webc/package.json

@@ -14,6 +14,10 @@
       "import": "./dist/ui-webc/ui-webc.esm.js",
       "require": "./dist/ui-webc/ui-webc.cjs.js"
     },
+    "./style.css": {
+      "import": "./dist/ui-webc/ui-webc.css",
+      "require": "./dist/ui-webc/ui-webc.css"
+    },
     "./dist/*": {
       "import": "./dist/*",
       "types": "./dist/*"