diff --git a/src/button/index.vue b/src/button/index.vue
index 740eade..87bc27b 100644
--- a/src/button/index.vue
+++ b/src/button/index.vue
@@ -86,21 +86,25 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 
 <style lang="scss" scoped>
 @use '../common/_partials';
+@use '../common/_reset';
 
+:where(.r-button) {
+  @include reset.button;
+}
+:where(a.r-button) {
+  text-decoration: none;
+}
 .r-button {
   --r-button-color: var(--r-common-text-color);
   --r-button-border-color: var(--r-button-color);
   --r-button-border-width: 1px;
   --r-button-border-dash: none;
-  appearance: none;
   display: inline-block;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline);
-  border: none;
   color: var(--r-button-color);
   white-space: nowrap;
   text-align: center;
-  background-color: transparent;
   cursor: pointer;
   text-decoration-thickness: calc(var(--r-button-border-width) + 1px);
   &:focus {
@@ -151,7 +155,4 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     font-size: var(--r-common-large-font-size);
   }
 }
-a.r-button {
-  text-decoration: none;
-}
 </style>
diff --git a/src/checkbox/checkbox-group.vue b/src/checkbox/checkbox-group.vue
index edb8861..c65e0b8 100644
--- a/src/checkbox/checkbox-group.vue
+++ b/src/checkbox/checkbox-group.vue
@@ -52,9 +52,9 @@ provide(modelInjection, $$(model))
 </template>
 
 <style lang="scss" scoped>
-.r-checkbox-group {
-  margin: 0;
-  padding: 0;
-  border: none;
+@use '../common/_reset';
+
+:where(.r-checkbox-group) {
+  @include reset.fieldset;
 }
 </style>
diff --git a/src/checkbox/index.vue b/src/checkbox/index.vue
index bee548f..ba098f7 100644
--- a/src/checkbox/index.vue
+++ b/src/checkbox/index.vue
@@ -135,6 +135,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-checkbox {
   --r-checkbox-border-color: var(--r-common-text-color);
   --r-checkbox-border-width: 1px;
@@ -152,10 +154,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     text-decoration-line: line-through;
   }
 }
