feat: add Dot Background component with interactive examples and documentation

components/docs/interactive-examples/dot-background.tsx

@@ -0,0 +1,121 @@
+import { DotBackground } from "@/registry/radix-nova/dot-background"
+
+const colorVariants = [
+  {
+    variant: "default",
+    label: "Default",
+    description: "Uses the default surface and border tokens.",
+  },
+  {
+    variant: "muted",
+    label: "Muted",
+    description: "A softer surface for secondary sections.",
+  },
+  {
+    variant: "card",
+    label: "Card",
+    description: "Blends into card-based layouts.",
+  },
+  {
+    variant: "accent",
+    label: "Accent",
+    description: "Adds stronger contrast for callouts.",
+  },
+  {
+    variant: "secondary",
+    label: "Secondary",
+    description: "Works well inside layered UIs.",
+  },
+] as const
+
+const spacingVariants = [
+  {
+    spacing: "dense",
+    label: "Dense",
+    description: "Tighter pattern for more texture.",
+  },
+  {
+    spacing: "default",
+    label: "Default",
+    description: "Balanced density for general use.",
+  },
+  {
+    spacing: "relaxed",
+    label: "Relaxed",
+    description: "Airier spacing for larger panels.",
+  },
+  {
+    spacing: "loose",
+    label: "Loose",
+    description: "Sparse dots for subtle decoration.",
+  },
+] as const
+
+export function DotBackgroundInteractiveExample() {
+  return (
+    <div className="grid gap-6">
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {colorVariants.map(({ variant, label, description }) => (
+          <DotBackground
+            key={variant}
+            variant={variant}
+            className="rounded-xl border p-4"
+          >
+            <div className="flex min-h-28 flex-col justify-between gap-4">
+              <div className="flex flex-col gap-1">
+                <div className="text-sm font-medium">{label}</div>
+                <p className="text-sm text-muted-foreground">{description}</p>
+              </div>
+              <div className="text-xs text-muted-foreground">{`variant="${variant}"`}</div>
+            </div>
+          </DotBackground>
+        ))}
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        {spacingVariants.map(({ spacing, label, description }) => (
+          <DotBackground
+            key={spacing}
+            variant="card"
+            spacing={spacing}
+            className="rounded-xl border p-4"
+          >
+            <div className="flex min-h-24 flex-col justify-between gap-4">
+              <div className="flex flex-col gap-1">
+                <div className="text-sm font-medium">{label}</div>
+                <p className="text-sm text-muted-foreground">{description}</p>
+              </div>
+              <div className="text-xs text-muted-foreground">{`spacing="${spacing}"`}</div>
+            </div>
+          </DotBackground>
+        ))}
+      </div>
+
+      <DotBackground
+        variant="custom"
+        spacing="custom"
+        vars={{
+          backgroundColor:
+            "color-mix(in oklab, var(--primary) 10%, var(--background))",
+          dotColor: "color-mix(in oklab, var(--primary) 28%, transparent)",
+          spacing: 24,
+          dotSize: 2,
+        }}
+        className="rounded-xl border p-5"
+      >
+        <div className="flex min-h-28 flex-col justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <div className="text-sm font-medium">Custom</div>
+            <p className="text-sm text-muted-foreground">
+              Override surface color, dot color, spacing, and dot size with
+              `vars`.
+            </p>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {`variant="custom" spacing="custom"`}
+          </div>
+        </div>
+      </DotBackground>
+    </div>
+  )
+}

components/docs/interactive-examples/index.ts

@@ -2,5 +2,6 @@ export { AlertDialogInteractiveExample } from "./alert-dialog"
 export { ButtonInteractiveExample } from "./button"
 export { ConfirmDialogInteractiveExample } from "./confirm-dialog"
 export { DialogInteractiveExample } from "./dialog"
+export { DotBackgroundInteractiveExample } from "./dot-background"
 export { FilepickerDropzoneInteractiveExample } from "./filepicker-dropzone"
 export { LoadingButtonInteractiveExample } from "./loading-button"

content/docs/components/dot-background.mdx

