diff --git a/packages/comment-widget/src/comment-widget.ts b/packages/comment-widget/src/comment-widget.ts
index fe1685a..862930c 100644
--- a/packages/comment-widget/src/comment-widget.ts
+++ b/packages/comment-widget/src/comment-widget.ts
@@ -25,7 +25,7 @@ import { ToastManager } from './lit-toast';
 
 export class CommentWidget extends LitElement {
   @provide({ context: baseUrlContext })
-  @property({ type: String })
+  @property({ type: String, attribute: 'base-url' })
   baseUrl = '';
 
   @provide({ context: kindContext })
@@ -45,15 +45,15 @@ export class CommentWidget extends LitElement {
   name = '';
 
   @provide({ context: withRepliesContext })
-  @property({ type: Boolean })
-  withReplies = true;
+  @property({ type: Boolean, attribute: 'with-replies' })
+  withReplies = false;
 
   @provide({ context: replySizeContext })
-  @property({ type: Number })
+  @property({ type: Number, attribute: 'reply-size' })
   replySize = 10;
 
   @provide({ context: emojiDataUrlContext })
-  @property({ type: String })
+  @property({ type: String, attribute: 'emoji-data-url' })
   emojiDataUrl = 'https://unpkg.com/@emoji-mart/data';
 
   @provide({ context: currentUserContext })
diff --git a/packages/example/index.html b/packages/example/index.html
index c5ae84b..65f518a 100644
--- a/packages/example/index.html
+++ b/packages/example/index.html
@@ -20,8 +20,8 @@
         --halo-comment-widget-base-border-radius: 0.5em;
 
         /* Color */
-          --halo-comment-widget-base-color: #ffffff;
-          --halo-comment-widget-base-info-color: #64748b;
+        --halo-comment-widget-base-color: #ffffff;
+        --halo-comment-widget-base-info-color: #64748b;
 
         /* Component */
         --halo-comment-widget-component-avatar-rounded: 9999px;
@@ -72,7 +72,7 @@
       kind="Post"
       version="v1alpha1"
       name="5152aea5-c2e8-4717-8bba-2263d46e19d5"
-      withReplies="true"
+      with-replies="false"
     ></comment-widget>
   </body>
 </html>