show different providers in getting started

docs/components/Tabs.css

@@ -0,0 +1,15 @@
+
+@media screen and (max-width: 720px) {
+  .Tabs__root {
+    border-radius: 0;
+    margin-left: calc(-1* var(--vocs-space_16));
+    margin-right: calc(-1* var(--vocs-space_16));
+    padding-left: var(--vocs-space_16);
+    padding-right: var(--vocs-space_16);
+  }
+
+  .Tabs__list {
+    margin-left: calc(-1* var(--vocs-space_16));
+    margin-right: calc(-1* var(--vocs-space_16));
+  }
+}

docs/components/Tabs.tsx

@@ -0,0 +1,30 @@
+import * as Tabs from "@radix-ui/react-tabs";
+import { PropsWithChildren } from "react";
+import "./Tabs.css";
+
+export const Root = ({
+  options,
+  children,
+}: PropsWithChildren<{
+  options: Record<string, string>;
+}>) => (
+  <Tabs.Root
+    className="Tabs__root border rounded bg-[--vocs-color_codeBlockBackground] border-[--vocs-color_codeInlineBorder]"
+    defaultValue={Object.keys(options)[0]}
+  >
+    <Tabs.List className="Tabs__list flex flex-wrap px-2 bg-[--vocs-color_codeTitleBackground]">
+      {Object.entries(options).map(([value, label]) => (
+        <Tabs.Trigger
+          className="text-sm p-3 pb-2 text-[--vocs-color_text3] border-b border-transparent hover:text-[--vocs-color_text] [&[data-state='active']]:text-[--vocs-color_text] [&[data-state='active']]:border-[--vocs-color_borderAccent]"
+          value={value}
+        >
+          {label}
+        </Tabs.Trigger>
+      ))}
+    </Tabs.List>
+    {children}
+  </Tabs.Root>
+);
+export const Content = (props: Tabs.TabsContentProps) => (
+  <Tabs.Content {...props} />
+);

docs/pages/getting-started.mdx

@@ -1,12 +1,30 @@
-# Getting Started
-
-Start by installing papee and a chain provider of your choice.
+import * as Tabs from '../components/Tabs';
 
-In this guide, we will use the `@substrate/connect` provider, which attempts to connect through the extension or falls back to a light client. More information about providers can be found on the next page.
+# Getting Started
 
-```sh
-npm i papee @substrate/connect
-```
+Start by installing papee and a JSON RPC provider of your choice.
+
+<Tabs.Root options={{
+  web: 'WebSocket',
+  sc: '@substrate/connect',
+  sm: 'Smoldot'
+}}>
+  <Tabs.Content value="web">
+    ```sh
+    npm i papee
+    ```
+  </Tabs.Content>
+  <Tabs.Content value="sc">
+    ```sh
+    npm i papee @substrate/connect
+    ```
+  </Tabs.Content>
+  <Tabs.Content value="sm">
+    ```sh
+    npm i papee smoldot @substrate/connect-known-chains
+    ```
+  </Tabs.Content>
+</Tabs.Root>
 
 :::warning
 `papee` is a tentative package name while it's in beta. The package name might change, but the API is expected to be fairly stable.
@@ -27,41 +45,72 @@ npx papi
 It's a really good idea to add papi to the "postinstall" script in package.json to automate generating the types after installation.
 :::
 
