diff --git a/demo/src/App.css b/demo/src/App.css
index 56e8431..e7f97ae 100644
--- a/demo/src/App.css
+++ b/demo/src/App.css
@@ -438,4 +438,50 @@ header {
     .header-nav {
         gap: 1.5rem;
     }
+}
+
+/* ===========================================
+   eSign Component Customization Example
+   =========================================== */
+
+/*
+ * The eSign component exposes CSS classes that you can target directly.
+ * No special CSS variables needed - just write standard CSS!
+ *
+ * Available classes:
+ *   .superdoc-esign-container          - Root container (also accepts className prop)
+ *   .superdoc-esign-document           - Document section wrapper
+ *   .superdoc-esign-document-toolbar   - Toolbar with download button
+ *   .superdoc-esign-document-controls  - Control buttons container
+ *   .superdoc-esign-document-viewer    - Scroll container (SuperDoc mounts inside)
+ *   .superdoc-esign-controls           - Bottom section with fields + submit
+ *   .superdoc-esign-fields             - Signer fields container
+ *   .superdoc-esign-actions            - Action buttons container
+ *   .superdoc-esign-form-actions       - Form submit button container
+ */
+
+/* Example: Card-like styling */
+.superdoc-esign-container {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.superdoc-esign-document-viewer {
+    background: #f9fafb;
+}
+
+.superdoc-esign-controls {
+    margin-top: 0; /* Remove gap between viewer and controls */
+    padding: 16px 20px;
+    background: #f9fafb;
+    border-top: 1px solid #e5e7eb;
+}
+
+.superdoc-esign-fields {
+    margin-bottom: 16px;
+}
+
+.superdoc-esign-actions {
+    gap: 12px;
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index e97432f..6ab03b7 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "dist",
+    "src/styles.css",
     "README.md"
   ],
   "scripts": {
diff --git a/src/index.tsx b/src/index.tsx
index fe0c959..b15e8f9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -390,10 +390,7 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
       const SubmitButton = submit?.component || createSubmitButton(submit);
 
       return (
-        <div
-          className="superdoc-esign-actions superdoc-esign-form-actions"
-          style={{ display: 'flex', gap: '10px' }}
-        >
+        <div className="superdoc-esign-actions superdoc-esign-form-actions">
           <SubmitButton
             onClick={handleSubmit}
             isValid={isValid}
@@ -427,27 +424,10 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
     return (
       <div className={`superdoc-esign-container ${className || ''}`} style={style}>
         {/* Document viewer section */}
-        <div
-          className="superdoc-esign-document"
-          data-testid="superdoc-esign-document"
-          style={{ display: 'flex', flexDirection: 'column' }}
-        >
+        <div className="superdoc-esign-document" data-testid="superdoc-esign-document">
           {documentControls && (
-            <div
-              className="superdoc-esign-document-toolbar"
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                padding: '8px 12px',
-              }}
-            >
-              <div
-                className="superdoc-esign-document-controls"
-                style={{ display: 'flex', gap: '8px' }}
-              >
-                {documentControls}
-              </div>
+            <div className="superdoc-esign-document-toolbar">
+              <div className="superdoc-esign-document-controls">{documentControls}</div>
             </div>
           )}
           <div
@@ -459,18 +439,10 @@ const SuperDocESign = forwardRef<Types.SuperDocESignHandle, Types.SuperDocESignP
         </div>
 
         {/* Controls section - separate from document */}
-        <div
-          className="superdoc-esign-controls"
-          style={{ marginTop: '20px' }}
-          data-testid="superdoc-esign-controls"
-        >
+        <div className="superdoc-esign-controls" data-testid="superdoc-esign-controls">
           {/* Signer fields */}
           {fields.signer && fields.signer.length > 0 && (
-            <div
-              className="superdoc-esign-fields"
-              style={{ marginBottom: '20px' }}
-              data-testid="superdoc-esign-fields"
-            >
+            <div className="superdoc-esign-fields" data-testid="superdoc-esign-fields">
               {fields.signer.map(renderField)}
             </div>
           )}
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..6bdf738
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,51 @@
+/**
+ * SuperDoc eSign - Default Styles
+ *
+ * These styles provide sensible defaults for the eSign component.
+ * Import this file to get a basic layout, or skip it and write your own CSS.
+ *
+ * Usage:
+ *   import '@superdoc-dev/esign/styles.css';
+ *
+ * All classes can be customized with standard CSS:
+ *
+ *   .superdoc-esign-container          - Root container (also accepts className prop)
+ *   .superdoc-esign-document           - Document section wrapper
+ *   .superdoc-esign-document-toolbar   - Toolbar with download button
+ *   .superdoc-esign-document-controls  - Control buttons container
+ *   .superdoc-esign-document-viewer    - Scroll container (SuperDoc mounts inside)
+ *   .superdoc-esign-controls           - Bottom section with fields + submit
+ *   .superdoc-esign-fields             - Signer fields container
+ *   .superdoc-esign-actions            - Action buttons container
+ *   .superdoc-esign-form-actions       - Form submit button container (alias for actions)
+ */
+
+.superdoc-esign-document {
+  display: flex;
+  flex-direction: column;
+}
+
+.superdoc-esign-document-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 12px;
+}
+
+.superdoc-esign-document-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.superdoc-esign-controls {
+  margin-top: 20px;
+}
+
+.superdoc-esign-fields {
+  margin-bottom: 20px;
+}
+
+.superdoc-esign-actions {
+  display: flex;
+  gap: 10px;
+}
diff --git a/vite.config.ts b/vite.config.ts
index ce4a033..4b2f280 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,25 +3,22 @@ import dts from 'vite-plugin-dts';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
-    build: {
-        lib: {
-            entry: 'src/index.tsx',
-            formats: ['es', 'cjs'],
-            fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'),
-        },
-        rollupOptions: {
-            external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'superdoc'],
-        },
+  build: {
+    lib: {
+      entry: 'src/index.tsx',
+      formats: ['es', 'cjs'],
+      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'),
     },
-    plugins: [
-        react(),
-        dts()
-    ],
-    test: {
-        environment: 'jsdom',
-        setupFiles: ['./src/test/setup.ts'],
-        globals: true,
-        clearMocks: true,
-        restoreMocks: true
-    }
-});
\ No newline at end of file
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'superdoc'],
+    },
+  },
+  plugins: [react(), dts()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+    clearMocks: true,
+    restoreMocks: true,
+  },
+});