### Install Chakra UI React Library

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/notes/mdx-reference.mdx

Provides commands to install the Chakra UI React library using npm, pnpm, and bun package managers.

```bash
npm i @chakra-ui/react
```

```bash
pnpm i @chakra-ui/react
```

```bash
bun i @chakra-ui/react
```

--------------------------------

### Basic Output Examples in TSX

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/notes/mdx-reference.mdx

Illustrates common methods for displaying output in a TSX environment, including console logging and browser alerts.

```tsx
console.log("hello world")
```

```tsx
alert("hello world")
```

--------------------------------

### Install dependencies and run Next.js development server

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/next-auth/README.md

After setting up the project, install all required Node.js dependencies using `npm` or `yarn`, and then start the Next.js development server to begin local development.

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

--------------------------------

### Install Saas UI package

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/quickstarts.mdx

Command to install the core Saas UI React package into an existing project using Yarn or npm.

```bash
yarn add @saas-ui/react
```

```bash
npm i @saas-ui/react
```

--------------------------------

### Install Saas UI and Peer Dependencies

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Install the necessary Saas UI and Chakra UI packages along with their peer dependencies using npm, yarn, or pnpm.

```npm
npm i @saas-ui/react @chakra-ui/react@^2 @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

```yarn
yarn add @saas-ui/react @chakra-ui/react@^2 @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

```pnpm
pnpm add @saas-ui/react @chakra-ui/react@^2 @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

--------------------------------

### Install dependencies and run Next.js development server

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/clerk-auth/README.md

Commands to install project dependencies and start the Next.js development server. It provides options for both `npm` and `yarn` package managers.

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

--------------------------------

### Install dependencies and run Next.js development server

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/nextjs-auth0/README.md

After setting up the project, install the necessary npm or Yarn dependencies and then start the Next.js development server to run the application locally.

```bash
npm install
npm run dev
```

```bash
yarn
yarn dev
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/README.md

Instructions to start the Next.js development server, making the application accessible locally. This command watches for file changes and automatically reloads the page.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Run Development Server with npm or yarn

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/README.md

This command initiates the local development server for the project. It leverages either npm or yarn to execute the 'dev' script, typically defined in the project's package.json, enabling live preview of the application in a web browser.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Install Chakra UI dependencies

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/quickstarts.mdx

Instructions to install Chakra UI and its peer dependencies like emotion and framer-motion using Yarn or npm. These are prerequisites for Saas UI.

```bash
yarn add @chakra-ui/react@^2 @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
```

```bash
npm i @chakra-ui/react@^2 @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/saas-js/saas-ui/blob/v3/README.md

Initial setup command to install all project dependencies across the monorepo using Yarn workspaces.

```bash
yarn
```

--------------------------------

### Install Saas UI and Chakra UI dependencies

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-pages-guide.mdx

Install the necessary packages for Saas UI and Chakra UI in your Next.js project using npm, yarn, or pnpm. These packages include the core Saas UI components, Chakra UI, Next.js integration for Chakra, and styling dependencies.

```bash
npm i @saas-ui/react @chakra-ui/react@^2 @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

```bash
yarn add @saas-ui/react @chakra-ui/react@^2 @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

```bash
pnpm add @saas-ui/react @chakra-ui/react@^2 @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

--------------------------------

### Integrate SaasProvider in React application

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/quickstarts.mdx

Example demonstrating how to import and wrap the root component of a React application with `SaasProvider`. This component handles basic Chakra UI setup, color mode, and theme configuration for Saas UI.

```jsx
import * as React from 'react'

// 1. import `SaasProvider` component
import { SaasProvider } from '@saas-ui/react'

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <SaasProvider>
      <Component />
    </SaasProvider>
  )
}
```

--------------------------------

### Start Documentation Website

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/contributing.mdx

Starts the local development server for the Saas UI documentation website, allowing you to preview changes to the documentation.

