diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8995ff4..29f8446 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sequoia-ui",
-	"version": "0.1.0",
+	"version": "0.0.2",
 	"type": "module",
 	"files": [
 		"dist",
@@ -8,8 +8,14 @@
 	],
 	"main": "./dist/index.js",
 	"exports": {
-		".": "./dist/index.js",
-		"./comments": "./dist/index.js"
+		".": {
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./comments": {
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
 	},
 	"scripts": {
 		"lint": "biome lint --write",
diff --git a/packages/ui/src/components/sequoia-comments/sequoia-comments.ts b/packages/ui/src/components/sequoia-comments/sequoia-comments.ts
index 6fb4b08..6a9fdbc 100644
--- a/packages/ui/src/components/sequoia-comments/sequoia-comments.ts
+++ b/packages/ui/src/components/sequoia-comments/sequoia-comments.ts
@@ -26,7 +26,13 @@ const BLUESKY_ICON = `<svg class="sequoia-bsky-logo" viewBox="0 0 600 530" fill=
   <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
 </svg>`;
 
-export class SequoiaComments extends HTMLElement {
+// SSR-safe base class - use HTMLElement in browser, empty class in Node.js
+const BaseElement =
+	typeof HTMLElement !== "undefined"
+		? HTMLElement
+		: (class {} as typeof HTMLElement);
+
+export class SequoiaComments extends BaseElement {
 	private shadow: ShadowRoot;
 	private state: State = { type: "loading" };
 	private abortController: AbortController | null = null;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 8a7a485..a3a9a76 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -24,3 +24,7 @@ export type {
 } from "./types/bluesky";
 
 export { isThreadViewPost } from "./types/bluesky";
+
+// Styles and theming
+export type { SequoiaTheme, SequoiaCSSVar } from "./types/styles";
+export { SEQUOIA_CSS_VARS } from "./types/styles";
diff --git a/packages/ui/src/types/styles.ts b/packages/ui/src/types/styles.ts
new file mode 100644
index 0000000..2f847dc
--- /dev/null
+++ b/packages/ui/src/types/styles.ts
@@ -0,0 +1,40 @@
+/**
+ * CSS custom properties for theming SequoiaComments
+ *
+ * @example
+ * ```css
+ * :root {
+ *   --sequoia-fg-color: #1f2937;
+ *   --sequoia-bg-color: #ffffff;
+ *   --sequoia-accent-color: #2563eb;
+ * }
+ * ```
+ */
+export interface SequoiaTheme {
+	/** Primary text color (default: #1f2937) */
+	"--sequoia-fg-color"?: string;
+	/** Background color for comments and containers (default: #ffffff) */
+	"--sequoia-bg-color"?: string;
+	/** Border color for separators and outlines (default: #e5e7eb) */
+	"--sequoia-border-color"?: string;
+	/** Secondary/muted text color (default: #6b7280) */
+	"--sequoia-secondary-color"?: string;
+	/** Accent color for links and buttons (default: #2563eb) */
+	"--sequoia-accent-color"?: string;
+	/** Border radius for cards and buttons (default: 8px) */
+	"--sequoia-border-radius"?: string;
+}
+
+/**
+ * All available CSS custom property names
+ */
+export const SEQUOIA_CSS_VARS = [
+	"--sequoia-fg-color",
+	"--sequoia-bg-color",
+	"--sequoia-border-color",
+	"--sequoia-secondary-color",
+	"--sequoia-accent-color",
+	"--sequoia-border-radius",
+] as const;
+
+export type SequoiaCSSVar = (typeof SEQUOIA_CSS_VARS)[number];