Feat/button group

[Smnthjm08]

Adds a new ButtonGroup component to the 8bitcn registry that groups related 8-bit buttons together under a single shared retro pixelated border.

#415

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced 8-bit Button Group component featuring retro pixelated styling for grouping related buttons
  • Supports horizontal and vertical orientations with separator and text label variants

• Documentation

  • Added comprehensive guide with usage examples, installation instructions, and component props reference

[vercel]

@Smnthjm08 is attempting to deploy a commit to the 8bitcn Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 630c7405-e189-4aea-8733-052bbbebd674

📥 Commits

Reviewing files that changed from the base of the PR and between b133c5f and 90d1c84.

📒 Files selected for processing (6)

• components/ui/8bit/button-group.tsx
• components/ui/8bit/button.tsx
• components/ui/button-group.tsx
• config/nav-items.ts
• content/docs/components/button-group.mdx
• registry.json

---

📝 Walkthrough

Walkthrough

Adds a ButtonGroup component to the 8-bit UI library. A base Shadcn implementation (components/ui/button-group.tsx) defines buttonGroupVariants, ButtonGroup, ButtonGroupText, and ButtonGroupSeparator. An 8-bit wrapper file applies pixelated retro styling and border framing. The existing 8-bit Button is updated to suppress its individual pixelated border when rendered inside a ButtonGroup. Registry, nav, and documentation are added.

Changes

8-bit ButtonGroup Component

Layer / File(s)	Summary
Base Shadcn ButtonGroup primitives components/ui/button-group.tsx	Introduces buttonGroupVariants via class-variance-authority, ButtonGroup (flex div with role="group" and data-slot), ButtonGroupText (polymorphic via Radix Slot.Root), and ButtonGroupSeparator (wraps Separator with default orientation="vertical").
8-bit wrappers and Button border suppression components/ui/8bit/button-group.tsx, components/ui/8bit/button.tsx	Wraps the base primitives with retro styling and an absolutely-positioned pixelated border frame. Updates the 8-bit Button to wrap its pixelated border divs in in-data-[slot=button-group]:hidden contents so individual borders are suppressed when the button lives inside a ButtonGroup.
Registry, nav, and docs registry.json, config/nav-items.ts, content/docs/components/button-group.mdx	Adds a button-group registry entry with file targets and registryDependencies; inserts a "Button Group" nav item; adds a full MDX docs page with previews, usage examples (horizontal, vertical, outline, with text label), installation commands, and prop tables.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• TheOrcDev/8bitcn-ui#241: Modifies components/ui/8bit/button.tsx's asChild wrapper and pixelated border decoration structure, the same JSX region this PR updates to hide borders inside ButtonGroup.
• TheOrcDev/8bitcn-ui#355: Modifies the pixelated border overlay markup in components/ui/8bit/button.tsx at the same code location this PR wraps with the hide-in-group behavior.
• TheOrcDev/8bitcn-ui#332: Introduced the registry.json manifest structure that this PR extends with a new button-group entry.

Suggested reviewers

• TheOrcDev

🐰 A pixel border for the group,
No solo frames to overcrowd!
Left, center, right in retro style,
Grouped buttons dancing all the while.
8-bit joy across the tile! 🎮

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 42.86% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Feat/button group' is related to the main change (introducing a ButtonGroup component), but uses a generic conventional commit prefix format that lacks specificity about what the feature actually delivers.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}