```bash
yarn dev:website
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/contributing.mdx

Installs all necessary project dependencies using Yarn, preparing the environment for development.

```bash
yarn
```

--------------------------------

### Vercel Start Command for Web Application

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/deployments/vercel.mdx

Specifies the start command for the Vercel deployment, navigating into the `apps/web` directory and starting the application using `yarn start`.

```bash
cd apps/web && yarn start
```

--------------------------------

### Start Storybook Development Server

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/contributing.mdx

Starts the Storybook development server, enabling you to develop and test UI components in isolation.

```bash
yarn storybook
```

--------------------------------

### Start Drizzle Studio

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/database/studio.mdx

This command initiates Drizzle Studio, providing an interface to explore and modify your database. Ensure you have Yarn installed and your project's database configuration is set up correctly.

```bash
yarn db:studio
```

--------------------------------

### Install Project Dependencies with PNPM

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/using-pnpm.mdx

Run `pnpm i` (or `pnpm install`) to install all project dependencies as defined in your `package.json` file using PNPM, leveraging its efficient dependency management.

```bash
pnpm i
```

--------------------------------

### Start Drizzle Studio

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/database/studio.mdx

This command launches the Drizzle Studio web interface, allowing you to interact with your database. Ensure you have yarn installed and your project is configured for Drizzle.

```bash
yarn db:studio
```

--------------------------------

### Install Project Dependencies with PNPM

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/installation/using-pnpm.mdx

Run the PNPM install command to download and link all project dependencies efficiently, leveraging PNPM's unique hoisting and linking strategy.

```bash
pnpm i
```

--------------------------------

### Install TypeScript for Next.js

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/next-auth/README.md

Although Next.js supports TypeScript out of the box, explicitly install TypeScript as a development dependency to ensure its features are available for type checking and compilation.

```bash
npm install --save-dev typescript
```

--------------------------------

### Install TypeScript as a development dependency

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/nextjs-auth0/README.md

Install TypeScript as a development dependency in your Next.js project. Next.js supports TypeScript out of the box, but installing it explicitly enables its features.

```bash
npm install --save-dev typescript
```

--------------------------------

### Install Project Dependencies with PNPM

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/installation/using-pnpm.mdx

Installs all project dependencies defined in `package.json` using PNPM, leveraging its efficient dependency management and workspace support.

```bash
pnpm i
```

--------------------------------

### Manually download Next.js TypeScript example

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/next-auth/README.md

Download the Next.js `with-typescript` example directly from the Vercel GitHub repository using `curl` and extract it, then navigate into the project directory.

```bash
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript
cd with-typescript
```

--------------------------------

### Install type declarations for React and Node.js

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/nextjs-auth0/README.md

To fully enable TypeScript's type-checking capabilities for React and Node.js environments, install their respective type declaration packages.

```bash
npm install --save-dev @types/react @types/react-dom @types/node
```

--------------------------------

### Install Saas UI Auth and Supabase Packages

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/guides/auth/supabase.mdx

Installs all necessary npm packages, including `@saas-ui/auth`, `@saas-ui/supabase`, and `@supabase/supabase-js`, for a complete authentication setup.

```bash
yarn add @saas-ui/auth @saas-ui/supabase @supabase/supabase-js
```

--------------------------------

### Install TypeScript for Next.js project

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/clerk-auth/README.md

Command to install TypeScript as a development dependency. This enables TypeScript's type system integration within a Next.js application.

```bash
npm install --save-dev typescript
```

--------------------------------

### Start Drizzle Studio via Yarn Command

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/database/studio.mdx

This command launches the Drizzle Studio interface, allowing users to interact with and manage their database. It requires Yarn to be installed and configured for the project.

```bash
yarn db:studio
```

--------------------------------

### Manually download Next.js TypeScript example

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/nextjs-auth0/README.md

Download the `with-typescript` example from the Next.js GitHub repository using `curl` and extract it, then navigate into the project directory.

```bash
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript
cd with-typescript
```

--------------------------------

### Download Next.js example manually

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/clerk-auth/README.md

Commands to manually download a specific Next.js example from GitHub using `curl` and `tar`. It then navigates into the extracted project directory.

```bash
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript
cd with-typescript
```

--------------------------------

### Install React and Node.js type declarations for TypeScript

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/next-auth/README.md

To enable comprehensive TypeScript type checking and autocompletion for React components and Node.js APIs, install their respective type declaration packages as development dependencies.

```bash
npm install --save-dev @types/react @types/react-dom @types/node
```

--------------------------------

### Netlify Start Command

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/deployments/netlify.mdx

Specifies the command to start the application after deployment on Netlify, typically used for development or preview environments to run the application.

```bash
yarn start
```

--------------------------------

### Install TypeScript type declarations for React and Node

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/clerk-auth/README.md

Command to install essential type declarations for React, React DOM, and Node.js. These types are crucial for enabling full TypeScript features and autocompletion in the project.

```bash
npm install --save-dev @types/react @types/react-dom @types/node
```

--------------------------------

### Implement Getting Started Page with Form and Navigation

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/blog/building-a-multi-tenant-b2b-saas-with-vite-tanstack-router.mdx

This snippet defines the `/_onboarding/getting-started` page. It uses `@saas-ui/react` for form handling, `@tanstack/react-query` for mutations, and `@tanstack/react-router` for navigation. It includes a `slugify` utility and handles form submission to save workspace data to `localStorage` and navigate to the new workspace.

```tsx
import { Center, Container, Heading } from '@chakra-ui/react'
import { Field, Form, FormLayout, SubmitButton } from '@saas-ui/react'
import { useMutation } from '@tanstack/react-query'
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { FormEvent } from 'react'

const slugify = (value: string) => {
  return value
    .trim()
    .toLocaleLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/[\s_-]+/g, '-')
    .replace(/^-+|-+$/g, '')
}

export const Route = createFileRoute('/_onboarding/getting-started')({
  component: GettingStarted,
})

interface OnboardingData {
  organization: string
  workspace: string
}

function GettingStarted() {
  const navigate = useNavigate()

  const submit = useMutation<unknown, Error, OnboardingData>({
    mutationFn: async (values) => {
      localStorage.setItem('workspace', values.workspace)
    },
    onSuccess: (data, variables) => {
      navigate({
        to: '/$workspace',
        params: { workspace: variables.workspace },
      })
    },
  })

  return (
    <Center height="$100vh">
      <Container maxW="container.sm">
        <Heading as="h2" size="lg" mb="4">
          Getting started
        </Heading>
        <Form
          onSubmit={(data) => submit.mutateAsync(data)}
          defaultValues={{
            organization: '',
            workspace: '',
          }}
        >
          {({ setValue }) => (
            <FormLayout>
              <Field
                label="Organization name"
                name="organization"
                onChange={(e: FormEvent<HTMLInputElement>) => {
                  const value = e.currentTarget.value
                  setValue('organization', value)
                  setValue('workspace', slugify(value))
                }}
              />
              <Field label="Workspace" name="workspace" />
              <SubmitButton>Continue</SubmitButton>
            </FormLayout>
          )}
        </Form>
      </Container>
    </Center>
  )
}
```

--------------------------------

### Start Vite web application

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/installation/run-application.mdx

This command starts the Vite application, which will typically be accessible at `http://localhost:3000`.