@@ -0,0 +1,103 @@
+---
+title: Dot Background
+description: A dotted surface wrapper with semantic color and spacing variants plus CSS variable overrides.
+---
+
+import { DotBackgroundInteractiveExample } from "@/components/docs/interactive-examples";
+
+## Install
+
+```bash
+npx shadcn@latest add @c-ui/dot-background
+```
+
+Direct URL install:
+
+```bash
+npx shadcn@latest add https://coneno.github.io/c-ui/r/radix-nova/dot-background.json
+```
+
+## Live Example
+
+<div className="not-prose">
+	<DotBackgroundInteractiveExample />
+</div>
+
+## Usage
+
+```tsx
+import { DotBackground } from "@/components/ui/dot-background"
+
+export function HeroSurface() {
+	return (
+		<DotBackground variant="card" spacing="relaxed" className="rounded-2xl border p-8">
+			<div className="max-w-md">
+				<p className="text-sm text-muted-foreground">Patterned container</p>
+				<h2 className="mt-2 text-2xl font-semibold tracking-tight">
+					Add subtle texture without leaving your design tokens.
+				</h2>
+			</div>
+		</DotBackground>
+	)
+}
+```
+
+## Color Variants
+
+```tsx
+<DotBackground variant="default" className="rounded-xl border p-6" />
+<DotBackground variant="muted" className="rounded-xl border p-6" />
+<DotBackground variant="card" className="rounded-xl border p-6" />
+<DotBackground variant="accent" className="rounded-xl border p-6" />
+<DotBackground variant="secondary" className="rounded-xl border p-6" />
+```
+
+## Spacing Variants
+
+```tsx
+<DotBackground spacing="dense" className="rounded-xl border p-6" />
+<DotBackground spacing="default" className="rounded-xl border p-6" />
+<DotBackground spacing="relaxed" className="rounded-xl border p-6" />
+<DotBackground spacing="loose" className="rounded-xl border p-6" />
+```
+
+## Custom Overrides
+
+Use `variant="custom"` and `spacing="custom"` when you want the surface to be driven entirely by `vars`.
+
+```tsx
+<DotBackground
+	variant="custom"
+	spacing="custom"
+	vars={{
+		backgroundColor: "color-mix(in oklab, var(--primary) 10%, var(--background))",
+		dotColor: "color-mix(in oklab, var(--primary) 28%, transparent)",
+		spacing: 24,
+		dotSize: 2,
+	}}
+	className="rounded-2xl border p-8"
+>
+	<div className="max-w-md">
+		<p className="text-sm text-muted-foreground">Custom surface</p>
+		<h2 className="mt-2 text-2xl font-semibold tracking-tight">
+			Tune the density and dot size with numbers or raw CSS lengths.
+		</h2>
+	</div>
+</DotBackground>
+```
+
+## Configuration
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `variant` | `"default" \| "muted" \| "card" \| "accent" \| "secondary" \| "custom"` | `"default"` | Semantic background palette |
+| `spacing` | `"dense" \| "default" \| "relaxed" \| "loose" \| "custom"` | `"default"` | Controls the dot grid spacing |
+| `vars.backgroundColor` | `string` | `undefined` | Overrides the surface color |
+| `vars.dotColor` | `string` | `undefined` | Overrides the dot color |
+| `vars.spacing` | `number \| string` | `undefined` | Custom dot spacing; numbers become `px` |
+| `vars.dotSize` | `number \| string` | `undefined` | Custom dot size; numbers become `px` |
+| `asChild` | `boolean` | `false` | Render the pattern styles onto a child element via Radix `Slot` |
+| `className` | `string` | `undefined` | Extends layout and border styling |
+| `style` | `React.CSSProperties` | `undefined` | Supports the `--dot-background-*` CSS custom properties directly |
+
+All native `<div>` props are forwarded.

registry.json

@@ -75,6 +75,20 @@
 			],
 			"style": "radix-nova"
 		},
+		{
+			"name": "dot-background",
+			"type": "registry:component",
+			"title": "Dot Background",
+			"description": "A dotted surface wrapper with semantic color and spacing variants.",
+			"files": [
+				{
+					"path": "registry/radix-nova/dot-background.tsx",
+					"type": "registry:component",
+					"target": "components/ui/dot-background.tsx"
+				}
+			],
+			"style": "radix-nova"
+		},
 		{
 			"name": "loading-button",
 			"type": "registry:component",