diff --git a/.changeset/hungry-fans-boil.md b/.changeset/hungry-fans-boil.md
new file mode 100644
index 00000000..c89731e5
--- /dev/null
+++ b/.changeset/hungry-fans-boil.md
@@ -0,0 +1,6 @@
+---
+"@example/ui-playground": patch
+"@genseki/react": patch
+---
+
+fix: `input`, `input-group` background-color and`button` ghost variant
diff --git a/examples/ui-playground/src/app/playground/shadcn/input-section.tsx b/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
index bdbbc016..564768f5 100644
--- a/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
@@ -375,7 +375,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           A simple input field with placeholder text.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <BasicInput />
         </div>
       </PlaygroundCard>
@@ -384,7 +384,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Different HTML input types with appropriate validation and keyboard behaviors.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputTypes />
         </div>
       </PlaygroundCard>
@@ -393,7 +393,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Inputs can be in different states: default, disabled, or invalid.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputStates />
         </div>
       </PlaygroundCard>
@@ -402,7 +402,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           A controlled input where the value is managed by React state.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ControlledInput />
         </div>
       </PlaygroundCard>
@@ -411,7 +411,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Inputs paired with labels and helper text for better accessibility.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputWithLabels />
         </div>
       </PlaygroundCard>
@@ -420,7 +420,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           File input for uploading single or multiple files.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <FileInput />
         </div>
       </PlaygroundCard>
@@ -429,7 +429,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Input groups with icons or text at the start (left side) of the input field.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputGroupInlineStart />
         </div>
       </PlaygroundCard>
@@ -438,7 +438,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Input groups with icons or text at the end (right side) of the input field.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputGroupInlineEnd />
         </div>
       </PlaygroundCard>
@@ -448,7 +448,7 @@ export function InputSection() {
           Input groups with interactive buttons for actions like clearing, toggling visibility, or
           submitting.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputGroupWithButtons />
         </div>
       </PlaygroundCard>
@@ -457,7 +457,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Input groups with addons on both sides for complex input scenarios.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputGroupBothSides />
         </div>
       </PlaygroundCard>
@@ -466,7 +466,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Input groups with addons positioned above (block-start) or below (block-end) the input.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputGroupBlockAlignment />
         </div>
       </PlaygroundCard>
@@ -475,7 +475,7 @@ export function InputSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Input groups in different states: default, disabled, and invalid.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <InputGroupStates />
         </div>
       </PlaygroundCard>
diff --git a/packages/react/v2/components/primitives/button.tsx b/packages/react/v2/components/primitives/button.tsx
index 412acfa6..9b4904dc 100644
--- a/packages/react/v2/components/primitives/button.tsx
+++ b/packages/react/v2/components/primitives/button.tsx
@@ -28,7 +28,7 @@ const buttonVariants = cva(
         outline:
           ' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         ghost:
-          ' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
+          'bg-transparent text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
       },
diff --git a/packages/react/v2/components/primitives/input-group.tsx b/packages/react/v2/components/primitives/input-group.tsx
index 37a2abf3..76976698 100644
--- a/packages/react/v2/components/primitives/input-group.tsx
+++ b/packages/react/v2/components/primitives/input-group.tsx
@@ -21,7 +21,7 @@ function InputGroup({
       data-pending={isPending}
       role="group"
       className={cn(
-        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+        'bg-background group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
         'h-18 min-w-0 has-[>textarea]:h-auto',
 
         // Variants based on alignment.
diff --git a/packages/react/v2/components/primitives/input.tsx b/packages/react/v2/components/primitives/input.tsx
index 433e456b..e3c28b21 100644
--- a/packages/react/v2/components/primitives/input.tsx
+++ b/packages/react/v2/components/primitives/input.tsx
@@ -11,7 +11,7 @@ function Input({
     <input
       type={type}
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium',
+        'bg-background file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium',
         'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-text-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
         'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[2px]',
         'aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive',