### Install Panda CSS dependencies and initialize

Source: https://panda-css.com/docs/installation/postcss

Installs the necessary development dependencies and initializes the Panda CSS configuration file using various package managers.

```pnpm
pnpm install -D @pandacss/dev postcss
pnpm panda init -p
```

```npm
npm install -D @pandacss/dev postcss
npx panda init -p
```

```yarn
yarn add -D @pandacss/dev postcss
yarn panda init -p
```

```bun
bun add -D @pandacss/dev postcss
bun panda init -p
```

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

### Execute PostCSS build process

Source: https://panda-css.com/docs/installation/postcss

Demonstrates how to run the PostCSS build process via CLI or Node.js API to process the CSS.

```shell
postcss -o output.css index.css
```

```javascript
const postcss = require("postcss");
const fs = require("fs");

fs.readFile("index.css", (err, css) => {
  postcss()
    .process(css, { from: "index.css", to: "output.css" })
    .then((result) => {
      console.log(result.css);
    });
});
```

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

### Start Development Server

Source: https://panda-css.com/llms-full.txt

Commands to start the development server using various package managers.

```bash
pnpm start
npm run start
yarn start
bun start
```

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

### Configure Panda CSS

Source: https://panda-css.com/docs/installation/cli

Example configuration file for defining content paths and output directories for generated styles.

```typescript
import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system'
})
```

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

### Update package.json scripts

Source: https://panda-css.com/docs/installation/postcss

Adds the prepare script to ensure Panda CSS code generation runs automatically after dependency installation.

```json
{
  "scripts": {
    "prepare": "panda codegen"
  }
}
```

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

### Install and Launch Panda Studio

Source: https://panda-css.com/llms-full.txt

Commands to install the Panda Studio package and launch the interactive design system dashboard locally.

```bash
pnpm i @pandacss/studio
pnpm panda studio
```

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

### Use Panda Style Utilities

Source: https://panda-css.com/docs/installation/cli

Example of using the generated css function to apply styles to components.

```javascript
import { css } from './styled-system/css'
 
export function App() {
  return <div className={css({ bg: 'red.400' })} />
}
```

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

### Install Storybook CLI

Source: https://panda-css.com/docs/installation/storybook

Commands to install Storybook using different package managers (pnpm, npx, yarn, bun). Storybook requires an existing framework setup.

```bash
pnpm dlx storybook@latest init
```

```bash
npx storybook@latest init
```

```bash
yarn dlx storybook@latest init
```

```bash
bunx storybook@latest init
```

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

### Install project dependencies

Source: https://panda-css.com/llms-full.txt

Commands to install dependencies for the newly created Svelte project.

```bash
cd test-app
pnpm install
```

```bash
cd test-app
npm install
```

```bash
cd test-app
yarn
```

```bash
cd test-app
bun install
```

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

### Get Layout Patterns with Examples

Source: https://panda-css.com/docs/ai/mcp-server

Fetches layout patterns with their properties and usage examples. Can be filtered by pattern name.

```javascript
get_patterns(name?)
```

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

### Initialize and Install Gatsby and Panda CSS

Source: https://panda-css.com/llms-full.txt

Commands to scaffold a new Gatsby project and install the necessary Panda CSS and PostCSS dependencies.

```bash
npm init gatsby
cd test-app
npm install -D @pandacss/dev postcss gatsby-plugin-postcss
npx panda init --postcss
```

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

### Configure TypeScript for IDE autocomplete

Source: https://panda-css.com/docs/installation/postcss

Updates tsconfig.json to include the generated styled-system directory for better IDE support.

```json
{
  "include": ["src", "styled-system"]
}
```

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

### Panda CSS Configuration Example

Source: https://panda-css.com/docs/concepts/hooks

This snippet demonstrates a basic configuration for Panda CSS, likely within a project setup file. It shows how to define styles and potentially integrate with other tools.

```javascript
s(l.span, {
  style: {
    "--shiki-light": "#D73A49",
    "--shiki-dark": "#F97583"
  },
  children: " default"
}),
s(l.span, {
  style: {
    "--shiki-light": "#6F42C1",
    "--shiki-dark": "#B392F0"
  },
  children: " defineConfig"
}),
s(l.span, {
  style: {
    "--shiki-light": "#24292E",
    "--shiki-dark": "#E1E4E8"
  },
  children: "({\n})"
})
```

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