```bash
yarn dev:web
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/installation/clone-repository.mdx

Installs all project dependencies using Yarn 4. Yarn is included with the repository, so a global installation is not required.

```bash
yarn
```

--------------------------------

### Start Local Database with Docker Compose

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/run-application.mdx

Starts the local database services defined in the 'docker-compose.yml' file, making the database available for the application.

```bash
docker-compose up
```

--------------------------------

### Integrate Providers into Next.js Root Layout

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Import and use the `Providers` component in your `app/layout.tsx` to ensure all pages are wrapped with the Saas UI and Chakra UI context.

```jsx
// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
```

--------------------------------

### Install Saas UI core packages

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/installation.mdx

Installs the primary Saas UI React package along with Emotion React. Note that `@chakra-ui/react` is automatically included as a dependency and does not need to be installed separately.

```bash
npm i @saas-ui/react@next @emotion/react
```

--------------------------------

### Install Project Dependencies with Yarn (Bash)

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/clone-repository.mdx

Installs all project dependencies using Yarn 4, which is shipped with the repository.

```bash
yarn
```

--------------------------------

### Install Glass theme for Chakra UI

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/blog/introducing-glass-theme-for-chakra-ui.mdx

Install the Saas UI Glass theme package using npm.

```bash
npm i @saas-ui/theme-glass
```

--------------------------------

### Start local database and run migrations

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/installation/run-application.mdx

This command starts the local database using Docker Compose and then runs database migrations to prepare the schema.

```bash
docker-compose up && yarn db:migrate
```

--------------------------------

### Start Local Database and Run Migrations

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/installation/run-application.mdx

This command uses Docker Compose to start the local database services and then executes database migrations to ensure the schema is up-to-date.

```bash
docker-compose up && yarn db:migrate
```

--------------------------------

### Set up SaasProvider in Next.js _app.js

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-pages-guide.mdx

Wrap your Next.js application's Component with SaasProvider in `pages/_app.js` or `pages/_app.tsx` to enable Saas UI functionality. This provider is essential for Saas UI components to access the theme and context.

```jsx
// pages/_app.js
import { SaasProvider } from '@saas-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <SaasProvider>
      <Component {...pageProps} />
    </SaasProvider>
  )
}

export default MyApp
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/installation/clone-repository.mdx

Installs all project dependencies using Yarn 4. Yarn is shipped with the repository, so a global installation is not required. This command ensures all necessary packages are installed for local development.

```bash
yarn
```

--------------------------------

### TypeScript Line Highlighting

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/notes/mdx-reference.mdx

Shows an example of highlighting a specific line (line 1) within a TypeScript code block.

```ts
console.log("hewwo")\nconsole.log("goodbye")
```

--------------------------------

### Manually Configure Environment File and Symlink

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/installation/run-application.mdx

This snippet demonstrates how to manually copy the .env.example file and create a symlink to apps/web/.env, providing commands for both MacOS/Linux and Windows.

```bash
cp .env.example .env

# MacOS/Linux
ln -s apps/web/.env .env
```

```bash
cp .env.example .env

# Windows
mklink apps/web/.env .env
```

--------------------------------

### Install @saas-ui/supabase package

Source: https://github.com/saas-js/saas-ui/blob/v3/packages/saas-ui-supabase/README.md

Instructions to install the @saas-ui/supabase package using either Yarn or npm package managers.

```sh
$ yarn add @saas-ui/supabase

#or

$ npm i @saas-ui/supabase  --save
```

--------------------------------

### Install Supabase Auth Service

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/authentication/supabase.mdx

Installs the Supabase authentication service package into the Next.js application using Yarn.

```bash
yarn workspace web add @acme/auth-supabase
```

--------------------------------

### Start Next.js Web Application

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/installation/run-application.mdx

This command initiates the Next.js development server, making the application accessible locally at http://localhost:3000.

```bash
yarn dev:web
```

--------------------------------

### Install Saas UI Pro packages

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/pro/upgrading-to-v1.mdx

Installs the core Saas UI Pro React components, feature flags, and billing packages using npm.

```bash
npm i @saas-ui-pro/react @saas-ui-pro/feature-flags @saas-ui-pro/billing
```

--------------------------------

### Install Saas UI Auth, Magic Integration, and Magic SDK

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/guides/auth/magic.mdx

Installs all necessary packages for Saas UI authentication, including `@saas-ui/auth`, `@saas-ui/magic`, and `magic-sdk`, using Yarn.

```bash
yarn add @saas-ui/auth @saas-ui/magic magic-sdk
```

--------------------------------

### Manually Copy and Symlink .env File

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/run-application.mdx

