docs: offer npm/yarn/bun for every install command (#402)

docs/docs/guides/features/configuration.md

@@ -138,10 +138,14 @@ For teams building custom Bulma CSS with their own prefixes:
 
 ### 1. Install Dependencies
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add bulma sass
 ```
 
+</PackageManagerTabs>
+
 ### 2. Create Custom Sass File
 
 ```scss title="src/styles/mycompany-bulma.scss"

docs/docs/guides/features/sass-customization.md

@@ -31,21 +31,29 @@ Sass variables feed the generated Bulma CSS — including the values of Bulma's
 
 To customize Bulma with Sass variables, you need:
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add sass
 pnpm add bulma
 ```
 
+</PackageManagerTabs>
+
 ## Build Configuration
 
 ### Vite
 
 Vite is the default toolchain for projects scaffolded by `pnpm create bestax@latest`, and handles Sass out of the box once `sass` is installed:
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add sass
 ```
 
+</PackageManagerTabs>
+
 **`src/styles/bulma-custom.scss`:**
 
 ```scss
@@ -79,10 +87,14 @@ Next.js has built-in Sass support:
 
 **Install Sass:**
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add sass
 ```
 
+</PackageManagerTabs>
+
 **Custom Sass file (styles/bulma-custom.scss):**
 
 ```scss

docs/docs/guides/getting-started/alternative-icons.md

@@ -20,10 +20,14 @@ Font Awesome is the default icon library — no `library` prop required.
 
 **Install:**
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add @fortawesome/fontawesome-free
 ```
 
+</PackageManagerTabs>
+
 **Import:**
 
 Add this to your main application file (e.g., `main.tsx` or `App.tsx`):
@@ -66,10 +70,14 @@ Material Design Icons (MDI) is a comprehensive icon library that follows Google'
 
 **Install:**
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add @mdi/font
 ```
 
+</PackageManagerTabs>
+
 **Import:**
 
 Add this to your main application file (e.g., `main.tsx` or `App.tsx`):
@@ -101,10 +109,14 @@ Ionicons is a modern icon library with 1,300+ icons designed specifically for we
 
 **Install:**
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add ionicons@^8.0.13
 ```
 
+</PackageManagerTabs>
+
 **Import:**
 
 :::info No CSS Import Needed
@@ -216,10 +228,14 @@ Google's official Material Icons library provides the core set of Material Desig
 
 **Install:**
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add material-icons
 ```
 
+</PackageManagerTabs>
+
 **Import:**
 
 Add this to your main application file (e.g., `main.tsx` or `App.tsx`):
@@ -326,10 +342,14 @@ The newest icon library from Google, offering more comprehensive icon coverage a
 
 **Install:**
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add material-symbols
 ```
 
+</PackageManagerTabs>
+
 **Import:**
 
 Add this to your main application file (e.g., `main.tsx` or `App.tsx`):

docs/docs/guides/getting-started/installation.md

@@ -56,23 +56,13 @@ The viewport meta tag is **essential** for Bulma's responsive features. Without
 `pnpm create bestax@latest` installs the package, wires up the CSS, and scaffolds a working app in one step. Only follow the manual steps below if you're adding bestax-bulma to an existing project or using a toolchain the installer doesn't cover.
 :::
 
-### Using npm (recommended)
+<PackageManagerTabs>
 
 ```bash
 pnpm add @allxsmith/bestax-bulma
 ```
 
-### Using yarn
-
-```bash
-yarn add @allxsmith/bestax-bulma
-```
-
-### Using pnpm
-
-```bash
-pnpm add @allxsmith/bestax-bulma
-```
+</PackageManagerTabs>
 
 ### Version Management
 
@@ -142,10 +132,14 @@ Or if you only need Bulma itself:
 
 1. Install Sass as a dev dependency (Bulma is already installed):
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add -D sass
 ```
 
+</PackageManagerTabs>
+
 2. Create a custom SCSS file:
 
 ```scss
@@ -177,10 +171,14 @@ bestax-bulma components support multiple icon libraries. Icons are optional but
 
 ### Font Awesome (Most Popular)
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add @fortawesome/fontawesome-free
 ```
 
+</PackageManagerTabs>
+
 Import in your main file:
 
 ```js
@@ -191,10 +189,14 @@ Usage: `<Icon name="user" />` or `<Icon name="github" variant="brands" />`
 
 ### Material Design Icons
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add @mdi/font
 ```
 
+</PackageManagerTabs>
+
 ```js
 import '@mdi/font/css/materialdesignicons.min.css';
 ```
@@ -203,10 +205,14 @@ Usage: `<Icon name="account" library="mdi" />`
 
 ### Material Icons (Google)
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add material-icons
 ```
 
+</PackageManagerTabs>
+
 ```js
 import 'material-icons/iconfont/material-icons.css';
 ```
@@ -215,10 +221,14 @@ Usage: `<Icon name="person" library="material-icons" />`
 
 ### Ionicons
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add ionicons
 ```
 
+</PackageManagerTabs>
+
 ```js
 import 'ionicons/dist/css/ionicons.min.css';
 ```
@@ -273,10 +283,14 @@ bestax-bulma includes TypeScript definitions. For the best experience:
 
 ### Install Type Definitions
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add -D typescript @types/react @types/react-dom
 ```
 
+</PackageManagerTabs>
+
 ### TypeScript Configuration
 
 Recommended `tsconfig.json` settings:
@@ -325,16 +339,24 @@ To analyze your bundle:
 
 1. Install bundle analyzer:
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add -D webpack-bundle-analyzer
 ```
 
+</PackageManagerTabs>
+
 2. Check what's included:
 
+<PackageManagerTabs>
+
 ```bash
 pnpm dlx webpack-bundle-analyzer stats.json
 ```
 
+</PackageManagerTabs>
+
 ### Expected Sizes
 
 - **bestax-bulma JS**: ~49KB min+gzip for the _entire_ library — with named imports, tree shaking means your app ships only the components it uses.

docs/docs/guides/getting-started/migration/bulma-0-9-to-1.md

@@ -47,7 +47,7 @@ Bulma v1 uses **Dart Sass** instead of the deprecated Node Sass:
 
 ```bash
 # Remove old dependency
-npm uninstall node-sass
+pnpm remove node-sass
 
 # Install modern Sass compiler
 pnpm add sass

docs/docs/guides/getting-started/migration/bulma-ui-3-to-4.md

@@ -37,10 +37,14 @@ React 16.8 and 17 are no longer supported. The library is built and tested again
 - ✅ On React 18 or 19 — upgrade with no code changes. Your existing components, props, imports, and CSS all behave exactly as they did in 3.x.
 - ⚠️ On React 16 or 17 — `pnpm add @allxsmith/bestax-bulma@4` will emit a peer-dependency warning, and some components rely on hooks/behavior that assume a modern React. **Stay on `@3`** until you can upgrade React:
 
+  <PackageManagerTabs>
+
   ```bash
   pnpm add @allxsmith/bestax-bulma@^3
   ```
 
+  </PackageManagerTabs>
+
 **Why this changed:** dropping the legacy React versions lets the library use modern React idioms (e.g. `useId` for accessible, SSR-safe element IDs) without compatibility shims, and keeps the maintenance surface focused on the versions the ecosystem actually runs.
 
 ## Compatibility: React 18 + 19

docs/docs/guides/getting-started/modular.md

@@ -97,10 +97,14 @@ Hand-rolling modular SCSS is worthwhile only when you have a demonstrated CSS-si
 
 Install Sass as a dev dependency (Bulma is already installed as a transitive dependency):
 
+<PackageManagerTabs>
+
 ```bash
 pnpm add -D sass
 ```
 
+</PackageManagerTabs>
+
 #### Required base styles
 
 Before importing component partials, include Bulma's base (CSS reset, generic element styles, keyframes) and themes (CSS custom properties on `:root`):

docs/docs/guides/getting-started/optimizing-css.md

@@ -46,10 +46,14 @@ The `npm create bestax` scaffold's `--bulma` flag selects a flavor at project cr
 Most of the remaining weight is selectors your app never renders. An opt-in
 [PurgeCSS](https://purgecss.com/) step removes them at build time. In a Vite app:
 
+<PackageManagerTabs>
+
 ```bash
-npm install -D @fullhuman/postcss-purgecss
+pnpm add -D @fullhuman/postcss-purgecss
 ```
 
+</PackageManagerTabs>
+
 ```js title="postcss.config.js"
 import purgecss from '@fullhuman/postcss-purgecss';