### Start Development Server (Multiple Package Managers)

Source: https://panda-css.com/llms-full.txt

Commands to start the development server using different package managers like pnpm, npm, yarn, and bun. These commands initiate the build process for your project.

```bash
pnpm dev
```

```bash
npm run dev
```

```bash
yarn dev
```

```bash
bun dev
```

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

### Define Panda CSS configuration

Source: https://panda-css.com/docs/installation/postcss

Sets up the core Panda CSS configuration, including preflight, content inclusion paths, and output directory settings.

```typescript
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system'
})
```

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

### Start MCP Server

Source: https://panda-css.com/llms-full.txt

The mcp command starts a Model Context Protocol server, allowing AI assistants to access and understand your design system configuration.

```bash
pnpm panda mcp
```

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

### Install Panda CSS Dependencies

Source: https://panda-css.com/llms-full.txt

Installs the Panda CSS development dependencies and initializes the configuration file with PostCSS support.

```bash
pnpm install -D @pandacss/dev
pnpm panda init --postcss
```

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

### Install and Configure Panda CSS for Angular

Source: https://panda-css.com/llms-full.txt

Commands and configuration files required to initialize Panda CSS in an Angular project, including PostCSS setup and package.json script updates.

```bash
ng new test-app
pnpm install -D @pandacss/dev
pnpm panda init
```

```json
{
  "plugins": {
    "@pandacss/dev/postcss": {}
  }
}
```

```json
{
  "scripts": {
    "prepare": "panda codegen",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"
  }
}
```

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

### Start Panda CSS MCP Server

Source: https://panda-css.com/docs/ai/mcp-server

Commands to manually start the MCP server. Includes options to point to a custom configuration file or specify a working directory.

```bash
pnpm panda mcp

# With custom config path
pnpm panda mcp --config ./panda.config.ts

# Specify working directory
pnpm panda mcp --cwd ./my-project
```

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

### Start Storybook Server

Source: https://panda-css.com/docs/installation/storybook

Commands to start the Storybook server using different package managers (pnpm, npm, yarn, bun). These commands build and serve your Storybook documentation, allowing you to preview your components with Panda CSS applied.

```bash
pnpm storybook
```

```bash
npm run storybook
```

```bash
yarn storybook
```

```bash
bun storybook
```

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

### Install Nuxt Project Dependencies

Source: https://panda-css.com/llms-full.txt

After creating a Nuxt project, install its dependencies using your preferred package manager: pnpm, npm, yarn, or bun.

```bash
cd test-app
pnpm install
```

```bash
cd test-app
npm install
```

```bash
cd test-app
yarn install
```

```bash
cd test-app
bun install
```

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

### Start Panda MCP Server Manually (Bash)

Source: https://panda-css.com/docs/ai/mcp-server

Starts the MCP server manually. This is typically not required as clients usually start it automatically. Options include specifying the config path and working directory.

```bash
pnpm panda mcp

pnpm panda mcp --config ./panda.config.ts

pnpm panda mcp --cwd ./my-project
```

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

### Install Panda CSS with PostCSS Support

Source: https://panda-css.com/docs/installation/storybook

Commands to install the Panda CSS development package and initialize it with PostCSS support. This prepares your project for Panda CSS integration.

```bash
pnpm install -D @pandacss/dev
pnpm panda init --postcss
```

```bash
npm install -D @pandacss/dev
npx panda init --postcss
```

```bash
yarn add -D @pandacss/dev
yarn panda init --postcss
```

```bash
bun add -D @pandacss/dev
bun panda init --postcss
```

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

### Install Panda CSS in Preact Project

Source: https://panda-css.com/llms-full.txt

Installs the Panda CSS development dependency and initializes Panda with PostCSS support using npm or yarn.

```bash
npm install -D @pandacss/dev
npx panda init --postcss
```

```bash
yarn add -D @pandacss/dev
yarn panda init --postcss
```

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

### Example AST JSON Output (JSON)