Provides an alternative method to set up the environment by manually copying the '.env.example' file to '.env' and then creating a symlink for the web application's environment file. Includes commands for both MacOS/Linux and Windows.

```bash
cp .env.example .env
```

```bash
# MacOS/Linux
ln -s apps/web/.env .env
```

```cmd
# Windows
mklink apps/web/.env .env
```

--------------------------------

### Start Stripe CLI listener using Yarn workspace

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/billing/stripe.mdx

Alternatively, this command uses Yarn workspace to start the Stripe CLI listener for local webhook event forwarding, typically used within a monorepo setup.

```bash
yarn workspace @acme/billing-stripe listen
```

--------------------------------

### Installing Chakra UI CLI Snippets

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/migration.mdx

This command installs pre-built compositions of Chakra components via the CLI, providing ready-to-use UI elements to save development time.

```Bash
npx @chakra-ui/cli@next snippet add
```

--------------------------------

### Display Saas UI CLI usage and commands

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/cli.mdx

Shows the general usage syntax for the Saas UI CLI, including options for displaying the version, help, and the 'add' command for installing components, blocks, or templates.

```bash
Usage: sui [options] [command]

The official Saas UI CLi

Options:
  -V, --version               output the version number
  -h, --help                  display help for command

Commands:
  add [options] <source>  Install a component, block or template
```

--------------------------------

### Importing Accordion Component in JavaScript

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/notes/mdx-reference.mdx

Demonstrates how to import the Accordion component from the @chakra-ui/react library for use in a JavaScript/TypeScript project.

```js
import { Accordion } from "@chakra-ui/react"
```

--------------------------------

### TypeScript Word Highlighting

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/notes/mdx-reference.mdx

Illustrates how to highlight specific words within a TypeScript code snippet using a special comment.

```ts
// [!code word:Hello]\nconst message = "Hello World"
```

--------------------------------

### TypeScript Code Diff Highlighting

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/notes/mdx-reference.mdx

Demonstrates how code diffs are highlighted in TypeScript snippets, indicating added (++) and removed (--) lines.

```ts
console.log("hewwo") // [!code --]\nconsole.log("hello") // [!code ++]\nconsole.log("goodbye")
```

--------------------------------

### Run Saas UI Website Development Server

Source: https://github.com/saas-js/saas-ui/blob/v3/README.md

Starts the development server for the Saas UI documentation website. Two alternative methods are provided for convenience.

```bash
yarn w website dev
```

```bash
cd apps/website && yarn dev
```

--------------------------------

### Start Stripe CLI to Forward Webhooks Locally

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/billing/stripe.mdx

This command starts the Stripe CLI and forwards incoming webhook events to a local endpoint, typically for development and testing purposes. It allows you to receive and process Stripe events without exposing your local server to the internet. Ensure the Stripe CLI is installed and configured.

```bash
stripe listen --forward-to http://localhost:3000/api/webhooks/stripe
```

--------------------------------

### Bootstrap Next.js TypeScript project with create-next-app

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/nextjs-auth0/README.md

Use `create-next-app` to quickly set up a new Next.js project with TypeScript. This command initializes a project based on the `with-typescript` example.

```bash
npx create-next-app --example with-typescript with-typescript-app
```

```bash
yarn create next-app --example with-typescript with-typescript-app
```

--------------------------------

### Define Custom Font for Next.js 13

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Define a custom font, such as Inter, using `next/font/google` in `app/fonts.ts` to optimize font loading and improve performance in Next.js 13.

```jsx
// app/fonts.ts
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export const fonts = {
  inter,
}
```

--------------------------------

### Manually copy .env and create symlink

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/installation/run-application.mdx

Alternatively, copy the `.env.example` file to `.env` and fill in the values. This snippet also shows how to create a symlink for the `.env` file on different operating systems (MacOS/Linux and Windows).

```bash
cp .env.example .env

# MacOS/Linux
ln -s apps/web/.env .env

# Windows
mklink apps/web/.env .env
```

--------------------------------

### Basic DateRangePicker Usage

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/date-time/date-range-picker/usage.mdx

This example shows the fundamental setup for a DateRangePicker, allowing users to open a dialog containing a calendar for date selection. It uses `DatePickerTrigger` to open the `DatePickerDialog` which contains the `DateRangePickerCalendar`.

```javascript
<DateRangePicker>
  <DatePickerTrigger>
    <Button>Open DateRangePicker</Button>
  </DatePickerTrigger>
  <DatePickerDialog>
    <DateRangePickerCalendar />
  </DatePickerDialog>
</DateRangePicker>
```

--------------------------------

### Get Workspace Member Notification Settings

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/api-procedures/workspace-members.mdx

This procedure retrieves the current notification settings for a specific member within a workspace. It provides examples for querying these settings from both client and server components.

```typescript
// Client components
const { data } = api.workspaceMembers.getNotificationSettings.useQuery({
  input: {
    workspaceId: '',
  },
})

// Server components
const data = await api.workspaceMembers.getNotificationSettings({
  input: {
    workspaceId: '',
  },
})
```

--------------------------------

### Install Tanstack Router dependencies

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/blog/building-a-multi-tenant-b2b-saas-with-vite-tanstack-router.mdx

Navigates into the newly created project directory and installs the necessary packages for Tanstack React Router, its devtools, and the Vite plugin.

