diff --git a/components/ui/8bit/button-group.tsx b/components/ui/8bit/button-group.tsx
new file mode 100644
index 00000000..fb233050
--- /dev/null
+++ b/components/ui/8bit/button-group.tsx
@@ -0,0 +1,114 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+import {
+  ButtonGroup as ShadcnButtonGroup,
+  ButtonGroupText as ShadcnButtonGroupText,
+  buttonGroupVariants,
+} from "@/components/ui/button-group";
+import { Separator } from "@/components/ui/8bit/separator";
+
+import "@/components/ui/8bit/styles/retro.css";
+
+export { buttonGroupVariants };
+
+// ─── ButtonGroup ──────────────────────────────────────────────────────────────
+
+export type BitButtonGroupProps = React.ComponentProps<
+  typeof ShadcnButtonGroup
+>;
+
+/**
+ * 8-bit ButtonGroup wraps the shadcn ButtonGroup and adds a shared retro
+ * pixelated border around the whole group.
+ *
+ * API matches shadcn: `orientation`, `data-slot="button-group"`.
+ * No React context — child button sizing and layout is handled via CSS
+ * child selectors in `buttonGroupVariants`, identical to shadcn.
+ */
+function ButtonGroup({
+  className,
+  orientation = "horizontal",
+  children,
+  ...props
+}: BitButtonGroupProps) {
+  return (
+    <div
+      className={cn(
+        "relative inline-flex",
+        orientation === "vertical" ? "flex-col" : "flex-row"
+      )}
+    >
+      {/* Shared outer pixelated border */}
+      {/* Top */}
+      <div className="absolute -top-1.5 left-1.5 right-1.5 h-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      {/* Bottom */}
+      <div className="absolute -bottom-1.5 left-1.5 right-1.5 h-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      {/* Left */}
+      <div className="absolute -left-1.5 top-1.5 bottom-1.5 w-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      {/* Right */}
+      <div className="absolute -right-1.5 top-1.5 bottom-1.5 w-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      {/* Corners */}
+      <div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+      <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
+
+      <ShadcnButtonGroup
+        className={cn(className)}
+        orientation={orientation}
+        {...props}
+      >
+        {children}
+      </ShadcnButtonGroup>
+    </div>
+  );
+}
+
+// ─── ButtonGroupSeparator ────────────────────────────────────────────────────
+
+export type BitButtonGroupSeparatorProps = React.ComponentProps<
+  typeof Separator
+>;
+
+/**
+ * 8-bit ButtonGroupSeparator renders a pixel-art dashed divider between items.
+ * Wraps the 8-bit Separator component (which uses a pixel-dash background pattern).
+ * Defaults to `orientation="vertical"` for use inside a horizontal ButtonGroup.
+ */
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: BitButtonGroupSeparatorProps) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn("relative m-0! self-stretch", className)}
+      {...props}
+    />
+  );
+}
+
+// ─── ButtonGroupText ─────────────────────────────────────────────────────────
+
+export type BitButtonGroupTextProps = React.ComponentProps<
+  typeof ShadcnButtonGroupText
+>;
+
+/**
+ * 8-bit ButtonGroupText renders a retro-styled text label inside a ButtonGroup.
+ * Useful for split-button patterns (e.g. a label prefix before action buttons).
+ */
+function ButtonGroupText({ className, ...props }: BitButtonGroupTextProps) {
+  return (
+    <ShadcnButtonGroupText
+      className={cn("rounded-none border-none retro", className)}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
diff --git a/components/ui/8bit/button.tsx b/components/ui/8bit/button.tsx
index 8b12184c..254bf951 100644
--- a/components/ui/8bit/button.tsx
+++ b/components/ui/8bit/button.tsx
@@ -61,8 +61,8 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
           {children}
 
           {variant !== "ghost" && variant !== "link" && size !== "icon" && (
-            <>
-              {/* Pixelated border */}
+            <div className="in-data-[slot=button-group]:hidden contents">
+              {/* Pixelated border — hidden when inside ButtonGroup */}
               <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
@@ -84,18 +84,18 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
                   <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
                 </>
               )}
-            </>
+            </div>
           )}
 
           {size === "icon" && (
-            <>
+            <div className="in-data-[slot=button-group]:hidden contents">
               <div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
-            </>
+            </div>
           )}
         </span>
       ) : (
@@ -103,8 +103,8 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
           {children}
 
           {variant !== "ghost" && variant !== "link" && size !== "icon" && (
-            <>
-              {/* Pixelated border */}
+            <div className="in-data-[slot=button-group]:hidden contents">
+              {/* Pixelated border — hidden when inside ButtonGroup */}
               <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
@@ -126,18 +126,18 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
                   <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
                 </>
               )}
-            </>
+            </div>
           )}
 
           {size === "icon" && (
-            <>
+            <div className="in-data-[slot=button-group]:hidden contents">
               <div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
               <div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
-            </>
+            </div>
           )}
         </>
       )}
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
new file mode 100644
index 00000000..cd550d7a
--- /dev/null
+++ b/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/config/nav-items.ts b/config/nav-items.ts
index e4ac665c..5be18f31 100644
--- a/config/nav-items.ts
+++ b/config/nav-items.ts
@@ -27,6 +27,10 @@ const components = [
     title: "Button",
     url: "/docs/components/button",
   },