Source: https://panda-css.com/docs/guides/debugging

Provides an example of the content found in a `*.ast.json` file, showing the structure of the Abstract Syntax Tree generated from processed code.

```json
[
 {
  "name": "css",
  "type": "object",
  "data": [
   {
    "transitionProperty": "all",
    "opacity": "0.5",
    "border": "1px solid",
    "borderColor": "black",
    "color": "gray.600",
    "_hover": {
     "color": "gray.900"
    },
    "rounded": "md",
    "p": "1.5",
    "_dark": {
     "borderColor": "rgba(255, 255, 255, 0.1)",
     "color": "gray.400",
     "_hover": {
      "color": "gray.50"
     }
    }
   }
  ],
  "kind": "CallExpression",
  "line": 13,
  "column": 9
 }
]

```

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

### Install Panda CSS and PostCSS for Ember

Source: https://panda-css.com/llms-full.txt

Installs Panda CSS, PostCSS, and postcss-loader, then initializes Panda with the `--postcss` flag to generate a `postcss.config.js` file for Ember integration.

```bash
pnpm install -D @pandacss/dev postcss postcss-loader
pnpm panda init --postcss
```

```bash
npm install -D @pandacss/dev postcss postcss-loader
npx panda init --postcss
```

```bash
yarn add -D @pandacss/dev postcss postcss-loader
yarn panda init --postcss
```

```bash
bun add -D @pandacss/dev postcss postcss-loader
bun panda init --postcss
```

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

### Install Panda CSS and create configuration file

Source: https://panda-css.com/docs/installation/storybook

Instructions for installing Panda CSS as a development dependency and generating the 'panda.config.ts' file. This enables Panda CSS functionality in the project.

```bash
pnpm install -D @pandacss/dev
```

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

### Example tsconfig.json with paths

Source: https://panda-css.com/docs/guides/debugging

This is an example `tsconfig.json` file illustrating the configuration of `compilerOptions`, including `baseUrl` and `paths`. The `paths` configuration is crucial for setting up custom module aliases that Panda CSS can utilize.

```json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/styled-system": ["./styled-system"]
    }
  }
}
```

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

### Use Panda CSS utilities in components

Source: https://panda-css.com/docs/installation/postcss

Example of importing and using generated style utilities within a React component.

```javascript
import { css } from './styled-system/css'

export function App() {
  return
}
```

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

### Initialize Remix Project

Source: https://panda-css.com/llms-full.txt

Commands to create a new Remix project using various package managers.

```bash
pnpm dlx create-remix@latest
npx create-remix@latest
yarn dlx create-remix@latest
bunx create-remix@latest
```

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

### Initialize SolidJS project and Panda CSS

Source: https://panda-css.com/llms-full.txt

Commands to scaffold a new SolidJS project and install the necessary Panda CSS dependencies.

```bash
pnpm dlx degit solidjs/templates/ts test-app
cd test-app
pnpm install
pnpm install -D @pandacss/dev
pnpm panda init --postcss
```

```bash
npx degit solidjs/templates/ts test-app
cd test-app
npm install
npm install -D @pandacss/dev
npx panda init --postcss
```

```bash
yarn dlx degit solidjs/templates/ts test-app
cd test-app
yarn
yarn add -D @pandacss/dev
yarn panda init --postcss
```

```bash
bunx degit solidjs/templates/ts test-app
cd test-app
bun install
bun add -D @pandacss/dev
bun panda init --postcss
```

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

### Initialize Svelte project

Source: https://panda-css.com/llms-full.txt

Commands to create a new SvelteKit project using various package managers.

```bash
pnpm create svelte@latest test-app
```

```bash
npm create svelte@latest test-app
```

```bash
yarn create svelte@latest test-app
```

```bash
bun create svelte@latest test-app
```

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

### Configure PostCSS for Panda CSS

Source: https://panda-css.com/docs/installation/postcss

Registers the Panda CSS plugin within the PostCSS configuration file.

```javascript
module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}
  }
}
```

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

### Start Development Server

Source: https://panda-css.com/llms-full.txt