```bash
cd my-saas
npm i @tanstack/react-router @tanstack/router-devtools @tanstack/router-vite-plugin
```

--------------------------------

### Apply Custom Font to Next.js Root Layout

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Update `app/layout.tsx` to import and apply the defined custom font variable to the `<html>` tag, making it available throughout the application.

```jsx
// app/layout.tsx
import { fonts } from './fonts'
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en" className={fonts.inter.variable}>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
```

--------------------------------

### Use Chakra UI Link with Next.js Router

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Demonstrates how to use the `Link` component from `@chakra-ui/next-js` in `app/page.tsx` to combine Next.js routing with Chakra UI's styling capabilities.

```jsx
// app/page.tsx
'use client'
import { Link } from '@chakra-ui/next-js'

export default function Page() {
  return (
    <Link href="/about" color="blue.400" _hover={{ color: 'blue.500' }}>
      About
    </Link>
  )
}
```

--------------------------------

### Get workspace by slug

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/api-procedures/workspaces.mdx

Retrieve a workspace by its slug, including details, subscription, members, and tags. This procedure is accessible to members. Code examples illustrate fetching workspace data for client and server components.

```typescript
// Client components
const { data } = api.workspaces.get.useQuery({ slug: 'my-workspace' })

// Server components
const data = await api.workspaces.get({ slug: 'my-workspace' })
```

--------------------------------

### Configure Saas UI Provider in Next.js App

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Set up the SaasProvider component in `app/providers.tsx` to wrap your application's children, enabling Saas UI and Chakra UI client-side components.

```jsx
// app/providers.tsx
'use client'

import { SaasProvider } from '@saas-ui/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return <SaasProvider>{children}</SaasProvider>
}
```

--------------------------------

### Example .env File Configuration

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/configuration/environment-variables.mdx

This snippet provides an example of a typical `.env` file, showcasing various environment variables used in the Saas UI Next.js starter kit. It includes configurations for application URL, default plan ID, email settings (Resend), database connection, authentication secrets, and Stripe API keys.

```bash
# The public URL of the application
APP_URL=http://localhost:3000

# Default plan id for new accounts.
# Plans are configured in `packages/config/billing.config.ts`.
DEFAULT_PLAN_ID=free@1

# Email
# The email address that will be used to send emails from the application.
# This domain must be verified in your email provider.
EMAIL_FROM="hello@saas-ui.dev"

# Resend (default email provider)
# You can find this value in your Resend project settings.
RESEND_API_KEY=

# Database
# Uses a local docker instance by default.
DATABASE_URL=postgres://admin:admin@localhost:5432/dev

# Better Auth
AUTH_SECRET=

# Stripe (default payment provider)
# You can find these values in your Stripe dashboard, under developer settings.
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
```

--------------------------------

### Basic ResizeBox Component Usage

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/utils/resize-box/usage.mdx

This example shows the fundamental setup of a ResizeBox component. It behaves like a standard Box component, serving as a container with defined dimensions, border, and background color.

```jsx
<ResizeBox
  width="280px"
  height="200px"
  borderRightWidth="1px"
  bg="blackAlpha.300"
/>
```

--------------------------------

### Triggering Action with a Single Hotkey (S)

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/navigation/hotkeys/usage.mdx

Illustrates how to use the `useHotkeys` hook to focus a search input when the 'S' key is pressed. This example shows a basic setup for a single key hotkey, enhancing keyboard navigation.

```jsx
import { Box, Flex, Kbd } from '@chakra-ui/react'
import { useHotkeys, SearchInput } from '@saas-ui/react'

export default function Dialog() {
  const searchRef = React.useRef(null)

  useHotkeys('S', () => {
    searchRef.current.focus()
  })

  return (
    <Box>
      <SearchInput
        ref={searchRef}
        pr="30px"
        rightElement={
          <Flex pos="absolute" right="6px">
            <Kbd bg="none" fontSize="md">
              S
            </Kbd>
          </Flex>
        }
      />
    </Box>
  )
}
```

--------------------------------

### Set SAAS_UI_TOKEN Environment Variable

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/pro/installation/private-npm/npm.mdx

This command sets the `SAAS_UI_TOKEN` environment variable with the base64 encoded authentication token. This variable is used by NPM to authenticate with the private registry in CI/CD environments or manual setups.

```bash
export SAAS_UI_TOKEN="base64 encoded token"
```

--------------------------------

### Configure Next.js Link Component for Saas UI

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Provide a custom `linkComponent` to `SaasProvider` that uses Next.js's `Link` component, ensuring Saas UI components correctly navigate with the Next.js router.

```tsx
'use client'

import Link, { LinkProps } from 'next/link'
import { SaasProvider } from '@saas-ui/react'

const NextLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (props, ref) => <Link ref={ref} {...props} />
)

export function Providers({ children }: { children: React.ReactNode }) {
  return <SaasProvider linkComponent={NextLink}>{children}</SaasProvider>
}
```

--------------------------------

### Install PNPM using Corepack

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/using-pnpm.mdx

Prepare and activate the latest version of PNPM globally using Corepack, making it available for use across your projects.

```bash
corepack prepare pnpm@latest --activate
```

--------------------------------

### Integrate Custom Font into Chakra UI Theme

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-guide.mdx

