diff --git a/app/docs/components/toggle-group/page.tsx b/app/docs/components/toggle-group/page.tsx
new file mode 100644
index 00000000..2d152e41
--- /dev/null
+++ b/app/docs/components/toggle-group/page.tsx
@@ -0,0 +1,229 @@
+import { Metadata } from "next"
+import { Separator } from "@radix-ui/react-select"
+import { Bold, Italic, Underline } from "lucide-react"
+
+import { toggleGroupMetaData } from "@/lib/metadata"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/8bit/toggle-group"
+
+import CodeSnippet from "../code-snippet"
+import CopyCommandButton from "../copy-command-button"
+import InstallationCommands from "../installation-commands"
+import { OpenInV0Button } from "../open-in-v0-button"
+
+export const metadata: Metadata = {
+  title: "8bit Toggle Group",
+  description: "Displays Toggle Group Component.",
+  openGraph: { images: toggleGroupMetaData },
+}
+export default function ToggleGroupPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+        <h1 className="text-3xl font-bold">Toggle Group</h1>
+        <CopyCommandButton
+          copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-toggle-group.json`}
+          command={"pnpm dlx shadcn@canary add 8bit-toggle-group"}
+        />
+      </div>
+      <p className="text-muted-foreground">
+        A set of two-state buttons that can be toggled on or off.
+      </p>
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            A simple 8-bit Toggle Group component
+          </h2>
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ToggleGroup type="multiple">
+            <ToggleGroupItem
+              variant="outline"
+              value="bold"
+              aria-label="Toggle bold"
+            >
+              <Bold className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Toggle italic">
+              <Italic className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="strikethrough"
+              aria-label="Toggle strikethrough"
+            >
+              <Underline className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+      <h3 className="text-lg font-bold">Installation</h3> <Separator />
+      <InstallationCommands
+        packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-toggle-group.json`}
+      />
+      <h3 className="text-lg font-bold">Examples</h3> <Separator />
+      <h3 className="text-lg font-bold">Default</h3>
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            Default example
+          </h2>
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ToggleGroup type="multiple">
+            <ToggleGroupItem value="bold" aria-label="Toggle bold">
+              <Bold className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Toggle italic">
+              <Italic className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="strikethrough"
+              aria-label="Toggle strikethrough"
+            >
+              <Underline className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+      <CodeSnippet>{`<ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+      <h3 className="text-lg font-bold">Outline</h3>
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            Outline example
+          </h2>
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ToggleGroup type="multiple">
+            <ToggleGroupItem
+              variant="outline"
+              value="bold"
+              aria-label="Toggle bold"
+            >
+              <Bold className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              variant="outline"
+              value="italic"
+              aria-label="Toggle italic"
+            >
+              <Italic className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              variant="outline"
+              value="strikethrough"
+              aria-label="Toggle strikethrough"
+            >
+              <Underline className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <CodeSnippet>{`<ToggleGroup type="multiple" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+        <h3 className="text-lg font-bold">Single</h3>
+        <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm text-muted-foreground sm:pl-3">
+              Single example
+            </h2>
+            <div className="flex items-center gap-2">
+              <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+            </div>
+          </div>
+          <div className="flex items-center justify-center min-h-[400px] relative">
+            <ToggleGroup type="single">
+              <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="strikethrough"
+                aria-label="Toggle strikethrough"
+              >
+                <Underline className="size-4" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+        <CodeSnippet>{`<ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+        <h3 className="text-lg font-bold">Disabled</h3>
+        <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm text-muted-foreground sm:pl-3">
+              Disabled example
+            </h2>
+            <div className="flex items-center gap-2">
+              <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+            </div>
+          </div>
+          <div className="flex items-center justify-center min-h-[400px] relative">
+            <ToggleGroup type="multiple" disabled>
+              <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="h-1 w-1" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="h-1 w-1" />
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="strikethrough"
+                aria-label="Toggle strikethrough"
+              >
+                <Underline className="h-1 w-1" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+        <CodeSnippet>{`<ToggleGroup type="multiple" disabled>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/8bit/toggle-group.tsx b/components/ui/8bit/toggle-group.tsx
new file mode 100644
index 00000000..0dc03a3e
--- /dev/null
+++ b/components/ui/8bit/toggle-group.tsx
@@ -0,0 +1,88 @@
+import { Press_Start_2P } from "next/font/google"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+import {
+  ToggleGroup as ShadcnToggleGroup,
+  ToggleGroupItem as ShadcnToggleGroupItem,
+} from "../toggle-group"
+
+const pressStart = Press_Start_2P({ weight: ["400"], subsets: ["latin"] })
+
+export const toggleGroupVariants = cva("", {
+  variants: {
+    font: { normal: "", retro: pressStart.className },
+    variant: {
+      default: "bg-transparent",
+      outline:
+        "bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-4 px-1.5 min-w-4",
+      lg: "h-10 px-2.5 min-w-10",
+    },
+  },
+  defaultVariants: { variant: "default", font: "retro", size: "default" },
+})
+
+export type BitToggleGroupProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+> &
+  VariantProps<typeof toggleGroupVariants>
+
+export type BitToggleGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> &
+  VariantProps<typeof toggleGroupVariants>
+
+function ToggleGroup({ ...props }: BitToggleGroupProps) {
+  const { className, font, children } = props
+
+  return (
+    <ShadcnToggleGroup
+      className={cn(
+        "gap-3",
+        className,
+        font !== "normal" && pressStart.className
+      )}
+      {...props}
+    >
+      {" "}
+      {children}{" "}
+    </ShadcnToggleGroup>
+  )
+}
+function ToggleGroupItem({ ...props }: BitToggleGroupItemProps) {
+  const { className, font, children, variant } = props
+  return (
+    <ShadcnToggleGroupItem
+      className={cn(
+        "relative transition-transform active:translate-x-1 active:translate-y-1",
+        className,
+        font !== "normal" && pressStart.className
+      )}
+      {...props}
+    >
+      {" "}
+      {children}{" "}
+      {variant === "outline" && (
+        <>
+          {" "}
+          <div
+            className="absolute inset-0 -my-1.5 border-y-6 border-foreground dark:border-ring pointer-events-none"
+            aria-hidden="true"
+          />{" "}
+          <div
+            className="absolute inset-0 -mx-1.5 border-x-6 border-foreground dark:border-ring pointer-events-none"
+            aria-hidden="true"
+          />{" "}
+        </>
+      )}{" "}
+    </ShadcnToggleGroupItem>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..1c876bbe
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/config/nav-items.ts b/config/nav-items.ts
index 9131d7c8..a495ea7d 100644
--- a/config/nav-items.ts
+++ b/config/nav-items.ts
@@ -166,6 +166,11 @@ export const navItems = {
           title: "Toggle",
           url: "/docs/components/toggle",
         },
+        {
+          title: "Toggle Group",
+          url: "/docs/components/toggle-group",
+          new: true,
+        },
         {
           title: "Tooltip",
           url: "/docs/components/tooltip",
diff --git a/lib/metadata.ts b/lib/metadata.ts
index bb9e9526..2da28af9 100644
--- a/lib/metadata.ts
+++ b/lib/metadata.ts
@@ -45,3 +45,4 @@ export const resizableMetaData = "/assets/8bitcn-resizable-light.png"
 export const paginationMetaData = "/assets/8bitcn-pagination-light.png"
 export const scrollAreaMetaData = "/assets/8bitcn-scrollarea-light.png"
 export const chartMetaData = "/assets/8bitcn-chart-light.png"
+export const toggleGroupMetaData = "/assets/8bitcn-toggle-group-light.png"
diff --git a/package.json b/package.json
index c6313241..4be9a7c7 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-switch": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.11",
     "@radix-ui/react-toggle": "^1.1.8",
+    "@radix-ui/react-toggle-group": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.6",
     "@vercel/analytics": "^1.5.0",
     "class-variance-authority": "^0.7.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73e4905c..576f7d43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       '@radix-ui/react-toggle':
         specifier: ^1.1.8
         version: 1.1.8(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.9
+        version: 1.1.9(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-tooltip':
         specifier: ^1.2.6
         version: 1.2.6(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1046,6 +1049,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.9':
+    resolution: {integrity: sha512-HJ6gXdYVN38q/5KDdCcd+JTuXUyFZBMJbwXaU/82/Gi+V2ps6KpiZ2sQecAeZCV80POGRfkUBdUIj6hIdF6/MQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-toggle@1.1.8':
     resolution: {integrity: sha512-hrpa59m3zDnsa35LrTOH5s/a3iGv/VD+KKQjjiCTo/W4r0XwPpiWQvAv6Xl1nupSoaZeNNxW6sJH9ZydsjKdYQ==}
     peerDependencies:
@@ -4638,6 +4654,21 @@ snapshots:
       '@types/react': 19.1.3
       '@types/react-dom': 19.1.3(@types/react@19.1.3)
 
+  '@radix-ui/react-toggle-group@1.1.9(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.3)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.3)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle': 1.1.8(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.3)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.3
+      '@types/react-dom': 19.1.3(@types/react@19.1.3)
+
   '@radix-ui/react-toggle@1.1.8(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
diff --git a/public/assets/8bitcn-toggle-group-light.png b/public/assets/8bitcn-toggle-group-light.png
new file mode 100644
index 00000000..170183fe
Binary files /dev/null and b/public/assets/8bitcn-toggle-group-light.png differ
diff --git a/public/r/8bit-toggle-group.json b/public/r/8bit-toggle-group.json
new file mode 100644
index 00000000..5971c926
--- /dev/null
+++ b/public/r/8bit-toggle-group.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "8bit-toggle-group",
+  "type": "registry:component",
+  "title": "8-bit Toggle Group",
+  "description": "A simple 8-bit toggle group component",
+  "registryDependencies": [
+    "toggle-group"
+  ],
+  "files": [
+    {
+      "path": "components/ui/8bit/toggle-group.tsx",
+      "content": "import { Press_Start_2P } from \"next/font/google\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  ToggleGroup as ShadcnToggleGroup,\n  ToggleGroupItem as ShadcnToggleGroupItem,\n} from \"../toggle-group\"\n\nconst pressStart = Press_Start_2P({ weight: [\"400\"], subsets: [\"latin\"] })\n\nexport const toggleGroupVariants = cva(\"\", {\n  variants: {\n    font: { normal: \"\", retro: pressStart.className },\n    variant: {\n      default: \"bg-transparent\",\n      outline:\n        \"bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n    },\n    size: {\n      default: \"h-9 px-2 min-w-9\",\n      sm: \"h-4 px-1.5 min-w-4\",\n      lg: \"h-10 px-2.5 min-w-10\",\n    },\n  },\n  defaultVariants: { variant: \"default\", font: \"retro\", size: \"default\" },\n})\n\nexport type BitToggleGroupProps = React.ComponentPropsWithoutRef<\n  typeof ToggleGroupPrimitive.Root\n> &\n  VariantProps<typeof toggleGroupVariants>\n\nexport type BitToggleGroupItemProps = React.ComponentPropsWithoutRef<\n  typeof ToggleGroupPrimitive.Item\n> &\n  VariantProps<typeof toggleGroupVariants>\n\nfunction ToggleGroup({ ...props }: BitToggleGroupProps) {\n  const { className, font, children } = props\n\n  return (\n    <ShadcnToggleGroup\n      className={cn(\n        \"gap-3\",\n        className,\n        font !== \"normal\" && pressStart.className\n      )}\n      {...props}\n    >\n      {\" \"}\n      {children}{\" \"}\n    </ShadcnToggleGroup>\n  )\n}\nfunction ToggleGroupItem({ ...props }: BitToggleGroupItemProps) {\n  const { className, font, children, variant } = props\n  return (\n    <ShadcnToggleGroupItem\n      className={cn(\n        \"relative transition-transform active:translate-x-1 active:translate-y-1\",\n        className,\n        font !== \"normal\" && pressStart.className\n      )}\n      {...props}\n    >\n      {\" \"}\n      {children}{\" \"}\n      {variant === \"outline\" && (\n        <>\n          {\" \"}\n          <div\n            className=\"absolute inset-0 -my-1.5 border-y-6 border-foreground dark:border-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />{\" \"}\n          <div\n            className=\"absolute inset-0 -mx-1.5 border-x-6 border-foreground dark:border-ring pointer-events-none\"\n            aria-hidden=\"true\"\n          />{\" \"}\n        </>\n      )}{\" \"}\n    </ShadcnToggleGroupItem>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "type": "registry:component",
+      "target": "components/ui/8bit/toggle-group.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index 20862441..18dbe3fa 100644
--- a/registry.json
+++ b/registry.json
@@ -657,6 +657,20 @@
           "target": "components/ui/8bit/chart.tsx"
         }
       ]
+    },
+    {
+      "name": "8bit-toggle-group",
+      "type": "registry:component",
+      "title": "8-bit Toggle Group",
+      "description": "A simple 8-bit toggle group component",
+      "registryDependencies": ["toggle-group"],
+      "files": [
+        {
+          "path": "components/ui/8bit/toggle-group.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/toggle-group.tsx"
+        }
+      ]
     }
   ]
 }