Integration docs

apps/www/components/ui/badge.tsx

@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "~/lib/utils";
+
+export const badgeVariants = cva(
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+export const Badge = ({ className, variant, ...props }: BadgeProps) => (
+	<div className={cn(badgeVariants({ variant }), className)} {...props} />
+);

apps/www/content/docs/guides/type-function.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Type Function"
+title: "type function"
 description: "Learn about ArkEnv's advanced type function for runtime validation with built-in environment-specific types."
 ---
 

apps/www/content/docs/integrations/jetbrains.mdx

@@ -0,0 +1,25 @@
+---
+title: Integrating with JetBrains IDEs
+description: Syntax highlighting and improved developer experience with JetBrains IDEs
+---
+
+## ArkType JetBrains Extension: Syntax Highlighting
+
+The [ArkType extension](https://plugins.jetbrains.com/plugin/27099-arktype) provides syntax highlighting for ArkEnv.
+
+<Card
+  title="Install ArkType JetBrains Extension"
+  href="https://plugins.jetbrains.com/plugin/27099-arktype"
+  description="Get syntax highlighting for ArkType"
+/>
+
+To integrate ArkEnv, use the **default import** and name it `arkenv`:
+
+```typescript
+import arkenv from 'arkenv';
+
+const env = arkenv({
+  PORT: "number.port", 
+  NODE_ENV: "'development' | 'production' | 'test'",
+});
+```

apps/www/content/docs/integrations/vscode.mdx

@@ -0,0 +1,31 @@
+---
+title: Integrating with VS Code & Cursor
+description: Syntax highlighting and improved developer experience with VS Code extensions
+---
+
+## ArkType VS Code Extension: Syntax Highlighting and ErrorLens
+
+The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkEnv.
+
+<Card
+  title="Install ArkType VS Code Extension"
+  href="https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark"
+  description="Get syntax highlighting and inline error summaries for ArkType"
+/>
+
+To integrate ArkEnv, use the **default import** and name it `arkenv`:
+
+```typescript
+import arkenv from 'arkenv';
+
+const env = arkenv({
+  PORT: "number.port", 
+  NODE_ENV: "'development' | 'production' | 'test'",
+});
+```
+
+## ArkThemes: Special Highlighting
+
+For an even better DX, [ArkThemes](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkthemes) provides special highlighting for TypeScript generics in ArkType definitions.
+
+![ArkType syntax highlighting in VS Code](/dx.png)

apps/www/content/docs/meta.json

@@ -4,9 +4,10 @@
 		"index",
 		"quickstart",
 		"examples",
+		"---[New]Integrations---",
+		"[Blocks][VS Code & Cursor](/docs/integrations/vscode)",
+		"[Blocks][JetBrains IDEs](/docs/integrations/jetbrains)",
 		"---Guides---",
-		"guides/import-options",
-		"guides/type-function",
 		"guides/environment-configuration"
 	]
 }

apps/www/lib/source.tsx

@@ -0,0 +1,33 @@
+import type { autocomplete } from "@ark/util";
+import { loader } from "fumadocs-core/source";
+import { icons } from "lucide-react";
+import { createElement } from "react";
+import { docs } from "~/.source";
+import { Badge } from "~/components/ui/badge";
+
+// function createNewElement() {
+// 	return createElement(
+// 		"span",
+// 		{
+// 			className:
+// 				"bg-gradient-to-r from-yellow-400 to-yellow-100 text-amber-800 px-1.5 py-0.5 rounded text-xs font-medium",
+// 			"data-new": "true",
+// 		},
+// 		"New",
+// 	);
+// }
+export type IconName = keyof typeof icons | "New";
+
+export const source = loader({
+	baseUrl: "/docs",
+	source: docs.toFumadocsSource(),
+	icon(icon?: autocomplete<IconName>) {
+		if (!icon) return;
+
+		if (icon in icons) return createElement(icons[icon as never]);
+		if (icon === "New")
+			return <Badge className="h-4 text-[10px] px-[0.2rem] order-2">new</Badge>;
+
+		throw new Error(`${icon} is not a valid icon`);
+	},
+});

apps/www/package.json

@@ -7,7 +7,8 @@
 		"dev": "next dev",
 		"start": "next start",
 		"postinstall": "fumadocs-mdx",
-		"clean": "rimraf node_modules .next .source"
+		"clean": "rimraf node_modules .next .source",
+		"fix": "pnpm -w run fix"
 	},
 	"dependencies": {
 		"@icons-pack/react-simple-icons": "^13.7.0",
@@ -31,13 +32,14 @@
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"devDependencies": {
+		"@ark/util": "^0.49.0",
+		"@tailwindcss/postcss": "^4.1.13",
+		"@types/mdx": "^2.0.13",
 		"@types/node": "24.3.1",
 		"@types/react": "^19.1.12",
 		"@types/react-dom": "^19.1.9",
-		"typescript": "^5.9.2",
-		"@types/mdx": "^2.0.13",
-		"@tailwindcss/postcss": "^4.1.13",
+		"postcss": "^8.5.6",
 		"tailwindcss": "^4.1.13",
-		"postcss": "^8.5.6"
+		"typescript": "^5.9.2"
 	}
 }