feat(registry) add kbd component

[TheOrcDev]

Summary by CodeRabbit

• New Features

  • Added 8-bit Kbd and KbdGroup UI components with retro styling.
  • Supports grouped keys, keys inside buttons, and tooltip integrations.
  • Component added to the library/registry with installable assets.
  • Navigation updated to include the new component.
  • Added preview metadata for the component.

• Documentation

  • Introduced a comprehensive Kbd component docs page with installation steps, usage guidance, grouped examples, button/tooltip demos, and copyable code snippets.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
8bitcn-ui	Ready	Preview	Comment	Oct 7, 2025 8:33am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a new 8-bit Kbd UI component (Kbd, KbdGroup), a documentation page for it, navigation entry, metadata asset reference, and registry entries/files to enable installation via the component registry.

Changes

Cohort / File(s)	Summary
Docs page app/docs/components/kbd/page.tsx	New docs route page with metadata export and default KbdPage showcasing installation, usage, groups, buttons, tooltips, and code snippets for Kbd/KbdGroup.
UI component components/ui/8bit/kbd.tsx	Adds Kbd (styled <kbd>) and KbdGroup components with slot attributes and retro-themed classes; exports both.
Navigation config/nav-items.ts	Appends Components list entry for Kbd pointing to /docs/components/kbd with new: true.
Metadata lib/metadata.ts	Exports kbdMetaData pointing to /assets/8bitcn-kbd-light.png.
Registry: public items public/r/kbd.json, public/r/registry.json	Adds registry item “kbd” with files components/ui/8bit/kbd.tsx and components/ui/8bit/styles/retro.css; defines exported components Kbd and KbdGroup.
Registry: root manifest registry.json	Mirrors “kbd” registry component entry referencing components/ui/8bit/kbd.tsx and components/ui/8bit/styles/retro.css.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant DocsRouter as Docs Router
    participant KbdPage as KbdPage (docs)
    participant UIKbd as Kbd/KbdGroup
    participant Assets as Metadata & Assets

    User->>DocsRouter: Navigate /docs/components/kbd
    DocsRouter->>KbdPage: Render page
    KbdPage->>Assets: Read kbdMetaData (image path)
    KbdPage->>UIKbd: Render Kbd/KbdGroup examples
    UIKbd-->>KbdPage: Styled <kbd> elements
    KbdPage-->>User: Page with live examples

Loading

sequenceDiagram
    participant Dev as Developer
    participant Registry as registry.json
    participant PublicReg as public/r/registry.json
    participant Files as components/ui/8bit/*
    Dev->>Registry: Discover "kbd" entry
    Dev->>PublicReg: Resolve "kbd" files
    PublicReg-->>Dev: kbd.tsx, styles/retro.css
    Dev->>Files: Install/Import components

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Feat/getting started page #340 — Also updates config/nav-items.ts to add navigation entries, overlapping with this PR’s new Kbd nav item.
• feat: add registry.json #332 — Modifies registry manifests; directly related to this PR’s addition of the “kbd” component entries in registry.json and public/r/registry.json.

Poem

In clacky keys and pixel light,
I tap-tap joy through retro night.
A Kbd appears, grouped bold and bright—
Buttons wink, tooltips take flight.
Hop, hop, shipped just right.
(_/) ✨
(•ᴗ•)っ︻デ— — — ⌨️

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/kbd

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cabaa17 and 540edfc.

📒 Files selected for processing (7)

• app/docs/components/kbd/page.tsx (1 hunks)
• components/ui/8bit/kbd.tsx (1 hunks)
• config/nav-items.ts (1 hunks)
• lib/metadata.ts (1 hunks)
• public/r/kbd.json (1 hunks)
• public/r/registry.json (1 hunks)
• registry.json (1 hunks)

---

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.}