Extend your Chakra UI theme in `theme.ts` to use the custom font variable for headings and body text, ensuring consistent typography across your Saas UI application.

```jsx
/* theme.ts */
import { extendTheme } from "@chakra-ui/react";

export const theme = extendTheme({
  ...
    fonts: {
      heading: 'var(--font-inter)',
      body: 'var(--font-inter)',
    }
  ...
});
```

--------------------------------

### Add ColorModeScript to Next.js _document.js

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-pages-guide.mdx

Include the `ColorModeScript` from Chakra UI in your `pages/_document.js` file, typically within the `<body>` tag, to ensure correct color mode syncing based on initial theme configuration. This script should be placed before the main content.

```jsx
// pages/_document.js

import { ColorModeScript } from '@chakra-ui/react'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import theme from './theme'

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          {/* 👇 Here's the script */}
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

--------------------------------

### Bootstrap Next.js TypeScript project with create-next-app

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/next-auth/README.md

Use `create-next-app` with npm or Yarn to quickly initialize a new Next.js project configured with TypeScript, leveraging the official `with-typescript` example.

```bash
npx create-next-app --example with-typescript with-typescript-app
# or
yarn create next-app --example with-typescript with-typescript-app
```

--------------------------------

### Basic CommandBar Usage (Inline)

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/navigation/command-bar/usage.mdx

This example shows a basic inline implementation of the CommandBar component. It includes an input field, a list with groups and items, and demonstrates the use of CommandBarEmpty for no results. This setup is suitable for embedding the command bar directly within a page.

```jsx
import {
  CommandBar,
  CommandBarContent,
  CommandBarInput,
  CommandBarList,
  CommandBarGroup,
  CommandBarItem,
  CommandBarSeparator,
  CommandBarLoading,
  CommandBarEmpty,
} from '@saas-ui/command-bar'

export default function Inline() {
  return (
    <CommandBar>
      <CommandBarContent>
        <CommandBarInput placeholder="Type a command or search..." />

        <CommandBarList>
          <CommandBarEmpty>No results found.</CommandBarEmpty>

          <CommandBarGroup heading="Fruits">
            <CommandBarItem>Apple</CommandBarItem>
            <CommandBarItem>Orange</CommandBarItem>
            <CommandBarSeparator />
            <CommandBarItem>Pear</CommandBarItem>
            <CommandBarItem>Blueberry</CommandBarItem>
          </CommandBarGroup>

          <CommandBarItem>Fish</CommandBarItem>
        </CommandBarList>
      </CommandBarContent>
    </CommandBar>
  )
}
```

--------------------------------

### Initialize Environment Variables with Yarn

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/nextjs-starter-kit/installation/run-application.mdx

This command generates a new .env file in the root directory and creates a symlink to apps/web/.env, simplifying environment setup.

```bash
yarn init:env
```

--------------------------------

### Implement Controlled DatePicker Component in JSX

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/date-time/date-input/usage.mdx

Demonstrates how to use the DatePicker component in a controlled manner, managing its value with React state. This example shows the basic setup including `FormControl`, `FormLabel`, `DatePickerInput`, `DatePickerDialog`, and `DatePickerCalendar` for a complete date selection UI.

```jsx
import { FormControl, FormLabel } from '@chakra-ui/react'
import {
  DatePicker,
  DatePickerInput,
  DatePickerDialog,
  DatePickerCalendar,
} from '@saas-ui/date-picker'

export default function ControlledPicker() {
  const [value, setValue] = React.useState(today(getLocalTimeZone()))

  return (
    <FormControl>
      <FormLabel>Date</FormLabel>
      <DatePicker
        placement="bottom-end"
        granularity="day"
        value={value}
        onChange={setValue}
      >
        <DatePickerInput />
        <DatePickerDialog>
          <DatePickerCalendar />
        </DatePickerDialog>
      </DatePicker>
    </FormControl>
  )
}
```

--------------------------------

### Clone Saas UI Repository

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/contributing.mdx

Clones the Saas UI GitHub repository to your local machine, allowing you to start contributing.

```bash
git clone https://github.com/saas-ui/saas-ui.git
```

--------------------------------

### Bootstrap Next.js project with create-next-app

Source: https://github.com/saas-js/saas-ui/blob/v3/examples/clerk-auth/README.md

Commands to initialize a new Next.js application using `create-next-app` with a TypeScript example. It demonstrates both `npx` and `yarn create` methods.

```bash
npx create-next-app --example with-typescript with-typescript-app
# or
yarn create next-app --example with-typescript with-typescript-app
```

--------------------------------

### Basic Saas UI Context Menu Implementation

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/overlay/context-menu/usage.mdx

This example demonstrates a complete setup for a Saas UI context menu. It uses ContextMenu to wrap the trigger and the menu list, ContextMenuTrigger to define the right-clickable area, and ContextMenuList with ContextMenuItem to define the options presented to the user.

```jsx
import { Center } from '@chakra-ui/react'
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuList,
  ContextMenuItem,
} from '@saas-ui/react'