+  {
+    title: "Button Group",
+    url: "/docs/components/button-group",
+  },
   {
     title: "Calendar",
     url: "/docs/components/calendar",
diff --git a/content/docs/components/button-group.mdx b/content/docs/components/button-group.mdx
new file mode 100644
index 00000000..ab766086
--- /dev/null
+++ b/content/docs/components/button-group.mdx
@@ -0,0 +1,178 @@
+---
+title: Button Group
+description: A container that groups related 8-bit buttons together with a shared retro pixelated border.
+---
+
+import { Button } from "@/components/ui/8bit/button";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/8bit/button-group";
+import CopyCommandButton from "@/components/copy-command-button";
+import InstallationCommands from "@/components/installation-commands";
+import ComponentPreview from "@/components/component-preview";
+
+<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
+  <CopyCommandButton
+    copyCommand="pnpm dlx shadcn@latest add @8bitcn/button-group"
+    command="pnpm dlx shadcn@latest add @8bitcn/button-group"
+  />
+</div>
+
+<ComponentPreview title="8-bit Button Group component" name="button-group">
+  <ButtonGroup aria-label="Action group">
+    <Button>Left</Button>
+    <ButtonGroupSeparator />
+    <Button>Center</Button>
+    <ButtonGroupSeparator />
+    <Button>Right</Button>
+  </ButtonGroup>
+</ComponentPreview>
+
+## Examples
+
+---
+
+### Horizontal (default)
+
+<ComponentPreview title="Button Group horizontal" name="button-group">
+  <ButtonGroup aria-label="Game actions">
+    <Button>Save</Button>
+    <ButtonGroupSeparator />
+    <Button>Load</Button>
+    <ButtonGroupSeparator />
+    <Button>Quit</Button>
+  </ButtonGroup>
+</ComponentPreview>
+
+```tsx
+<ButtonGroup aria-label="Game actions">
+  <Button>Save</Button>
+  <ButtonGroupSeparator />
+  <Button>Load</Button>
+  <ButtonGroupSeparator />
+  <Button>Quit</Button>
+</ButtonGroup>
+```
+
+### Vertical
+
+<ComponentPreview title="Button Group vertical" name="button-group">
+  <ButtonGroup orientation="vertical" aria-label="Battle actions">
+    <Button>Attack</Button>
+    <ButtonGroupSeparator orientation="horizontal" />
+    <Button>Defend</Button>
+    <ButtonGroupSeparator orientation="horizontal" />
+    <Button>Run</Button>
+  </ButtonGroup>
+</ComponentPreview>
+
+```tsx
+<ButtonGroup orientation="vertical" aria-label="Battle actions">
+  <Button>Attack</Button>
+  <ButtonGroupSeparator orientation="horizontal" />
+  <Button>Defend</Button>
+  <ButtonGroupSeparator orientation="horizontal" />
+  <Button>Run</Button>
+</ButtonGroup>
+```
+
+### With Outline Variant
+
+<ComponentPreview title="Button Group outline variant" name="button-group">
+  <ButtonGroup aria-label="Player slots">
+    <Button variant="outline">P1</Button>
+    <ButtonGroupSeparator />
+    <Button variant="outline">P2</Button>
+    <ButtonGroupSeparator />
+    <Button variant="outline">P3</Button>
+  </ButtonGroup>
+</ComponentPreview>
+
+```tsx
+<ButtonGroup aria-label="Player slots">
+  <Button variant="outline">P1</Button>
+  <ButtonGroupSeparator />
+  <Button variant="outline">P2</Button>
+  <ButtonGroupSeparator />
+  <Button variant="outline">P3</Button>
+</ButtonGroup>
+```
+
+### With Text Label
+
+<ComponentPreview title="Button Group with text label" name="button-group">
+  <ButtonGroup aria-label="Difficulty select">
+    <ButtonGroupText>Mode</ButtonGroupText>
+    <ButtonGroupSeparator />
+    <Button>Easy</Button>
+    <ButtonGroupSeparator />
+    <Button>Hard</Button>
+  </ButtonGroup>
+</ComponentPreview>
+
+```tsx
+<ButtonGroup aria-label="Difficulty select">
+  <ButtonGroupText>Mode</ButtonGroupText>
+  <ButtonGroupSeparator />
+  <Button>Easy</Button>
+  <ButtonGroupSeparator />
+  <Button>Hard</Button>
+</ButtonGroup>
+```
+
+## Installation
+
+---
+
+<InstallationCommands packageName="button-group" />
+
+## Usage
+
+---
+
+```tsx
+import { Button } from "@/components/ui/8bit/button";
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+} from "@/components/ui/8bit/button-group";
+```
+
+```tsx
+<ButtonGroup aria-label="Actions">
+  <Button>Left</Button>
+  <ButtonGroupSeparator />
+  <Button>Center</Button>
+  <ButtonGroupSeparator />
+  <Button>Right</Button>
+</ButtonGroup>
+```
+
+## Props
+
+---
+
+### ButtonGroup
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `aria-label` | `string` | — |
+| `className` | `string` | — |
+
+### ButtonGroupSeparator
+
+Renders a pixel-art dashed divider. Wraps the 8-bit `Separator` component — defaults to `orientation="vertical"` for horizontal groups.
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |
+| `className` | `string` | — |
+
+### ButtonGroupText
+
+Renders a retro-styled text label inside the group — useful for split-button patterns like a mode prefix.
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `asChild` | `boolean` | `false` |
+| `className` | `string` | — |
diff --git a/registry.json b/registry.json
index d5eafad9..e1ea2d84 100644
--- a/registry.json
+++ b/registry.json
@@ -47,6 +47,35 @@
         }
       ]
     },
+    {
+      "name": "button-group",
+      "type": "registry:component",
+      "title": "8-bit Button Group",
+      "description": "Groups multiple 8-bit buttons together inside a shared retro pixelated border.",
+      "registryDependencies": ["button", "button-group", "separator"],
+      "files": [
+        {
+          "path": "components/ui/8bit/button-group.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/button-group.tsx"
+        },
+        {
+          "path": "components/ui/8bit/button.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/button.tsx"
+        },
+        {
+          "path": "components/ui/8bit/separator.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/separator.tsx"
+        },
+        {
+          "path": "components/ui/8bit/styles/retro.css",
+          "type": "registry:component",
+          "target": "components/ui/8bit/styles/retro.css"
+        }
+      ]
+    },
     {
       "name": "input",
       "type": "registry:component",