Commands to initiate the development server for a Panda CSS project using various package managers.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun dev
```

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

### Initialize Rsbuild Project

Source: https://panda-css.com/llms-full.txt

Commands to scaffold a new Rsbuild project with React and TypeScript support.

```bash
pnpm create rsbuild@latest --dir test-app --template react-ts
cd test-app
pnpm install
```

```bash
npm create rsbuild@latest --dir test-app -- --template react-ts
cd test-app
npm install
```

```bash
yarn create rsbuild@latest --dir test-app --template react-ts
cd test-app
yarn
```

```bash
bun create rsbuild@latest --dir test-app --template react-ts
cd test-app
bun install
```

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

### Define Custom Tokens in Panda CSS

Source: https://panda-css.com/docs/guides/minimal-setup

Example of defining custom color tokens within the Panda CSS theme configuration. These tokens can then be used in your styles.

```javascript
export default defineConfig({
  // ...
  theme: {
    tokens: {
      colors: {
        primary: { value: '#ff0000' }
      }
    }
  }
})
```

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

### Create React Router Project

Source: https://panda-css.com/llms-full.txt

Commands to initialize a new React Router project using various package managers.

```bash
pnpm dlx create-react-router@latest
```

```bash
npx create-react-router@latest
```

```bash
yarn dlx create-react-router@latest
```

```bash
bunx create-react-router@latest
```

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

### Start Preact Development Server

Source: https://panda-css.com/llms-full.txt

Command to launch the development server for a Preact project, enabling hot module replacement and live updates.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Automatic Configuration Loading with Panda CSS

Source: https://panda-css.com/docs/ai/mcp-server

The server automatically loads the 'panda.config.ts' file from the current working directory when it is started. This simplifies the setup process for projects using Panda CSS.

```typescript
The server automatically loads your "panda.config.ts" from the current working directory when started.
```

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

### Start Panda CSS MCP Server via CLI

Source: https://panda-css.com/docs/ai/mcp-server

Commands to manually initiate the MCP server. Supports optional flags for custom configuration paths and working directories.

```bash
pnpm panda mcp
pnpm panda mcp --config ./panda.config.ts
pnpm panda mcp --cwd ./my-project
```

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

### Create Qwik Project

Source: https://panda-css.com/llms-full.txt

Commands to create a new Qwik project using the TypeScript template with various package managers like npm, pnpm, yarn, and bun.

```bash
npm create qwik@latest
```

```bash
pnpm create qwik@latest
```

```bash
yarn create qwik
```

```bash
bun create qwik@latest
```

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

### Basic React Component with Panda CSS

Source: https://panda-css.com/docs/concepts/style-props

Demonstrates a simple React functional component styled using Panda CSS. It shows how to import and use styled components for UI elements. This example assumes the necessary Panda CSS setup is in place.

```jsx
const App = () => <Button>Button</Button>;
// => <button class="btn btn--variant_secondary px_10px">Button</button>
```

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

### Panda CSS Container Query Example (JSX)

Source: https://panda-css.com/docs/concepts/conditional-styles

This snippet demonstrates a basic implementation of container queries using Panda CSS within a JSX environment. It defines styles that apply based on the container's size, utilizing the `cq` function for conditional styling. No external dependencies are explicitly shown beyond the assumed Panda CSS setup.

```jsx
import { css } from 'panda-css';

