@voxket-ai/voxket-live 1.1.48 → 1.1.50

package/README.md

@@ -89,7 +89,24 @@ yarn add @voxket-ai/voxket-live
 
 That's it! All dependencies including LiveKit are bundled automatically. React and React DOM are peer dependencies (your project should already have them).
 
-### � **Popup Icon Customization**
+### 🎨 **IMPORTANT: Import the CSS Styles**
+
+**The SDK includes pre-compiled CSS with all necessary styles. You MUST import the CSS file for the widget to display correctly:**
+
+```tsx
+// In your main App.tsx or entry file
+import '@voxket-ai/voxket-live/style.css';
+```
+
+Or in vanilla JavaScript/HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@voxket-ai/voxket-live/dist/index.css">
+```
+
+**Note:** The SDK does NOT require Tailwind CSS in your project - all styles are pre-compiled and bundled. The CSS import includes everything needed.
+
+### 🎨 **Popup Icon Customization**
 
 The popup trigger button comes with a default Voxket logo. You can customize it in two ways:
 

package/dist/components/common/common-popup-trigger.d.ts

@@ -19,12 +19,17 @@ export interface CommonPopupTriggerProps {
      * Custom logo URL. If not provided, uses the bundled Voxket logo
      */
     logoUrl?: string;
+    /**
+     * Theme for styling. 'light' uses white background with indigo border, others use black background.
+     */
+    theme?: 'dark' | 'light' | 'vox' | 'midnight' | 'levish';
 }
 /**
  * CommonPopupTrigger
- * A theme-agnostic popup trigger: black circular button with bundled Voxket logo centered.
+ * A theme-aware popup trigger: circular button with bundled Voxket logo centered.
  * Uses the logo bundled with the SDK, positioned in any corner.
  * When session is active (isRunning=true), shows an elegant glowing border animation.
+ * In light theme, uses white background with indigo border. In dark themes, uses black background.
  */
 export declare const CommonPopupTrigger: React.FC<CommonPopupTriggerProps>;
 export default CommonPopupTrigger;