docs: add Panda CSS to styling your components guide

osmium/src/ui/image-link.tsx

@@ -18,6 +18,7 @@ export const logos: { [key: string]: { file: string; style?: string } } = {
 	less: { file: "less.svg" },
 	cssmodules: { file: "css-modules.svg", style: "invert" },
 	macaron: { file: "macaron.svg" },
+	panda: { file: "panda.svg" },
 	tailwind: { file: "tailwind.svg" },
 	stormkit: { file: "stormkit.svg" },
 	sst: { file: "sst.svg" },

src/routes/(2)guides/(0)styling-components/panda-css.mdx

@@ -0,0 +1,109 @@
+---
+title: Panda CSS
+category: Guides / Styling Components
+order: 5
+mainNavExclude: true
+use_cases: >-
+  styling components, css-in-js, build-time styles, design tokens, type-safe
+  styles
+tags:
+  - styling
+  - css
+  - panda
+  - css-in-js
+  - postcss
+  - tokens
+version: "1.0"
+description: >-
+  Set up Panda CSS in your Solid app for build-time CSS-in-JS. Configure
+  PostCSS, define design tokens, and write type-safe styles.
+---
+
+[Panda CSS](https://panda-css.com/) is a build-time CSS-in-JS library that combines the developer experience of CSS-in-JS with the performance of atomic CSS.
+Styles are extracted at build time through PostCSS, so no runtime styling code ships to the browser.
+
+## Installation
+
+1. Install Panda CSS as a development dependency:
+
+```package-install-dev
+@pandacss/dev
+```
+
+2. Initialize Panda CSS in your project.
+   This creates a `panda.config.ts` file and a `postcss.config.cjs` file:
+
+```package-exec
+panda init --postcss
+```
+
+3. Add the `prepare` script to your `package.json`, which generates the `styled-system` directory after installs:
+
+```json title="package.json"
+{
+	"scripts": {
+		"prepare": "panda codegen",
+		"dev": "vite",
+		"build": "vite build"
+	}
+}
+```
+
+## Configure Panda CSS
+
+Open `panda.config.ts` and make sure the `include` patterns match your source files.
+Setting `jsxFramework` to `"solid"` enables Solid-specific JSX style props support:
+
+```ts title="panda.config.ts"
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+	preflight: true,
+	include: ["./src/**/*.{js,jsx,ts,tsx}"],
+	exclude: [],
+	jsxFramework: "solid",
+	outdir: "styled-system",
+});
+```
+
+## Import the cascade layers
+
+Add the Panda CSS cascade layers to your `src/index.css` file:
+
+```css title="src/index.css"
+@layer reset, base, tokens, recipes, utilities;
+```
+
+Then import your `index.css` file into the root `index.jsx` or `index.tsx` file:
+
+```jsx
+/* @refresh reload */
+import { render } from "solid-js/web"
+import "./index.css"
+import App from "./App"
+
+render(() => <App />, document.getElementById('root') as HTMLElement);
+```
+
+## Usage
+
+With Panda CSS set up, use the `css` function from the generated `styled-system` directory to style your components:
+
+```jsx
+/* src/App.jsx */
+import { css } from "../styled-system/css";
+
+function App() {
+	return (
+		<div class={css({ fontSize: "2xl", fontWeight: "bold" })}>
+			Hello from Panda! 🐼
+		</div>
+	);
+}
+
+export default App;
+```
+
+## Support
+
+For additional assistance, refer to the [Panda CSS installation guide](https://panda-css.com/docs/installation/vite).

src/routes/(2)guides/(0)styling-components/tailwind-v3.mdx

@@ -1,7 +1,7 @@
 ---
 title: Tailwind CSS v3
 category: Guides / Styling Components
-order: 7
+order: 8
 mainNavExclude: true
 use_cases: >-
   utility-first css, rapid prototyping, responsive design, consistent styling,

src/routes/(2)guides/(0)styling-components/tailwind.mdx

@@ -1,7 +1,7 @@
 ---
 title: Tailwind CSS
 category: Guides / Styling Components
-order: 5
+order: 6
 mainNavExclude: true
 use_cases: >-
   styling components, utility classes, rapid ui development, responsive design,

src/routes/(2)guides/(0)styling-components/uno.mdx

@@ -1,7 +1,7 @@
 ---
 title: UnoCSS
 category: Guides / Styling Components
-order: 6
+order: 7
 mainNavExclude: true
 use_cases: >-
   styling components, utility css, on-demand styles, vite integration, atomic

src/routes/(2)guides/(0)styling-your-components.mdx

@@ -54,13 +54,21 @@ Many also offer features like theming, media queries, and server-side rendering
 
 **Note:** Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid.
 
-### Macaron
+<div class="flex flex-col md:grid md:grid-cols-2 md:grid-rows-1  gap-3">
 
 <ImageLink
 	title="Macaron"
 	href="/guides/styling-components/macaron"
 	logo="macaron"
 />
+<ImageLink
+	title="Panda CSS"
+	href="/guides/styling-components/panda-css"
+	logo="panda"
+/>
+
+</div>
+
 ## CSS frameworks
 
 CSS frameworks provide pre-styled components and utility classes to speed up development.