function Example() {
  return (
    <nav className={css({
      containerType: 'inline-size',
    })}>
      
    </nav>
  );
}
```

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

### Define custom tokens

Source: https://panda-css.com/docs/guides/minimal-setup

Demonstrates how to define custom design tokens within the theme object after removing default presets.

```javascript
export default defineConfig({
 // ...
 theme: {
 tokens: {
 colors: {
 primary: { value: '#ff0000' }
 }
 }
 }
})
```

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

### Install Panda CSS CLI

Source: https://panda-css.com/docs/installation/cli

Commands to install the @pandacss/dev dependency and initialize the Panda configuration file using various package managers.

```pnpm
pnpm install -D @pandacss/dev
pnpm panda init
```

```npm
npm install -D @pandacss/dev
npx panda init
```

```yarn
yarn add -D @pandacss/dev
yarn panda init
```

```bun
bun add -D @pandacss/dev
bun panda init
```

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

### Panda CSS Configuration Example

Source: https://panda-css.com/docs/references/config

Demonstrates the basic structure of a `panda.config.ts` file for setting up Panda CSS. It shows how to import `defineConfig` and export a configuration object.

```typescript
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
 // your configuration options here...
})
```

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

### Install Fontsource Package

Source: https://panda-css.com/docs/guides/fonts

Installs the desired font package using the pnpm package manager.

```bash
pnpm add @fontsource-variable/fira-code
```

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

### Create Vue Project with Vite (Multiple Package Managers)

Source: https://panda-css.com/llms-full.txt

Initializes a new Vue.js project using the create-vue scaffolding tool. Supports pnpm, npm, yarn, and bun for package management. The CLI will prompt for project details and configurations.

```bash
pnpm create vue@latest
```

```bash
npm create vue@latest
```

```bash
yarn create vue@latest
```

```bash
bun create vue@latest
```

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

### Install Panda CSS Dev Dependency (pnpm)

Source: https://panda-css.com/docs/ai/mcp-server

Command to install Panda CSS as a development dependency using pnpm.

```bash
pnpm add -D @pandacss/dev
```

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

### Define responsive properties and conditions

Source: https://panda-css.com/docs/references/config

Example configuration showing how to define responsive properties, color tokens, and theme conditions like light and dark modes.

```javascript
{
  responsive: true,
  properties: {
    color: ['*'],
    backgroundColor: ['green.200', 'red.400']
  },
  conditions: ['light', 'dark']
}
```

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

### Initialize MCP Configuration

Source: https://panda-css.com/docs/ai/mcp-server

Command to generate the necessary MCP configuration files for supported AI clients.

```bash
panda init-mcp
```

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

### Install Panda CSS (Shell)

Source: https://panda-css.com/docs/installation/storybook

Commands to install Panda CSS and create the `panda.config.ts` file. This is a fundamental step for using Panda CSS in your project.

```shell
pnpm dlx install panda
```

```shell
npm install panda
```

```shell
yarn dlx install panda
```

```shell
bun install panda
```

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

### Create a Next.js application

Source: https://panda-css.com/llms-full.txt

Initializes a new Next.js project using the official CLI. Supports multiple package managers including pnpm, npm, yarn, and bun.

```bash
pnpm dlx create-next-app@latest --use-pnpm
```

```bash
npx create-next-app@latest --use-npm
```

```bash
yarn dlx create-next-app@latest --use-yarn
```

```bash
bunx create next-app@latest --use-bun
```

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

### Example CSS Syntax (JavaScript)

Source: https://panda-css.com/docs/references/config

This JavaScript code demonstrates the 'object-literal' syntax for defining styles with Panda CSS. It shows a basic example of how styles can be structured.

```javascript
const styles = css({
  // styles here
});
```

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

### CLI Command: init-mcp

Source: https://panda-css.com/docs/references/cli

Initializes MCP configuration files for specific AI clients.

```APIDOC
## CLI COMMAND: init-mcp

### Description
Initialize MCP configuration for AI clients. This creates the necessary configuration files for AI assistants to connect to the Panda MCP server.

### Method
CLI

### Endpoint
panda init-mcp

### Parameters
#### Query Parameters
- **--client** (string) - Optional - AI clients to configure (comma-separated: claude, cursor, vscode, windsurf, codex)
- **--cwd** (string) - Optional - Current working directory

### Request Example
pnpm panda init-mcp --client claude,cursor
```

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

### Install Panda CSS and PostCSS Dependencies

Source: https://panda-css.com/llms-full.txt

Installs the necessary Panda CSS development dependencies and PostCSS packages. It also generates the `panda.config.ts` and `postcss.config.js` configuration files.

```bash
cd web
yarn add -D @pandacss/dev postcss postcss-loader
yarn panda init --postcss
```

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

### Install Panda CSS Dev Package with bun

Source: https://panda-css.com/docs/installation/storybook

Installs the @pandacss/dev package as a development dependency using bun. This is an alternative for projects using the bun runtime.

```bash
bun add -D @pandacss/dev
```

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

### CLI Command: emit-pkg

Source: https://panda-css.com/docs/references/cli

Generates a package.json with entrypoints for the styled-system directory.

```APIDOC
## CLI COMMAND: emit-pkg