+:where(.r-checkbox__input) {
+  @include reset.input-checkbox;
+}
 .r-checkbox__input {
-  appearance: none;
   position: absolute;
-  margin: 0;
 }
 .r-checkbox__control {
   flex: none;
diff --git a/src/common/_reset.scss b/src/common/_reset.scss
new file mode 100644
index 0000000..8638934
--- /dev/null
+++ b/src/common/_reset.scss
@@ -0,0 +1,47 @@
+@mixin a {
+  text-decoration: none;
+}
+
+@mixin button {
+  appearance: none;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin dialog {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+@mixin input {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin input-checkbox {
+  appearance: none;
+  margin: 0;
+}
+
+@mixin input-range {
+  appearance: none;
+  margin: 0;
+}
+
+@mixin popover {
+  border: none;
+}
+
+@mixin textarea {
+  background: none;
+  resize: none;
+}
diff --git a/src/dialog/index.vue b/src/dialog/index.vue
index a093ba6..b95b667 100644
--- a/src/dialog/index.vue
+++ b/src/dialog/index.vue
@@ -119,12 +119,14 @@ const nestingGraphicsOptions = $computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
+:where(.r-dialog) {
+  @include reset.dialog;
+}
 .r-dialog {
   max-width: min(90vw, 960px);
-  padding: 0;
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
   &::backdrop {
     background-color: rgb(0 0 0 / 50%);
   }
diff --git a/src/input/index.vue b/src/input/index.vue
index 4fa0e42..3fe4105 100644
--- a/src/input/index.vue
+++ b/src/input/index.vue
@@ -138,6 +138,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-input {
   --r-input-border-color: var(--r-common-text-color);
   --r-input-border-width: 1px;
@@ -160,14 +162,17 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     width: auto;
   }
 }
+:where(.r-input__input) {
+  @include reset.input;
+}
+:where(textarea.r-input__input) {
+  @include reset.textarea;
+}
 .r-input__input {
-  appearance: none;
   width: 100%;
   padding-inline: var(--r-common-box-padding-inline);
-  border: none;
   color: var(--r-common-text-color);
   line-height: var(--r-input-line-height);
-  background-color: transparent;
   text-decoration-thickness: calc(var(--r-input-border-width) + 1px);
   &:focus {
     outline: none;
@@ -183,7 +188,5 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 }
 textarea.r-input__input {
   height: calc(var(--r-input-lines) * var(--r-input-line-height));
-  background: none;
-  resize: none;
 }
 </style>
diff --git a/src/link/index.vue b/src/link/index.vue
index 1e09484..f16af60 100644
--- a/src/link/index.vue
+++ b/src/link/index.vue
@@ -28,7 +28,11 @@ defineSlots<{
 
 <style lang="scss" scoped>
 @use '../common/_partials';
+@use '../common/_reset';
 
+:where(button.r-link) {
+  @include reset.button;
+}
 .r-link {
   --r-link-underline-width: 2px;
   text-decoration: none;
@@ -46,9 +50,6 @@ defineSlots<{
   }
 }
 button.r-link {
-  appearance: none;
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
 }
 </style>
diff --git a/src/popover/index.vue b/src/popover/index.vue
index 3d205ab..5bbebb0 100644
--- a/src/popover/index.vue
+++ b/src/popover/index.vue
@@ -179,19 +179,20 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-popover {
   --r-popover-border-color: var(--r-common-text-color);
   --r-popover-border-width: 1px;
   position: relative;
   display: inline-block;
 }
+:where(.r-popover__anchor) {
+  @include reset.button;
+}
 .r-popover__anchor {
-  appearance: none;
   display: block;
-  padding: 0;
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
 }
 .r-popover__content {
   position: absolute;
diff --git a/src/rate/index.vue b/src/rate/index.vue
index 5cfe11d..e5d0053 100644
--- a/src/rate/index.vue
+++ b/src/rate/index.vue
@@ -114,6 +114,8 @@ function click(event: MouseEvent) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-rate {
   --r-rate-color: var(--r-common-primary-color);
   --r-rate-border-color: var(--r-common-text-color);
@@ -123,11 +125,12 @@ function click(event: MouseEvent) {
     cursor: not-allowed;
   }
 }
+:where(.r-rate__input) {
+  @include reset.input-range;
+}
 .r-rate__input {
-  appearance: none;
   width: calc((var(--r-rate-control-size) - 4) * 7 * 48 / 45 + 4);
   height: var(--r-rate-control-size);
-  margin: 0;
   opacity: 0;
   cursor: pointer;
   pointer-events: none;
diff --git a/src/select/index.vue b/src/select/index.vue
index 60e981c..5a3f628 100644
--- a/src/select/index.vue
+++ b/src/select/index.vue
@@ -168,6 +168,8 @@ provide(labelsInjection, labels)
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-select {
   --r-select-border-color: var(--r-common-text-color);
   --r-select-border-width: 1px;
@@ -181,14 +183,14 @@ provide(labelsInjection, labels)
     --r-select-border-width: 2px;
   }
 }
+:where(.r-select__input) {
+  @include reset.input;
+}
 .r-select__input {
-  appearance: none;
   width: 100%;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline) calc(var(--r-common-box-padding-block) * 2 + var(--r-common-line-height));
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
   &:focus {
     outline: none;
   }
diff --git a/src/switch/index.vue b/src/switch/index.vue
index 79796fa..607c7d1 100644
--- a/src/switch/index.vue
+++ b/src/switch/index.vue
@@ -96,6 +96,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-switch {
   --r-switch-border-color: var(--r-common-text-color);
   --r-switch-border-width: 1px;
@@ -113,10 +115,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     text-decoration-line: line-through;
   }
 }
+:where(.r-switch__input) {
+  @include reset.input-checkbox;
+}
 .r-switch__input {
-  appearance: none;
   position: absolute;
-  margin: 0;
 }
 .r-switch__control {
   flex: none;
diff --git a/src/tabs/tab-anchor.vue b/src/tabs/tab-anchor.vue
index b628544..63bdb88 100644
--- a/src/tabs/tab-anchor.vue
+++ b/src/tabs/tab-anchor.vue
@@ -67,6 +67,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-tab-anchor {
   --r-tab-anchor-active-color: var(--r-common-primary-color);
   --r-tab-anchor-border-color: var(--r-common-text-color);
@@ -83,8 +85,10 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     --r-tab-anchor-border-color: var(--r-tab-anchor-active-color);
   }
 }
+:where(.r-tab-anchor__button) {
+  @include reset.button;
+}
 .r-tab-anchor__button {
-  appearance: none;
   display: inline-block;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline);
diff --git a/src/toast/index.vue b/src/toast/index.vue
index 5ced785..e03d4f3 100644
--- a/src/toast/index.vue
+++ b/src/toast/index.vue
@@ -94,6 +94,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
+:where(.r-toast) {
+  @include reset.popover;
+}
 .r-toast {
   --r-toast-color: var(--r-common-text-color);
   position: fixed;
@@ -102,7 +107,6 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   inset-inline-start: 50%;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline);
-  border: none;
   color: var(--r-toast-color);
   transform: translate(-50%, -50%);
   &.primary {