export default function Page() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <Center height="200px" borderWidth="1px">
          Right click here
        </Center>
      </ContextMenuTrigger>
      <ContextMenuList>
        <ContextMenuItem>Edit</ContextMenuItem>
        <ContextMenuItem>Copy</ContextMenuItem>
        <ContextMenuItem>Delete</ContextMenuItem>
      </ContextMenuList>
    </ContextMenu>
  )
}
```

--------------------------------

### Initialize Environment with yarn init:env

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/run-application.mdx

Initializes the application's environment by generating a new '.env' file in the root directory and creating a symlink to 'apps/web/.env'.

```bash
yarn init:env
```

--------------------------------

### Basic FiltersProvider Usage with Simple Filters

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/advanced-data/filters/usage.mdx

This example illustrates the fundamental setup of `FiltersProvider` with `FiltersAddButton` and `ActiveFiltersList` within a `Page` component. It shows how to define simple filters with `id`, `label`, `activeLabel`, `icon`, and `value` properties, enabling basic filtering on properties like 'type'.

```jsx
import { Spacer, Badge } from '@chakra-ui/react'
import {
  Page,
  PageHeader,
  PageBody,
  Toolbar,
  FiltersProvider,
  FiltersAddButton,
  ActiveFiltersList
} from '@saas-ui-pro/react'
import { FiCircle } from 'react-icons/fi'

export default function ListPage() {
  const filters = React.useMemo(
    () => [
      {
        "id": "type",
        "label": "Contact is lead",
        "activeLabel": "Contact",
        "icon": <FiUser />,
        "value": "lead"
      },
      {
        "id": "type",
        "label": "Contact is customer",
        "activeLabel": "Contact",
        "icon": <FiUser />,
        "value": "customer"
      }
    ],
    []
  )

  return (
    <FiltersProvider filters={filters}>
      <Page>
        <PageHeader
          title="Contacts"
          toolbar={
            <Toolbar variant="outline">
              <FiltersAddButton />
              <Spacer />
            </Toolbar>
          }
        />

        <ActiveFiltersList />
        <PageBody></PageBody>
      </Page>
    </FiltersProvider>
  )
}
```

--------------------------------

### Multi-Step Tour Implementation in Saas UI React

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/engagement/tour/usage.mdx

This comprehensive example showcases a multi-step tour, guiding users through a sequence of UI elements. Each step is defined by a `TourDialog` linked to a `data-target` attribute, facilitating sequential highlighting and navigation. It includes `TourDismissButton` and `TourNextButton` for user interaction.

```jsx
import {
  Button,
  IconButton,
  ButtonGroup,
  Stack,
  Text,
  useDisclosure,
} from '@chakra-ui/react'
import {
  Tour,
  TourDialog,
  TourDialogActions,
  TourDialogBody,
  TourDialogCloseButton,
  TourDialogFooter,
  TourDialogHeader,
  TourNextButton,
  TourSpotlight,
} from '@saas-ui-pro/react'
import { FiUsers, FiTag, FiLock } from 'react-icons/fi'

export default function Basic() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Stack spacing="8" alignItems="center">
        <ButtonGroup>
          <Button leftIcon={<FiUsers />} data-tour="add-users2">
            Add user
          </Button>
          <IconButton
            icon={<FiTag />}
            aria-label="Tag users"
            data-tour="tag-users"
          />
          <IconButton
            icon={<FiLock />}
            aria-label="Lock users"
            data-tour="lock-users"
          />
        </ButtonGroup>
        <Button onClick={onOpen} variant="primary">
          Start example tour
        </Button>
      </Stack>

      <Tour isActive={isOpen} onComplete={onClose}>
        <TourDialog data-target="[data-tour=add-users2]">
          <TourDialogCloseButton />
          <TourDialogHeader>Check out this new feature</TourDialogHeader>
          <TourDialogBody>Start the tour to see how it works.</TourDialogBody>
          <TourDialogFooter>
            <Text fontSize="sm">Step 1 of 3</Text>
            <TourDialogActions>
              <TourDismissButton />
              <TourNextButton>Start</TourNextButton>
            </TourDialogActions>
          </TourDialogFooter>
        </TourDialog>

        <TourDialog data-target="[data-tour=tag-users]">
          <TourDialogCloseButton />
          <TourDialogHeader>Step 2</TourDialogHeader>
          <TourDialogBody>Tour step 2.</TourDialogBody>
          <TourDialogFooter>
            <Text fontSize="sm">Step 2 of 3</Text>
            <TourDialogActions>
              <TourNextButton />
            </TourDialogActions>
          </TourDialogFooter>
        </TourDialog>

        <TourDialog data-target="[data-tour=lock-users]">
          <TourDialogCloseButton />
          <TourDialogHeader>Step 3</TourDialogHeader>
          <TourDialogBody>Tour step 3.</TourDialogBody>
          <TourDialogFooter>
            <Text fontSize="sm">Step 3 of 3</Text>
            <TourDialogActions>
              <TourNextButton>Finish</TourNextButton>
            </TourDialogActions>
          </TourDialogFooter>
        </TourDialog>

        <TourSpotlight />
      </Tour>
    </>
  )
}
```

--------------------------------

### Build Website Props Documentation

Source: https://github.com/saas-js/saas-ui/blob/v3/README.md

Generates documentation for component properties, which is a necessary prerequisite before running the Saas UI website locally.

```bash
yarn build:props-docs
```

--------------------------------

### Extend Saas UI theme with custom colors

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-pages-guide.mdx

Customize the default Saas UI theme by extending it with custom colors or other design tokens using Chakra UI's `extendTheme` function. The extended theme is then passed as a prop to the `SaasProvider` to apply your design requirements.

```jsx
// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'