### Description
Emit package.json with entrypoints, can be used to create a workspace package dedicated to the styled-system output.

### Method
CLI

### Endpoint
panda emit-pkg

### Parameters
#### Query Parameters
- **--outdir** (string) - Optional - The output directory for the generated CSS utilities
- **--base** (string) - Optional - The base directory of the package.json entrypoints
- **--silent** (boolean) - Optional - Whether to suppress all output
- **--cwd** (string) - Optional - Current working directory

### Request Example
pnpm panda emit-pkg --outdir styled-system
```

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

### Install Panda CSS Dev Package with yarn

Source: https://panda-css.com/docs/installation/storybook

Installs the @pandacss/dev package as a development dependency using yarn. This command is suitable for projects managed with yarn.

```bash
yarn add -D @pandacss/dev
```

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

### JSX Component Usage Example

Source: https://panda-css.com/docs/concepts/recipes

A simple example demonstrating the usage of a JSX component (`Button`) created from a Panda CSS recipe, applying a variant (`size`).

```jsx
<Button size="large">Click me</Button>
```

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

### Configure Panda CSS Presets

Source: https://panda-css.com/docs/guides/minimal-setup

Demonstrates how to define presets in the Panda CSS configuration. Note that base presets are resolved automatically by the library.

```javascript
presets: ['@pandacss/preset-panda']
```

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

### Create Nuxt Project with Various Package Managers

Source: https://panda-css.com/llms-full.txt

This snippet demonstrates how to create a new Nuxt project using different package managers like npx, pnpm, and bun.

```bash
npx nuxi@latest init test-app
```

```bash
pnpm dlx nuxi@latest init test-app
```

```bash
bunx nuxi@latest init test-app
```

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

### Configure Panda CSS Presets

Source: https://panda-css.com/docs/guides/minimal-setup

Shows how to include official Panda CSS presets in the defineConfig function. This allows developers to leverage pre-built utility sets or opinionated design tokens.

```typescript
export default defineConfig({
  // ...
  presets: ['@pandacss/preset-base']
})
```

```typescript
export default defineConfig({
  // ...
  presets: ['@pandacss/preset-panda']
})
```

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

### Preview Built Studio Site with Panda CSS

Source: https://panda-css.com/docs/references/cli

This command allows you to preview the static site that has been built by Panda CSS. It serves the built files locally, making them accessible for review.

```bash
pnpm panda studio --preview
```

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

### Install Panda CSS Dev Package with npm

Source: https://panda-css.com/docs/installation/storybook

Installs the @pandacss/dev package as a development dependency using npm. This command is typically run in the project's root directory.

```bash
npm install -D @pandacss/dev
```

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

### Install Panda CSS Codegen with yarn

Source: https://panda-css.com/docs/customization/conditions

This snippet shows the command to install the Panda CSS codegen package using yarn. This is an alternative to npm for managing project dependencies.

```bash
yarn panda codegen
```

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

### Configure Output CSS Options

Source: https://panda-css.com/llms-full.txt

JSON configuration examples for customizing presets, preflight, prefixes, and layers in Panda CSS.

```json
{
  "presets": ["@pandacss/preset-base", "@pandacss/preset-panda"],
  "eject": true,
  "preflight": { "scope": ".extension", "level": "element" },
  "emitTokensOnly": false,
  "prefix": "panda",
  "layers": {
    "utilities": "panda_utilities"
  }
}
```

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

### Configure File System Options

Source: https://panda-css.com/llms-full.txt

Settings for managing the output directory, gitignore updates, and working directory context.

```json
{
  "gitignore": true,
  "cwd": "src",
  "clean": false,
  "outdir": "styled-system"
}
```

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

### Example Usage of JSX Factory

Source: https://panda-css.com/docs/references/config

Demonstrates how the configured JSX factory name is used in practice. This example shows the creation of a 'panda.button' component, illustrating the direct application of the 'jsxFactory' configuration.

```jsx
<panda.button>
```