Command component #76
Conversation
|
@ameybh is attempting to deploy a commit to the Retro UI Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded@ariflogs has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 42 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
WalkthroughAdds a new, fully-typed Command palette component (built on cmdk) with dialog, input, list, group, item, separator, shortcut, and check subcomponents; updates retroui exports, registry, navigation, docs, two preview examples, and adds the Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Preview as CommandStyleDialog
participant Dialog as Command.Dialog
participant Input as Command.Input
participant List as Command.List (cmdk)
Note over Preview,Dialog: keyboard-triggered open/close flow
User->>Preview: Press Cmd/Ctrl+J
Preview->>Preview: set open = true
Preview->>Dialog: render Dialog (open, onOpenChange)
User->>Input: Type query
Input->>List: update/filter items
List-->>User: render groups, items, shortcuts
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (14)
config/navigation.ts (1)
54-54: Consider highlighting the new component in the navAdd a “New” tag to surface discoverability for Command.
- { title: "Command", href: `${componentsRoute}/command` }, + { title: "Command", href: `${componentsRoute}/command`, tag: "New" },components/retroui/index.ts (2)
1-11: Remove duplicate Input export in the barrelThere are two
export * from "./Input";lines (Line 2 and Line 9). Keep one to avoid confusion and potential type merging surprises in editors.export * from "./Button"; export * from "./Input"; export * from "./Textarea"; export * from "./Checkbox"; export * from "./Radio"; export * from "./Select"; export * from "./Switch"; export * from "./Label"; -export * from "./Input"; export * from "./Text";
27-27: Optional: restrict Command re-export to the intended surfaceIf
components/retroui/Command.tsxalso exports internal types/helpers, prefer named re-export to limit the public surface.-export * from "./Command"; +export { Command } from "./Command";content/docs/components/command.mdx (2)
4-4: Fix future-dated lastUpdatedPage shows 21 Aug, 2025, while this PR is dated Aug 20, 2025. Avoid future “updated” badges.
-lastUpdated: 21 Aug, 2025 +lastUpdated: 20 Aug, 2025
24-24: Improve accessibility wording (avoid emoji-only instruction)Replace the pointing emoji with accessible wording.
-#### 2. Copy the code 👇 into your project: +#### 2. Copy the code below into your project:preview/components/command-style-dialog.tsx (2)
31-38: Show platform-appropriate shortcut in the hint (⌘J vs Ctrl+J)Small UX win: reflect the actual modifier based on OS.
return ( <> <p className="text-muted-foreground text-sm"> - Press{" "} - <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"> - <span className="text-xs">⌘</span>J - </kbd> + Press{" "} + <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"> + {typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform) ? ( + <><span className="text-xs">⌘</span>J</> + ) : ( + <>Ctrl J</> + )} + </kbd> </p>
43-75: Optional: add values (and simple onSelect) to items for better filtering UXProviding a
valueimproves search matching and demonstrates selection behavior.- <Command.Group heading="Suggestions"> - <Command.Item> + <Command.Group heading="Suggestions"> + <Command.Item value="calendar" onSelect={() => setOpen(false)}> <Calendar /> <span>Calendar</span> </Command.Item> - <Command.Item> + <Command.Item value="emoji" onSelect={() => setOpen(false)}> <Smile /> <span>Search Emoji</span> </Command.Item> - <Command.Item> + <Command.Item value="calculator" onSelect={() => setOpen(false)}> <Calculator /> <span>Calculator</span> </Command.Item> </Command.Group> <Command.Separator /> <Command.Group heading="Settings"> - <Command.Item> + <Command.Item value="profile" onSelect={() => setOpen(false)}> <User /> <span>Profile</span> <Command.Shortcut>⌘P</Command.Shortcut> </Command.Item> - <Command.Item> + <Command.Item value="billing" onSelect={() => setOpen(false)}> <CreditCard /> <span>Billing</span> <Command.Shortcut>⌘B</Command.Shortcut> </Command.Item> - <Command.Item> + <Command.Item value="settings" onSelect={() => setOpen(false)}> <Settings /> <span>Settings</span> <Command.Shortcut>⌘S</Command.Shortcut> </Command.Item>preview/components/command-style-default.tsx (1)
18-18: Add an explicit accessible name to the input.Placeholders aren’t read as labels by all AT. Add an aria-label (or wire up aria-labelledby) for better accessibility.
- <Command.Input placeholder="Type a command or search..." /> + <Command.Input + placeholder="Type a command or search..." + aria-label="Command menu" + />config/components.ts (1)
136-139: Declare Command’s external dependencies for consistency.Other core entries (e.g., accordion, slider) list external deps. Command depends on cmdk, Radix Dialog (via the wrapper), and lucide-react. Add them to keep the catalog metadata accurate.
command: { name: "command", + dependencies: ["cmdk", "@radix-ui/react-dialog", "lucide-react"], filePath: "components/retroui/Command.tsx", },components/retroui/Command.tsx (5)
10-23: Forward refs on the root Command to preserve composability.Without forwarding refs, consumers can’t imperatively focus/measure the Command (common in dialogs). Recommend wrapping with forwardRef and setting displayName.
-function Command({ - className, - ...props -}: React.ComponentProps<typeof CommandPrimitive>) { - return ( - <CommandPrimitive - className={cn( - "flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground border-border shadow-md", - className, - )} - {...props} - /> - ); -} +const Command = React.forwardRef< + React.ElementRef<typeof CommandPrimitive>, + React.ComponentPropsWithoutRef<typeof CommandPrimitive> +>(({ className, ...props }, ref) => { + return ( + <CommandPrimitive + ref={ref} + className={cn( + "flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground border-border shadow-md", + className, + )} + {...props} + /> + ); +}); +Command.displayName = "Command";
48-68: Forward refs on Command.Input to enable programmatic focus.Consumers often focus the input when opening the palette. Forwarding the ref keeps this possible.
-function CommandInput({ - className, - ...props -}: React.ComponentProps<typeof CommandPrimitive.Input>) { - return ( - <div - className="flex items-center border-border border-b px-3" - cmdk-input-wrapper="" - data-slot="command-input" - > - <Search className="me-2 h-4 w-4 shrink-0 opacity-50 text-foreground" /> - <CommandPrimitive.Input - className={cn( - "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body", - className, - )} - {...props} - /> - </div> - ); -} +const CommandInput = React.forwardRef< + React.ElementRef<typeof CommandPrimitive.Input>, + React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> +>(({ className, ...props }, ref) => { + return ( + <div + className="flex items-center border-border border-b px-3" + cmdk-input-wrapper="" + data-slot="command-input" + > + <Search className="me-2 h-4 w-4 shrink-0 opacity-50 text-foreground" /> + <CommandPrimitive.Input + ref={ref} + className={cn( + "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body", + className, + )} + {...props} + /> + </div> + ); +}); +CommandInput.displayName = "CommandInput";
70-84: Minor CSS nit: simplify height calc.You can drop calc() around min() and rely on arbitrary value support for better readability.
- "max-h-[400px] overflow-auto overscroll-contain transition-[height] h-[calc(min(300px,var(--cmdk-list-height)))] bg-background", + "max-h-[400px] overflow-auto overscroll-contain transition-[height] h-[min(300px,var(--cmdk-list-height))] bg-background",
127-141: Selected vs hover styles may conflict.The hover styles can visually override the selected state depending on generated CSS order. Consider removing hover bg/text when selected, or preferring only the data-[selected] styles.
159-177: Broaden Command.Check props to accept Lucide icon props.Current typing only exposes icon and className; callers can’t pass size, strokeWidth, etc. Widen the props using the Check icon’s own props.
-interface CommandCheckProps { - icon?: LucideIcon; - className?: string; -} +type CommandCheckProps = + React.ComponentProps<typeof Check> & { icon?: LucideIcon };Optionally keep the default size via className, but this lets consumers override icon props as needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
components/retroui/Command.tsx(1 hunks)components/retroui/index.ts(1 hunks)config/components.ts(4 hunks)config/navigation.ts(2 hunks)content/docs/components/command.mdx(1 hunks)package.json(1 hunks)preview/components/command-style-default.tsx(1 hunks)preview/components/command-style-dialog.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (7)
components/retroui/index.ts (2)
components/retroui/CommandDisplay.tsx (4)
CommandDisplay(10-65)CommandDisplayProps(6-8)part(44-49)navigator(13-21)components/ComponentInstall.tsx (1)
command(10-30)
preview/components/command-style-default.tsx (1)
components/retroui/CommandDisplay.tsx (1)
CommandDisplay(10-65)
config/navigation.ts (2)
types/index.d.ts (3)
INavigationConfig(12-15)INavItem(1-5)INavItemWithChildren(7-10)components/SideNav.tsx (2)
SideNav(8-43)item(16-39)
preview/components/command-style-dialog.tsx (1)
components/retroui/CommandDisplay.tsx (1)
CommandDisplay(10-65)
content/docs/components/command.mdx (2)
components/ComponentInstall.tsx (5)
CliCommand(32-86)ComponentInstallCli(88-109)command(10-30)ComponentInstall(115-130)ComponentInstallManual(111-113)components/ComponentShowcase.tsx (1)
ComponentShowcase(10-64)
components/retroui/Command.tsx (1)
components/retroui/Dialog.tsx (1)
IDialogHeaderProps(203-206)
config/components.ts (2)
components/ComponentShowcase.tsx (1)
ComponentShowcase(10-64)components/retroui/CommandDisplay.tsx (2)
CommandDisplay(10-65)CommandDisplayProps(6-8)
🪛 LanguageTool
content/docs/components/command.mdx
[grammar] ~24-~24: There might be a mistake here.
Context: ...# 2. Copy the code 👇 into your project: </ComponentInstall.Manual> </ComponentIns...
(QB_NEW_EN)
🔇 Additional comments (8)
package.json (1)
35-35: Dependency addition looks goodAdding cmdk at ^1.1.1 aligns with the new Command component and React 18 stack.
components/retroui/index.ts (1)
27-27: Barrel re-export for Command is correctRe-exporting Command from the barrel matches the repo’s public API pattern.
content/docs/components/command.mdx (1)
16-21: I’ve added a script to confirm which packagesCommand.tsxactually imports so we can update the docs precisely to its real peer dependencies. Once we see the results, I’ll adjust the install instructions accordingly. Let me know when that’s available.preview/components/command-style-default.tsx (1)
17-54: Looks good — clear, minimal preview that exercises groups, items, separators, and shortcuts.Structure and icon usage read well; disabled state shown. No functional concerns here.
config/components.ts (3)
243-246: Formatting-only change LGTM.Multiline lazy import improves readability without behavior change.
431-433: Formatting-only change LGTM.Consistent with other entries; no functional impact.
603-612: New example entries wired correctly.Names, file paths, and lazy imports align with the new previews.
components/retroui/Command.tsx (1)
179-191: API surface looks solid.Nice cohesive namespace export (Command.Check, .Dialog, .Input, etc.). This mirrors familiar patterns and will be ergonomic to consume.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
content/docs/components/command.mdx (2)
13-15: Resolved: CLI command now cross-platform-friendly (Windows quotes fixed).Switching to double quotes (escaped as "...") inside the JSX attribute addresses cmd.exe/PowerShell issues flagged earlier. Good catch and implementation.
36-38: Resolved: “Dialog” heading now matches the showcased preview.The heading accurately reflects
<ComponentShowcase name="command-style-dialog" />. Looks consistent with the previews and ToC.
🧹 Nitpick comments (3)
content/docs/components/command.mdx (3)
9-12: Unify the Examples structure: add “Default” heading and avoid duplicate section anchors.Currently the default preview appears above the “Examples” section without a subheading, while “Dialog” lives under “Examples.” Add a “Default” subsection for consistency and remove the extra “## Examples” to keep a single section anchor in the ToC.
Apply these diffs:
-<ComponentShowcase name="command-style-default" /> -<br /> -<br /> +## Examples + +### Default + +<ComponentShowcase name="command-style-default" /> +<br /> +<br />-## Examples -Also applies to: 34-35
22-23: Reduce layout “
” tags; prefer spacing utilities for consistency.Repeated
<br />for vertical rhythm is brittle in MDX and can clutter markup. Consider margin utilities on surrounding wrappers (e.g.,mt-6,mb-6) or wrapping sections in containers with spacing.Also applies to: 31-33, 39-40
24-24: Minor copy edit: drop the emoji for a cleaner docs heading.House style in other pages seems emoji-free in headings. Optional, but keeps the tone consistent.
Apply this diff if you agree:
-#### 2. Copy the code 👇 into your project: +#### 2. Copy the code into your project:
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
content/docs/components/command.mdx(1 hunks)preview/components/command-style-dialog.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- preview/components/command-style-dialog.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
content/docs/components/command.mdx (3)
components/ComponentInstall.tsx (5)
CliCommand(32-86)ComponentInstallCli(88-109)command(10-30)ComponentInstall(115-130)ComponentInstallManual(111-113)app/(docs)/docs/[[...slug]]/page.tsx (1)
page(44-101)components/ComponentShowcase.tsx (1)
ComponentShowcase(10-64)
🪛 LanguageTool
content/docs/components/command.mdx
[grammar] ~24-~24: There might be a mistake here.
Context: ...# 2. Copy the code 👇 into your project: </ComponentInstall.Manual> </ComponentIns...
(QB_NEW_EN)
🔇 Additional comments (1)
content/docs/components/command.mdx (1)
9-12: Preview registrations verifiedBoth
command-style-defaultandcommand-style-dialogare correctly registered and implemented, so no changes are needed:
- config/components.ts
• Lines 603–606:"command-style-default"entry with filePath and lazy import
• Lines 608–611:"command-style-dialog"entry with filePath and lazy import- preview/components/command-style-default.tsx
• Line 14:export default function CommandStyleDefault()- preview/components/command-style-dialog.tsx
• Line 15:export default function Component()
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
registry.json (4)
279-280: Correct Radio description (single-choice, not multiple).Radios allow selecting a single option from a group.
- "description": "Sometimes you need to pick multiple options! That's where the Radio component comes into play.", + "description": "Pick exactly one option from a set. That's where the Radio component comes into play.",
801-812: Mismatch between name and file path. Use a “variants” name here.Name says “toggle” but file is “…variants.tsx”.
- "name": "checkbox-style-toggle", - "title": "checkbox-style-toggle", + "name": "checkbox-style-variants", + "title": "checkbox-style-variants", "type": "registry:block", "registryDependencies": ["https://retroui.dev/r/checkbox.json"], "files": [ { "path": "preview/components/checkbox-style-variants.tsx", "target": "components/retroui/preview/checkbox-style-variants.tsx", "type": "registry:block" } ]
814-825: Second duplicate “checkbox-style-default”. Rename as sizes.Avoid duplicate names; file path indicates sizes.
- "name": "checkbox-style-default", - "title": "checkbox-style-default", + "name": "checkbox-style-sizes", + "title": "checkbox-style-sizes", "type": "registry:block", "registryDependencies": ["https://retroui.dev/r/checkbox.json"], "files": [ { "path": "preview/components/checkbox-style-sizes.tsx", "target": "components/retroui/preview/checkbox-style-sizes.tsx", "type": "registry:block" } ]
617-628: Critical: Resolve duplicate registry item names in registry.jsonThe registry contains duplicate entries for both badge-style-default and checkbox-style-default, which will break consumers and installers. Each “variant” entry should have a unique
nameandtitlematching its file paths.Addresses in registry.json:
- badge-style-default entries around lines 617–628 and 643–654
- checkbox-style-default entries around lines 785–794 and 811–820
Apply the following diffs to the second occurrence of each duplicate block:
--- registry.json @@ # badge-style-default duplicate (2nd occurrence) - "name": "badge-style-default", - "title": "badge-style-default", + "name": "badge-style-rounded", + "title": "badge-style-rounded", "type": "registry:block", "registryDependencies": ["https://retroui.dev/r/badge.json"], "files": [ { - "path": "preview/components/badge-style-rounded.tsx", - "target": "components/retroui/preview/badge-style-rounded.tsx", + "path": "preview/components/badge-style-rounded.tsx", + "target": "components/retroui/preview/badge-style-rounded.tsx", "type": "registry:block" } ] @@ # checkbox-style-default duplicate (2nd occurrence) - "name": "checkbox-style-default", - "title": "checkbox-style-default", + "name": "checkbox-style-sizes", + "title": "checkbox-style-sizes", "type": "registry:block", "registryDependencies": ["https://retroui.dev/r/checkbox.json"], "files": [ { - "path": "preview/components/checkbox-style-sizes.tsx", - "target": "components/retroui/preview/checkbox-style-sizes.tsx", + "path": "preview/components/checkbox-style-sizes.tsx", + "target": "components/retroui/preview/checkbox-style-sizes.tsx", "type": "registry:block" } ]
- Verify that each
.nameis globally unique after these changes.- Confirm registry consumers install the intended variants correctly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
registry.json(85 hunks)
🔇 Additional comments (6)
registry.json (6)
5-5: Inline root dependencies change looks good.Switching to inline arrays improves readability and keeps diffs smaller.
58-58: Consistent inline deps for utils.Good consistency with the new inline style.
516-517: Nice: registryDependencies switched to inline arrays.This improves maintainability and consistency across entries.
Also applies to: 529-530, 542-543, 568-569, 581-582, 594-595, 607-608, 620-621, 633-634
1117-1118: Adding lucide-react to relevant preview blocks is appropriate.Previews commonly showcase icons; declaring this keeps consumers from missing a dep on install.
Also applies to: 1131-1132, 1145-1146, 1159-1160, 1176-1177, 1193-1194, 1210-1211, 1244-1245, 1261-1262, 1278-1279, 1295-1296, 1312-1313, 1331-1332, 1350-1351
38-51: Dark theme matches light theme values — intentional?All HSLs in dark match light. If unintentional, consider darker backgrounds/foregrounds or derive from tokens.
I can help propose a token set if you share intended dark palette.
191-204: Command component integration verified – ready to mergeAll required integration points are present and correct:
- File exists at
components/retroui/Command.tsx- Re-export in
components/retroui/index.ts:export * from "./Command"cmdkdependency pinned inpackage.json(^1.1.1)- Navigation entry added in
config/navigation.tsNo further changes needed.
| "name": "accordion", | ||
| "type": "registry:component", | ||
| "title": "Accordion", | ||
| "description": "This collapsible component let's your users read only the content they care about. 😌", |
There was a problem hiding this comment.
Grammar: "let's" → "lets".
User-facing copy: “This collapsible component lets your users…” (no apostrophe).
- "description": "This collapsible component let's your users read only the content they care about. 😌",
+ "description": "This collapsible component lets your users read only the content they care about. 😌",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "description": "This collapsible component let's your users read only the content they care about. 😌", | |
| "description": "This collapsible component lets your users read only the content they care about. 😌", |
🤖 Prompt for AI Agents
In registry.json around line 70 the description contains the incorrect
contraction "let's"; update the string to use the correct possessive/verb form
"lets" so the user-facing copy reads: "This collapsible component lets your
users read only the content they care about. 😌".
| "dependencies": [ | ||
| "@radix-ui/react-switch" | ||
| ], | ||
| "dependencies": ["@radix-ui/react-switch"], |
There was a problem hiding this comment.
Grammar: remove “to” in “Let users to turn on…”.
- "description": "Let users to turn on or off your marketing emails or notifications.",
+ "description": "Let users turn on or off your marketing emails or notifications.",Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In registry.json around line 339, the human-readable description contains the
ungrammatical phrase "Let users to turn on..."; edit that string to remove the
extraneous "to" so it reads "Let users turn on..." (preserve surrounding
punctuation/capitalization and ensure JSON string remains valid).
| } | ||
| ] | ||
| } | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Add missing Command preview blocks to align with PR description and docs.
The AI summary and PR intent mention two Command previews (“default” and “dialog”). They’re not present in this registry file. Add them so the preview gallery and installers can discover them.
]
-}
+ ,
+ {
+ "name": "command-style-default",
+ "title": "command-style-default",
+ "type": "registry:block",
+ "registryDependencies": ["https://retroui.dev/r/command.json"],
+ "dependencies": ["lucide-react"],
+ "files": [
+ {
+ "path": "preview/components/command-style-default.tsx",
+ "target": "components/retroui/preview/command-style-default.tsx",
+ "type": "registry:block"
+ }
+ ]
+ },
+ {
+ "name": "command-style-dialog",
+ "title": "command-style-dialog",
+ "type": "registry:block",
+ "registryDependencies": ["https://retroui.dev/r/command.json"],
+ "dependencies": ["lucide-react", "@radix-ui/react-dialog"],
+ "files": [
+ {
+ "path": "preview/components/command-style-dialog.tsx",
+ "target": "components/retroui/preview/command-style-dialog.tsx",
+ "type": "registry:block"
+ }
+ ]
+ }
+}🏁 Script executed:
#!/bin/bash
# Verify the preview files referenced above exist
test -f preview/components/command-style-default.tsx || echo "Missing preview/components/command-style-default.tsx"
test -f preview/components/command-style-dialog.tsx || echo "Missing preview/components/command-style-dialog.tsx"Length of output: 108
🏁 Script executed:
#!/bin/bash
# Confirm absence of the blocks in registry.json
rg -n '"name": "command-style-default"' registry.json || echo "Missing block: command-style-default"
rg -n '"name": "command-style-dialog"' registry.json || echo "Missing block: command-style-dialog"
# Show the file tail to verify trailing syntax for insertion
tail -n 5 registry.jsonLength of output: 330
Add missing Command preview blocks to registry.json
The registry file currently ends without the two Command preview blocks (“command-style-default” and “command-style-dialog”), even though their corresponding preview components exist. To ensure the preview gallery and installers can discover them, insert the following immediately before the final closing } in registry.json:
]
-}
+ ,
+ {
+ "name": "command-style-default",
+ "title": "command-style-default",
+ "type": "registry:block",
+ "registryDependencies": ["https://retroui.dev/r/command.json"],
+ "dependencies": ["lucide-react"],
+ "files": [
+ {
+ "path": "preview/components/command-style-default.tsx",
+ "target": "components/retroui/preview/command-style-default.tsx",
+ "type": "registry:block"
+ }
+ ]
+ },
+ {
+ "name": "command-style-dialog",
+ "title": "command-style-dialog",
+ "type": "registry:block",
+ "registryDependencies": ["https://retroui.dev/r/command.json"],
+ "dependencies": ["lucide-react", "@radix-ui/react-dialog"],
+ "files": [
+ {
+ "path": "preview/components/command-style-dialog.tsx",
+ "target": "components/retroui/preview/command-style-dialog.tsx",
+ "type": "registry:block"
+ }
+ ]
+ }
+}• File: registry.json
• Preview components verified in preview/components/ – both command-style-default.tsx and command-style-dialog.tsx exist.
• Insert the comma and block objects after the closing ] of the existing array, before the final }.
Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
content/docs/components/command.mdx (2)
18-20: Thanks for adding cmdk to Manual install — this unblocks copy-paste usageThe missing dependency from earlier review is now included. Looks good.
36-38: Preview heading and component are aligned — good fix“Dialog” now matches the showcased
command-style-dialogexample.
🧹 Nitpick comments (3)
content/docs/components/command.mdx (3)
10-11: Prefer semantic spacing over repeated
tagsUse layout utilities instead of visual line breaks to keep MDX accessible and consistent with the site’s Tailwind patterns.
<ComponentShowcase name="command-style-default" /> -<br /> -<br /> +<div className="my-8" aria-hidden="true" /> ... <ComponentShowcase name="command-style-dialog" /> -<br /> -<br /> +<div className="my-8" aria-hidden="true" />Also applies to: 31-33, 39-40
4-4: Normalize front matter date to ISO 8601 for reliable parsingUse an ISO string to avoid locale parsing issues downstream and keep formatting consistent.
-lastUpdated: 21 Aug, 2025 +lastUpdated: 2025-08-21
24-24: Minor wording tweak for the heading (emoji can be screen-reader noisy)Optional: drop the emoji or move it to a visually hidden label.
-#### 2. Copy the code 👇 into your project: +#### 2. Copy the code into your project:
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
content/docs/components/command.mdx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
content/docs/components/command.mdx (3)
components/ComponentInstall.tsx (4)
CliCommand(32-86)ComponentInstallCli(88-109)command(10-30)ComponentInstall(115-130)components/MDX.tsx (1)
type(16-109)app/(docs)/docs/[[...slug]]/page.tsx (1)
page(44-101)
🪛 LanguageTool
content/docs/components/command.mdx
[grammar] ~24-~24: There might be a mistake here.
Context: ...# 2. Copy the code 👇 into your project: </ComponentInstall.Manual> </ComponentIns...
(QB_NEW_EN)
| <br /> | ||
|
|
||
| <ComponentInstall> | ||
| <ComponentInstall.Cli npmCommand="npx shadcn@latest add "https://retroui.dev/r/command.json"" /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Use real double quotes via JSX braces instead of HTML entities in CLI command
Avoid " in JSX props; it may copy as literal text. Use a JS string so copied command contains actual quotes across all shells.
- <ComponentInstall.Cli npmCommand="npx shadcn@latest add "https://retroui.dev/r/command.json"" />
+ <ComponentInstall.Cli npmCommand={'npx shadcn@latest add "https://retroui.dev/r/command.json"'} />Run this quick check to catch any remaining HTML-entity quotes in MDX props:
🏁 Script executed:
#!/bin/bash
rg -nP '"' content/docs/**/*.mdxLength of output: 1374
Refactor CLI command to use real quotes instead of HTML entities
Verified via ripgrep that this is the only occurrence of " in MDX props. Please update the following line in content/docs/components/command.mdx:
- <ComponentInstall.Cli npmCommand="npx shadcn@latest add "https://retroui.dev/r/command.json"" />
+ <ComponentInstall.Cli npmCommand={'npx shadcn@latest add "https://retroui.dev/r/command.json"'} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <ComponentInstall.Cli npmCommand="npx shadcn@latest add "https://retroui.dev/r/command.json"" /> | |
| <ComponentInstall.Cli npmCommand={'npx shadcn@latest add "https://retroui.dev/r/command.json"'} /> |
🤖 Prompt for AI Agents
In content/docs/components/command.mdx around line 14, the npmCommand prop uses
HTML entity " for the internal URL quotes; replace the entities with real
double quotes and make the prop use single quotes for its value so it remains
valid JSX/MDX, e.g. change the attribute to use single quotes around the whole
string and real double quotes around the URL.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 participants
Add Command component
Added a Command component that includes all the features from Shadcn's Command component and the underlying cmdk library. This component will serve as the foundation for the upcoming Combobox component
Summary by CodeRabbit
New Features
Documentation
Chores