// 2. Import the Saas UI theme
import { SaasProvider, theme as baseTheme } from '@saas-ui/react'

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac'
  }
}

const theme = extendTheme({ colors }, baseTheme)

// 3. Pass the `theme` prop to the `SaasProvider`
function MyApp({ Component, pageProps }) {
  return (
    <SaasProvider theme={theme}>
      <Component {...pageProps} />
    </SaasProvider>
  )
}
```

--------------------------------

### Install Tanstack Router and Devtools

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/blog/building-a-multi-tenant-b2b-saas-with-vite-tanstack-router.mdx

After navigating into the new project directory, this command installs the core Tanstack React Router library, its development tools, and the Vite plugin for router integration.

```bash
cd my-saas
npm i @tanstack/react-router @tanstack/router-devtools @tanstack/router-vite-plugin
```

--------------------------------

### Configure Next.js Link component for Saas UI

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/core/installation/nextjs-pages-guide.mdx

Integrate Next.js's `Link` component with Saas UI by passing a `React.forwardRef` wrapped `Link` as the `linkComponent` prop to `SaasProvider`. This ensures that Saas UI's internal Link components correctly use Next.js routing.

```tsx
import Link, { LinkProps } from 'next/link'
import { SaasProvider } from '@saas-ui/react'

const NextLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (props, ref) => <Link ref={ref} {...props} />
)

function MyApp({ Component, pageProps }) {
  return (
    <SaasProvider linkComponent={NextLink}>
      <Component {...pageProps} />
    </SaasProvider>
  )
}
```

--------------------------------

### BenefitsModal with Centered Content

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/v2/src/pages/docs/components/engagement/benefits-modal/usage.mdx

Illustrates how to center the content within the BenefitsModal header and body using `textAlign="center"` and `flexDirection="column"`. It also shows how to use `BenefitsModalActions` to center multiple buttons in the footer, providing options like 'Dismiss' and 'Get started'.

```jsx
import { Button, Icon, Text, useDisclosure } from '@chakra-ui/react'
import {
  BenefitsModal,
  BenefitsModalHeader,
  BenefitsModalBody,
  BenefitsModalFooter,
} from '@saas-ui-pro/react'
import { FiInfo } from 'react-icons/fi'

export default function Centered() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Show benefits</Button>

      <BenefitsModal isOpen={isOpen} onClose={onClose}>
        <BenefitsModalHeader flexDirection="column" textAlign="center">
          <Icon as={FiInfo} boxSize="8" mb="4" color="primary.500" />
          <Text>Check out this new feature</Text>
        </BenefitsModalHeader>
        <BenefitsModalBody textAlign="center">
          Benefits modals can be used to highlight new features and their
          benefits in your app. Embed illustrations or videos to make ideas more
          accessible.
        </BenefitsModalBody>
        <BenefitsModalFooter>
          <BenefitsModalActions justifyContent="center">
            <Button onClick={onClose}>Dismiss</Button>
            <Button variant="primary">Get started</Button>
          </BenefitsModalActions>
        </BenefitsModalFooter>
      </BenefitsModal>
    </>
  )
}
```

--------------------------------

### Run Storybook Development Server

Source: https://github.com/saas-js/saas-ui/blob/v3/README.md

Command to start the Storybook development server, allowing for isolated component showcasing and development.

```bash
yarn storybook
```

--------------------------------

### Set up Saas UI Provider in React application

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/getting-started/(overview)/installation.mdx

Wraps the root component of your React application with `SuiProvider` to enable Saas UI components. The `defaultSystem` is passed to configure the provider.

```jsx
import { SuiProvider, defaultSystem } from '@saas-ui/react'

function App({ Component, pageProps }) {
  return (
    <SuiProvider system={defaultSystem}>
      <Component {...pageProps} />
    </SuiProvider>
  )
}
```

--------------------------------

### Start Billing Stripe Webhook Listener via Yarn Workspace

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/tanstack-router/billing/stripe.mdx

This command, specific to a Yarn workspace setup, initiates the Stripe webhook listener for the @acme/billing-stripe package. It serves the same purpose as the direct Stripe CLI command but is integrated into a monorepo's build system for managing local webhook event forwarding.

```bash
yarn workspace @acme/billing-stripe listen
```

--------------------------------

### Control Grid Item Placement with gridRowStart and gridRowEnd in JSX

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/(core)/styling/style-props/flex-and-grid.mdx

Demonstrates how to use `gridRowStart` and `gridRowEnd` props on a `Box` component to define the starting and ending grid lines for a grid item, allowing it to span multiple rows. The example sets up a 3-row grid and places an item from row 1 to 3.

```jsx
<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box gridRowStart="1" gridRowEnd="3">
    Item 1
  </Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
```

--------------------------------

### Enable Corepack for PNPM Installation

Source: https://github.com/saas-js/saas-ui/blob/v3/apps/website/content/docs/starter-kits/nextjs/installation/using-pnpm.mdx

Use the `corepack enable` command to activate Corepack, which is the recommended way to manage package managers like PNPM, ensuring proper installation and version control.

```bash
corepack enable
```