-Now you can create a PolkadotClient with that provider:
-
-```ts filename="createClient.ts"
-import { WellKnownChain, createClient } from "papee";
-import { getScProvider } from "papee/sc-provider";
-import { createScClient } from "@substrate/connect";
-
-const scProvider = getScProvider(createScClient());
-
-// Connect to the polkadot relay chain.
-const client = createClient(
-  scProvider(WellKnownChain.polkadot).relayChain
-);
-```
-
-With the `client`, you can get information such as subscribing to the last block to get the latest hash:
-
-```ts
-client.finalized$.subscribe(
-  finalizedBlock => console.log(finalizedBlock.number, finalizedBlock.hash)
-)
-```
-
-To interact with the chain, you need to get the `TypedApi`, which includes all the types for every call in that chain:
-
-```ts
-// `dot` is the name we gave to `npx papi add`
-import { dot } from 'papee/descriptors';
-// [!include createClient.ts]
-
-const dotApi = client.getTypedApi(dot);
-
-// get the value for an account
-const accountInfo = await dotApi.query.System.Account.getValue(
-  "16JGzEsi8gcySKjpmxHVrkLTHdFHodRepEz8n244gNZpr9J"
-)
-```
-
+Now you can create a PolkadotClient with that provider and start interacting with the API:
+ 
+<Tabs.Root options={{
+  web: 'WebSocket',
+  node: 'NodeJS Socket',
+  sc: '@substrate/connect',
+  sm: 'Smoldot'
+}}>
+  <Tabs.Content value="web">
+    ```ts
+    // [!include ~/snippets/gettingStarted.ts:import]
+    import { WebSocketProvider } from "papee/ws-provider-web";
+
+    // Connect to the polkadot relay chain.
+    const client = createClient(
+      WebSocketProvider("wss://dot-rpc.stakeworld.io")
+    );
+
+    // [!include ~/snippets/gettingStarted.ts:usage]
+    ```
+  </Tabs.Content>
+  <Tabs.Content value="node">
+    ```ts
+    // [!include ~/snippets/gettingStarted.ts:import]
+    import { WebSocketProvider } from "papee/ws-provider-node";
+
+    // Connect to the polkadot relay chain.
+    const client = createClient(
+      WebSocketProvider("wss://dot-rpc.stakeworld.io")
+    );
+
+    // [!include ~/snippets/gettingStarted.ts:usage]
+    ```
+  </Tabs.Content>
+  <Tabs.Content value="sc">
+    ```ts
+    // [!include ~/snippets/gettingStarted.ts:import]
+    import { getScProvider } from "papee/sc-provider";
+    import { createScClient } from "@substrate/connect";
+
+    const scProvider = getScProvider(createScClient());
+
+    // Connect to the polkadot relay chain.
+    const client = createClient(
+      scProvider(WellKnownChain.polkadot).relayChain
+    );
+
+    // [!include ~/snippets/gettingStarted.ts:usage]
+    ```
+  </Tabs.Content>
+  <Tabs.Content value="sm">
+    ```ts
+    // [!include ~/snippets/gettingStarted.ts:import]
+    import { getSmProvider } from "papee/sm-provider";
+    import { polkadot } from "@substrate/connect-known-chains";
+    import { start } from "smoldot";
+
+    const smoldot = start();
+    const chain = await smoldot.addChain({ chainSpec: polkadot });
+
+    // Connect to the polkadot relay chain.
+    const client = createClient(
+      getSmProvider(chain)
+    );
+
+    // [!include ~/snippets/gettingStarted.ts:usage]
+    ```
+  </Tabs.Content>
+</Tabs.Root>

docs/pages/index.mdx

@@ -5,7 +5,7 @@ content:
 ---
 
 import { HomePage } from 'vocs/components'
-import { KeyPoint } from './KeyPoint';
+import { KeyPoint } from '../components/KeyPoint';
 
 <HomePage.Root>
   <div className="flex justify-between w-full flex-col md:flex-row gap-4">

docs/snippets/gettingStarted.ts

@@ -0,0 +1,22 @@
+// [!region import]
+// `dot` is the name we gave to `npx papi add`
+import { dot } from "papee/descriptors";
+import { WellKnownChain, createClient } from "papee";
+// [!endregion import]
+
+// [!region usage]
+// With the `client`, you can get information such as subscribing to the last
+// block to get the latest hash:
+client.finalized$.subscribe((finalizedBlock) =>
+  console.log(finalizedBlock.number, finalizedBlock.hash)
+);
+
+// To interact with the chain, you need to get the `TypedApi`, which includes
+// all the types for every call in that chain:
+const dotApi = client.getTypedApi(dot);
+
+// get the value for an account
+const accountInfo = await dotApi.query.System.Account.getValue(
+  "16JGzEsi8gcySKjpmxHVrkLTHdFHodRepEz8n244gNZpr9J"
+);
+// [!endregion usage]

package.json

@@ -8,6 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
+    "@radix-ui/react-tabs": "^1.0.4",
     "@types/react": "latest",
     "react": "latest",
     "react-dom": "latest",