feat: ✨ add new shadcn components #55
Conversation
|
Warning Rate limit exceeded@Ankan002 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 39 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 selected for processing (1)
WalkthroughThis update introduces several new UI components—Popover, Toggle, Toggle Group, Tooltip, and Sonner (toast notifications)—along with their supporting documentation, registry entries, navigation links, example previews, and style variants. The changes add the relevant Radix UI and Sonner dependencies, implement the components with support for multiple visual variants, and export them through the central retroui index. Documentation files and preview components demonstrate installation, usage, and style options. The root layout now includes the Toaster component for global toast support. Registry and configuration files are updated to register and showcase all new components and their variants. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Toaster
participant Popover
participant Toggle
participant ToggleGroup
participant Tooltip
User->>App: Interacts with UI (clicks/toggles/hovers)
App->>Popover: Renders popover when triggered
App->>Toggle: Toggles button state on click
App->>ToggleGroup: Updates group state on item toggle
App->>Tooltip: Shows tooltip on hover
App->>Toaster: Triggers toast on event
Toaster-->>User: Displays toast notification
Popover-->>User: Shows popover content
Toggle-->>User: Updates toggle button
ToggleGroup-->>User: Updates group selection
Tooltip-->>User: Displays tooltip content
Poem
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:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
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: 19
🔭 Outside diff range comments (1)
public/r/toggle-group-style-default.json (1)
12-27: 🛠️ Refactor suggestionAdd ARIA labels for accessibility.
Icon-only toggles need accessible names. E.g., for the “bold” toggle:- <ToggleGroupItem value="bold"> - <Bold className="h-4 w-4" /> - </ToggleGroupItem> + <ToggleGroupItem value="bold" aria-label="Bold"> + <Bold className="h-4 w-4" aria-hidden="true" /> + </ToggleGroupItem>And similarly for “italic” and “underline”. Also consider adding an
aria-labelon the<ToggleGroup>(e.g.,aria-label="Text formatting options").
🧹 Nitpick comments (20)
preview/components/label.tsx (1)
1-13: Optional: Rename file for consistency.
Other previews use*-style-*or*-defaultin their filenames. Consider renaminglabel.tsxtolabel-default.tsxto matchtooltip-style-default.tsx,toggle-style-outline-muted.tsx, etc.- preview/components/label.tsx + preview/components/label-default.tsxpreview/components/toggle-group-style-outline-muted.tsx (1)
6-22: Enhance accessibility witharia-labelon icon-only toggle items.
EachToggleGroupItemrenders only an icon, which may not be announced by screen readers. Consider addingaria-label(or a visually hidden label) for clarity, e.g.:- <ToggleGroupItem value="bold"> + <ToggleGroupItem value="bold" aria-label="Bold">public/r/toggle-style-default.json (1)
12-12: Missing"use client"directive in preview component content.
The preview filetoggle-style-default.tsxshould explicitly include"use client";at the top to opt into client-side rendering. Please prepend the content string with:"use client";public/r/sonner-style-rich-colors.json (1)
12-15: Add"use client"directive to Sonner preview component.
To ensure the toast preview runs as a client component, prepend thecontentstring with:"use client";content/docs/components/toggle.mdx (2)
11-17: Add Yarn installation instructions: Consider including a Yarn command alongside thenpmexample to cater to users who prefer Yarn. For instance:<ComponentInstall.Cli> ```sh - npx shadcn@latest add "https://retroui.dev/r/toggle.json" + # npm + npx shadcn@latest add "https://retroui.dev/r/toggle.json" + # yarn + yarn shadcn add "https://retroui.dev/r/toggle.json" ``` </ComponentInstall.Cli>
56-59: Consistent spacing for final showcase: The last<ComponentShowcase>(outline-muted variant) isn’t followed by<br />tags like the previous examples, which may lead to uneven spacing. Consider adding<br /><br />or a wrapper for consistency.preview/components/popover-style-primary.tsx (1)
19-49: Consider abstracting repeated form layout: The grid of labeled inputs is duplicated across popover preview variants. Extracting this into a sharedDimensionsFormcomponent could improve maintainability and DRYness.// components/retroui/preview/DimensionsForm.tsx export function DimensionsForm() { return ( <div className="grid gap-4"> {/* ...existing markup for Dimensions... */} </div> ); }Then replace the inline JSX in each preview with
<DimensionsForm />.preview/components/popover-style-default-shadow.tsx (1)
19-49: DRY up preview markup: Similar to the primary variant, the nested grid markup is repeated. Extract common form markup into a shared component (e.g.,DimensionsForm) to reduce duplication acrosspopover-*previews.preview/components/popover-style-primary-shadow.tsx (1)
19-49: Refactor repeated UI markup: All popover preview variants share identical nested layout. Creating a reusableDimensionsFormcomponent would DRY up the code and simplify updates.content/docs/components/sonner.mdx (1)
1-5: Consider standardizing thelastUpdatedformat.
The frontmatter uses04 Apr, 2025, which may not sort or parse consistently across tools. Adopting an ISO 8601 date (e.g.,2025-04-04) aligns with best practices.Apply:
--- content/docs/components/sonner.mdx - lastUpdated: 04 Apr, 2025 + lastUpdated: 2025-04-04public/r/toggle-group-style-default.json (1)
2-4: Make thetitlemore human-readable.
Currently"toggle-group-style-default"duplicatesname. Consider a label like"Toggle Group – Default Style"to improve clarity in registries or UIs.public/r/sonner.json (1)
6-7: Remove unused dependency.
Thelucide-reactpackage is listed but not used in this component. Dropping it will slim installs:- "dependencies": ["sonner", "lucide-react", "class-variance-authority"], + "dependencies": ["sonner", "class-variance-authority"],content/docs/components/popover.mdx (1)
1-5: Standardize thelastUpdatedformat.
Switch from08 Apr, 2025to an ISO date like2025-04-08for consistency and better ordering in frontmatter.--- content/docs/components/popover.mdx - lastUpdated: 08 Apr, 2025 + lastUpdated: 2025-04-08components/retroui/Sonner.tsx (1)
7-9: Simplify prop handling.
Destructuring everything with rest is redundant. You can write:- const Toaster = ({ ...props }: ToasterProps) => { + const Toaster = (props: ToasterProps) => {This improves readability.
components/retroui/Toggle.tsx (1)
19-20: Fix duplicate 'hover:' prefix in the 'outline-muted' variant.There's a duplication in the CSS class names for the 'outline-muted' variant.
"outline-muted": - "border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted", + "border-2 border-input bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",public/r/popover-style-default.json (1)
17-17: Consider adding aria-label attributes for better accessibility.While the example is functionally correct, consider enhancing accessibility by adding aria-label attributes to the PopoverTrigger button when no descriptive text is present.
The Button inside PopoverTrigger could benefit from an aria-label when the button text might not fully describe its purpose:
- <Button>Open Popover</Button> + <Button aria-label="Open dimensions configuration">Open Popover</Button>components/retroui/ToggleGroup.tsx (1)
35-57: Consider simplifying context fallback logicThe component correctly consumes the ToggleGroupContext for consistent styling, but the fallback logic is redundant since the context already has default values.
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, + variant: variant ?? context.variant, + size: size ?? context.size, }), className, )} {...props} > {children} </ToggleGroupPrimitive.Item> ); });This adjustment prioritizes props passed directly to the item over context values, which is a more common pattern and makes the override behavior more intuitive.
content/docs/components/toggle-group.mdx (2)
4-4: Update the lastUpdated dateThe lastUpdated date shows April 8, 2025, which is in the future. This should be updated to reflect the correct current date.
-lastUpdated: 08 Apr, 2025 +lastUpdated: 08 Apr, 2024
85-85: Add a trailing line break for consistencyAdd a trailing line break to maintain consistency with other sections in the document.
<ComponentShowcase name="toggle-group-style-outline-muted" /> 85 +components/retroui/Popover.tsx (1)
10-10: Fix double spaces in className stringThere's an extra space between
text-popover-foregroundandoutline-nonein the className string that should be removed.- "z-50 w-72 rounded-md border bg-primary p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]", + "z-50 w-72 rounded-md border bg-primary p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (61)
app/layout.tsx(2 hunks)components/retroui/Popover.tsx(1 hunks)components/retroui/Sonner.tsx(1 hunks)components/retroui/Toggle.tsx(1 hunks)components/retroui/ToggleGroup.tsx(1 hunks)components/retroui/Tooltip.tsx(1 hunks)components/retroui/index.ts(1 hunks)config/components.ts(4 hunks)config/navigation.ts(1 hunks)content/docs/components/popover.mdx(1 hunks)content/docs/components/slider.mdx(3 hunks)content/docs/components/sonner.mdx(1 hunks)content/docs/components/toggle-group.mdx(1 hunks)content/docs/components/toggle.mdx(1 hunks)content/docs/components/tooltip.mdx(1 hunks)package.json(2 hunks)preview/components/label.tsx(1 hunks)preview/components/popover-style-default-shadow.tsx(1 hunks)preview/components/popover-style-default.tsx(1 hunks)preview/components/popover-style-primary-shadow.tsx(1 hunks)preview/components/popover-style-primary.tsx(1 hunks)preview/components/sonner-style-default.tsx(1 hunks)preview/components/sonner-style-error.tsx(1 hunks)preview/components/sonner-style-rich-colors.tsx(1 hunks)preview/components/sonner-style-warning.tsx(1 hunks)preview/components/toggle-group-style-default.tsx(1 hunks)preview/components/toggle-group-style-outline-muted.tsx(1 hunks)preview/components/toggle-group-style-outlined.tsx(1 hunks)preview/components/toggle-group-style-solid.tsx(1 hunks)preview/components/toggle-style-default.tsx(1 hunks)preview/components/toggle-style-outline-muted.tsx(1 hunks)preview/components/toggle-style-outlined.tsx(1 hunks)preview/components/toggle-style-solid.tsx(1 hunks)preview/components/tooltip-style-default.tsx(1 hunks)preview/components/tooltip-style-primary.tsx(1 hunks)preview/components/tooltip-style-solid.tsx(1 hunks)public/r/popover-style-default-shadow.json(1 hunks)public/r/popover-style-default.json(1 hunks)public/r/popover-style-primary-shadow.json(1 hunks)public/r/popover-style-primary.json(1 hunks)public/r/popover.json(1 hunks)public/r/sonner-style-default.json(1 hunks)public/r/sonner-style-error.json(1 hunks)public/r/sonner-style-rich-colors.json(1 hunks)public/r/sonner-style-warning.json(1 hunks)public/r/sonner.json(1 hunks)public/r/toggle-group-outlined.json(1 hunks)public/r/toggle-group-style-default.json(1 hunks)public/r/toggle-group-style-outline-muted.json(1 hunks)public/r/toggle-group-style-solid.json(1 hunks)public/r/toggle-group.json(1 hunks)public/r/toggle-style-default.json(1 hunks)public/r/toggle-style-outline-muted.json(1 hunks)public/r/toggle-style-outlined.json(1 hunks)public/r/toggle-style-solid.json(1 hunks)public/r/toggle.json(1 hunks)public/r/tooltip-style-default.json(1 hunks)public/r/tooltip-style-primary.json(1 hunks)public/r/tooltip-style-solid.json(1 hunks)public/r/tooltip.json(1 hunks)registry.json(57 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (16)
preview/components/sonner-style-error.tsx (1)
components/retroui/Button.tsx (1)
Button(35-54)
preview/components/tooltip-style-primary.tsx (2)
components/retroui/Tooltip.tsx (4)
TooltipProvider(52-52)Tooltip(52-52)TooltipTrigger(52-52)TooltipContent(52-52)components/retroui/Button.tsx (1)
Button(35-54)
preview/components/label.tsx (2)
components/retroui/Checkbox.tsx (1)
Checkbox(29-49)components/retroui/Label.tsx (1)
Label(11-16)
preview/components/popover-style-primary.tsx (4)
components/retroui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/retroui/Button.tsx (1)
Button(35-54)components/retroui/Label.tsx (1)
Label(11-16)components/retroui/Input.tsx (1)
Input(7-25)
preview/components/sonner-style-rich-colors.tsx (1)
components/retroui/Button.tsx (1)
Button(35-54)
preview/components/tooltip-style-default.tsx (2)
components/retroui/Tooltip.tsx (4)
TooltipProvider(52-52)Tooltip(52-52)TooltipTrigger(52-52)TooltipContent(52-52)components/retroui/Button.tsx (1)
Button(35-54)
preview/components/sonner-style-default.tsx (1)
components/retroui/Button.tsx (1)
Button(35-54)
preview/components/popover-style-default-shadow.tsx (4)
components/retroui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/retroui/Button.tsx (1)
Button(35-54)components/retroui/Label.tsx (1)
Label(11-16)components/retroui/Input.tsx (1)
Input(7-25)
preview/components/tooltip-style-solid.tsx (2)
components/retroui/Tooltip.tsx (4)
TooltipProvider(52-52)Tooltip(52-52)TooltipTrigger(52-52)TooltipContent(52-52)components/retroui/Button.tsx (1)
Button(35-54)
components/retroui/Tooltip.tsx (1)
lib/utils.ts (1)
cn(4-6)
components/retroui/Popover.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/components/sonner-style-warning.tsx (1)
components/retroui/Button.tsx (1)
Button(35-54)
preview/components/popover-style-primary-shadow.tsx (4)
components/retroui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/retroui/Button.tsx (1)
Button(35-54)components/retroui/Label.tsx (1)
Label(11-16)components/retroui/Input.tsx (1)
Input(7-25)
components/retroui/ToggleGroup.tsx (2)
components/retroui/Toggle.tsx (1)
toggleVariants(49-49)lib/utils.ts (1)
cn(4-6)
components/retroui/Toggle.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/components/popover-style-default.tsx (4)
components/retroui/Popover.tsx (3)
Popover(72-72)PopoverTrigger(72-72)PopoverContent(72-72)components/retroui/Button.tsx (1)
Button(35-54)components/retroui/Label.tsx (1)
Label(11-16)components/retroui/Input.tsx (1)
Input(7-25)
🔇 Additional comments (77)
content/docs/components/slider.mdx (3)
7-7: Update source to point to the new path
The documentation link has been updated to referencecomponents/retroui/Slider.tsx, matching the new directory structure.
23-23: Remove extra blank line for cleaner formatting
The removed whitespace improves readability and aligns the manual installation block with the pattern used elsewhere.
46-46: Verify duplicate showcase is intentional
A second<ComponentShowcase name="slider-style-default" />was added under the Examples section. Please confirm this is deliberate (to show both an initial preview and a standalone example) or remove one to avoid redundancy.package.json (1)
20-20: Package dependencies added correctly for new components.The addition of the necessary Radix UI and Sonner dependencies aligns with the introduction of the new ShadCN-style components (Popover, Toggle, Toggle Group, Tooltip, and Sonner toast notifications) mentioned in the PR objectives.
Also applies to: 26-28, 42-42
app/layout.tsx (2)
5-5: Import for Toaster component looks good.The Toaster import is properly added from the retroui components barrel file, which maintains consistent import patterns across the app.
59-59: Global Toaster component correctly implemented.The Toaster component is appropriately placed at the end of the body to ensure toast notifications appear on top of all other content.
preview/components/toggle-style-outlined.tsx (1)
1-10: Toggle with outlined variant implemented correctly.The preview component follows the established pattern for component previews, properly importing and implementing the Toggle component with the outlined variant.
preview/components/toggle-style-solid.tsx (1)
1-10: Toggle with solid variant implemented correctly.This preview component provides a good example of the Toggle component with the solid variant, showing both an icon and text content within the toggle.
preview/components/sonner-style-error.tsx (1)
1-10: Clean implementation for error toast demonstrationThis component provides a clear example of how to use the error variant of Sonner toast notifications. The implementation is straightforward and follows best practices.
preview/components/toggle-style-default.tsx (1)
1-10: Good implementation of Toggle with iconThe component correctly demonstrates the default Toggle style with an icon. This pattern makes it easy for users to understand how to implement the Toggle component in their applications.
preview/components/sonner-style-warning.tsx (1)
1-10: Clear demonstration of warning toast variantThe component effectively showcases how to use the warning toast variant from the Sonner library. The implementation is clean and consistent with other toast style examples.
config/navigation.ts (5)
38-42: Navigation entry added correctly for Popover componentThe Popover component is properly integrated into the navigation configuration with consistent formatting and the appropriate "New" tag.
47-51: Navigation entry added correctly for Sonner componentThe Sonner component is properly added to the navigation structure, maintaining consistency with other entries and including the "New" tag.
56-60: Navigation entry added correctly for Toggle componentThe Toggle component is properly integrated into the navigation configuration with consistent formatting and the appropriate "New" tag.
61-65: Navigation entry added correctly for Toggle Group componentThe Toggle Group component is properly added to the navigation structure, maintaining consistency with other entries and including the "New" tag.
66-70: Navigation entry added correctly for Tooltip componentThe Tooltip component is properly integrated into the navigation configuration with consistent formatting and the appropriate "New" tag.
preview/components/toggle-style-outline-muted.tsx (1)
6-6: Verifyvariantprop name.
Confirm that"outline-muted"matches one of the keys defined in yourtoggleVariants(e.g., check for"outline-muted"vs."outlined-muted"or"muted-outline").preview/components/tooltip-style-default.tsx (1)
1-23: Implementation looks solid.
TheTooltipProvider,TooltipTrigger, andTooltipContentare used correctly to demonstrate the default style. No issues found.preview/components/toggle-group-style-solid.tsx (1)
1-23: Preview correctly demonstrates thesolidvariant.
The client directive, imports, and markup align with the other toggle-group previews. Everything looks good.public/r/toggle-style-outline-muted.json (1)
1-15: Registry block is correctly configured for outline-muted toggle style
The JSON structure, registry dependency, component file mapping, and declaredlucide-reactdependency align with the new preview component.content/docs/components/tooltip.mdx (1)
1-53: Documentation for Tooltip component looks complete and accurate
The frontmatter metadata, installation instructions, and example showcases (default,primary,solid) correctly reflect the newly introduced Tooltip variants and usage.preview/components/tooltip-style-primary.tsx (1)
1-23: Tooltip preview component is well-implemented
The"use client"directive, imports, provider hierarchy, andvariantprops are correctly applied for the primary tooltip showcase.preview/components/toggle-group-style-outlined.tsx (1)
1-23: ToggleGroup preview matches the intended API
The component correctly uses"use client", importsToggleGroup/ToggleGroupItem, and appliesvariant="outlined"with the appropriate icon children, consistent with the ToggleGroup implementation.public/r/toggle-style-outlined.json (1)
1-15: Review: registry block for outlined toggle style
The JSON correctly defines a newtoggle-style-outlinedregistry block with appropriate dependencies, path targets, and component content. The escape sequences in the"content"field are valid, and theTogglevariant matches the filename and naming conventions.preview/components/tooltip-style-solid.tsx (1)
1-23: LGTM: TooltipStyleSolid preview component
The component correctly sets upTooltipProvider,Tooltip,TooltipTrigger(asChild), andTooltipContentwith the"solid"variant. Imports from the retroui index are accurate, and the"use client"directive is present.preview/components/toggle-group-style-default.tsx (1)
1-23: LGTM: ToggleGroupStyleDefault preview
The preview component properly renders a multiple-selectionToggleGroupwith the"default"variant and includes threeToggleGroupItementries usinglucide-reacticons of consistent size. The"use client"directive and imports are correct.components/retroui/index.ts (1)
20-24: Approve new component exports
The new exports forPopover,Toggle,ToggleGroup,Sonner, andTooltipalign with the added modules in thecomponents/retrouidirectory and correctly expose them through the central index.preview/components/toggle-group-style-outline-muted.tsx (1)
1-5: Imports and client directive are correctly set up.
The"use client"directive and imports forToggleGroup,ToggleGroupItem, and icons are all in place.public/r/tooltip-style-solid.json (1)
1-15: Registry block for tooltip-style-solid is correctly defined.
The JSON schema is valid, dependencies (tooltip.json,lucide-react) align with the preview, and the content string includes the"use client"directive.preview/components/popover-style-default.tsx (5)
1-2: Client directive present.
The"use client"directive ensures this interactive preview renders correctly on the client.
3-10: Imports are clear and align with project structure.
All necessary primitives (Popover,PopoverTrigger,PopoverContent,Label,Button,Input) are imported from@/components/retroui.
14-17: Popover trigger implementation is correct.
Wrapping theButtonwith<PopoverTrigger asChild>properly anchors the popover to the trigger element.
18-27: Popover content structure and styling look good.
The content panel uses Tailwind utility classes (w-80,font-sans,grid,gap-4) to organize the header and description.
28-47: Form fields are properly paired with labels.
EachLabeluseshtmlFormatching itsInput’sid, ensuring accessible form controls within the popover.public/r/toggle-style-solid.json (1)
12-12: Ensure the preview is treated as a client component
This TSX snippet imports and renders the interactive<Toggle>component, which likely relies on client-side hooks or event handlers. In Next.js (app router), components default to server rendering—consider prepending"use client"at the top of the generated file to avoid runtime errors.public/r/toggle-group-style-outline-muted.json (1)
1-19: Preview component looks good
The registry declaration, dependencies (lucide-reactfor icons), and client directive are all correctly configured. The block cleanly demonstrates theoutline-mutedvariant ofToggleGroup.content/docs/components/toggle.mdx (1)
1-5: Documentation frontmatter: The frontmatter is well-structured, with cleartitle,description, andlastUpdatedmetadata.preview/components/popover-style-primary.tsx (2)
1-10: Confirm client-side rendering and imports: The"use client";directive and imports from@/components/retrouiare correct for a Next.js app-router setup.
12-18: Valid Popover component composition: ThePopover,PopoverTrigger, andPopoverContentcomposition correctly sets up a trigger and primary-variant content.preview/components/popover-style-default-shadow.tsx (2)
1-10: Client directive and imports are correct: The file correctly uses"use client";and imports the required components from@/components/retroui.
12-18: Default variant with shadow: ThePopoverContentapplies thedefaultvariant andshadow="md"prop appropriately for a shadowed style preview.preview/components/popover-style-primary-shadow.tsx (2)
1-10: Client-side setup and imports verified: Correct use of"use client";and component imports from@/components/retroui.
12-18: Primary variant with shadow: ThePopoverContentcombinesvariant="primary"andshadow="md"as expected for the primary-shadow preview.public/r/toggle-group-style-default.json (1)
6-9: Verify the preview file’s target path.
The block writes tocomponents/retroui/preview/toggle-group-style-default.tsx, but other previews live underpreview/components. Please confirm that this target matches your repository’s preview directory layout.public/r/sonner-style-warning.json (1)
1-18: Implementation successfully demonstrates warning toast notification!The component correctly demonstrates how to trigger a warning toast notification using the Sonner library. It properly imports the necessary dependencies and provides a clear example that users can reference.
components/retroui/Toggle.tsx (2)
9-33: Well-structured toggle variant definitions with good coverage of use cases.The toggle variants provide a comprehensive set of styling options with different visual variants and sizes. The use of class-variance-authority for managing variants is a good approach for maintainable styling.
35-45: Toggle implementation follows best practices for Radix UI integration.The Toggle component is properly implemented using React.forwardRef to ensure refs are passed to the underlying Radix UI component. The component correctly handles variant and size props along with any additional props passed down.
components/retroui/Tooltip.tsx (3)
9-23: Tooltip content variants provide good styling flexibility.The tooltip variants are well-defined with different visual styles (default, primary, solid) and appropriate animations for entrance and exit based on tooltip state and side.
31-49: Tooltip implementation follows Radix UI best practices.The TooltipContent component is correctly implemented using React.forwardRef and properly uses the Radix UI Portal for rendering, which ensures the tooltip will correctly layer above other UI elements.
25-30: Clean re-exports of Radix UI Tooltip primitives.The direct re-exports of Tooltip primitives maintain a consistent API while allowing for customization of the TooltipContent component.
public/r/popover-style-default.json (1)
1-20: Well-structured example demonstrating Popover component usage.This registry entry provides a comprehensive example of how to use the Popover component with its default styling. The example includes a form with input fields, demonstrating a practical use case for the component.
public/r/toggle-group-outlined.json (1)
1-18: LGTM: Well-structured toggle group registry blockThe toggle group outlined style registry block is correctly implemented with proper dependencies and a clean component structure. The component uses the ToggleGroup and ToggleGroupItem components with the "outlined" variant to create a toggle group for text formatting options with appropriate icons.
public/r/popover-style-default-shadow.json (1)
1-20: LGTM: Well-structured popover style registry blockThe popover style registry block is correctly implemented with proper dependencies and a clean component structure. The component demonstrates the popover with default variant and medium shadow, showcasing a form layout with dimension inputs.
public/r/popover-style-primary-shadow.json (1)
1-20: LGTM: Well-structured popover style registry blockThe popover primary style registry block is correctly implemented with proper dependencies and a clean component structure. The component demonstrates the popover with primary variant and medium shadow, showcasing the same form layout as the default variant.
public/r/toggle.json (1)
1-17: LGTM: Well-implemented toggle component registryThe toggle component registry is well-structured with appropriate dependencies and a comprehensive implementation. The component provides multiple visual variants and sizes, with proper state handling and accessibility features through Radix UI's toggle primitive.
components/retroui/ToggleGroup.tsx (2)
10-15: LGTM: Well-designed context implementationThe ToggleGroupContext is correctly implemented to share styling props between the group and its items. Default values are appropriately set for consistent appearance.
17-31: LGTM: Well-implemented ToggleGroup componentThe ToggleGroup component properly wraps the Radix UI primitive with correct ref forwarding and prop handling. The context provider ensures styling consistency for child items.
public/r/tooltip.json (1)
1-16: LGTM!The tooltip component implementation looks good with proper React patterns, Radix UI integration, and variant styling. The component exports all necessary parts and provides good styling options.
public/r/popover.json (1)
1-16: LGTM!The popover component implementation looks good with proper React patterns, variants for styling, and shadow options. The component is well structured and provides flexible customization options.
components/retroui/Popover.tsx (1)
31-72: LGTM!The implementation of the Popover components follows React best practices with proper use of forwardRef, displayName, and component composition. The props handling and style application are well structured.
public/r/toggle-group.json (1)
1-26: LGTM! Well-structured toggle group component implementation.The toggle group implementation is well-organized with appropriate dependencies on Radix UI primitives. The component architecture smartly uses React context to propagate styling variants down to child components, which is a good pattern for maintaining consistent styling.
The toggle variants include multiple style options (default, outlined, solid, outline-muted) and size variants (small, default, large), providing good flexibility for different UI needs.
registry.json (7)
227-241: LGTM! Well-structured Popover component registration.The popover component is correctly registered with appropriate dependencies and file paths.
287-300: LGTM! Sonner toast component registration looks good.The Sonner toast notification component is properly registered with the required dependencies.
371-394: LGTM! Toggle group component correctly registered.The toggle group component is properly registered with the appropriate dependencies and files.
971-1094: LGTM! Style blocks for toggle and toggle-group components.All toggle and toggle-group style blocks are properly registered with appropriate dependencies.
1095-1136: LGTM! Tooltip style blocks registration looks good.All tooltip style blocks are properly registered with appropriate dependencies.
1137-1204: LGTM! Sonner style blocks registration looks good.All sonner toast style blocks are properly registered with appropriate dependencies.
1205-1280: LGTM! Popover style blocks registration looks good.All popover style blocks are properly registered with appropriate dependencies.
config/components.ts (9)
70-73: LGTM! Popover component configuration.The popover component is properly configured in the component registry.
91-94: LGTM! Sonner component configuration.The sonner toast component is properly configured in the component registry.
95-110: LGTM! Toggle, toggle-group and tooltip component configuration.The toggle, toggle-group, and tooltip components are properly configured in the component registry.
285-308: LGTM! Popover style preview configuration.The popover style previews are properly configured with lazy loading.
392-413: LGTM! Toggle style preview configuration.The toggle style previews are properly configured with lazy loading.
414-435: LGTM! Sonner style preview configuration.The sonner toast style previews are properly configured with lazy loading.
436-440: Potential duplicate label component.A label component is being registered in the examples section, which might be a duplicate since there's already a label component in the core section. Verify if this is intentional or a mistake.
441-455: LGTM! Tooltip style preview configuration.The tooltip style previews are properly configured with lazy loading.
456-483: LGTM! Toggle group style preview configuration.The toggle group style previews are properly configured with lazy loading.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
registry.json (1)
357-369: Incorrect Toggle component registration .The
toggleentry is marked as a component but is pointing only to a preview block instead of the actualToggle.tsx. As noted previously, please update thefilessection to reference the implementation:- "files": [ - { - "path": "preview/components/toggle.tsx", - "target": "components/retroui/preview/toggle.tsx", - "type": "registry:block" - } - ] + "files": [ + { + "path": "components/retroui/Toggle.tsx", + "target": "components/retroui/Toggle.tsx", + "type": "registry:component" + } + ]
🧹 Nitpick comments (1)
registry.json (1)
58-58: Nit: Align dependency ordering.The
utilsentry lists["clsx", "tailwind-merge"], whereas the root lists["tailwind-merge", "clsx"]. Consider consistent ordering for readability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
public/r/popover-style-primary.json(1 hunks)public/r/toggle-group-style-solid.json(1 hunks)public/r/tooltip-style-default.json(1 hunks)public/r/tooltip-style-primary.json(1 hunks)public/r/tooltip-style-solid.json(1 hunks)registry.json(57 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- public/r/tooltip-style-solid.json
- public/r/tooltip-style-default.json
- public/r/popover-style-primary.json
- public/r/tooltip-style-primary.json
🔇 Additional comments (21)
public/r/toggle-group-style-solid.json (5)
2-4: Registry metadata is correct
Thename,title, andtypefields align with the filename and theToggleGroupStyleSolidcomponent and follow the registry schema.
5-8: Remote block dependencies are accurate
TheregistryDependenciescorrectly reference the coretoggleandtoggle-groupblocks, ensuring this preview can resolve the underlying primitives.
9-10: External package declared properly
Thelucide-reactdependency covers the icon imports (Bold,Italic,Underline) used in the preview.
12-14: File mapping consistency
Thepathandtargetcorrectly point totoggle-group-style-solid.tsxin both the preview folder and the components directory, and thetyperemainsregistry:block.
15-16: Embedded component content is well-formed
Thecontentstring includes the"use client"directive, correct imports from@/components/retroui, proper icon imports, and uses thesolidvariant as expected.registry.json (16)
5-5: Approve root dependencies addition.Adding
"tailwind-merge"and"clsx"to the root-leveldependenciesensures that utility merging and className composition are available project-wide.
71-71: Approve Accordion dependencies.The addition of
@radix-ui/react-accordionandlucide-reactis correct for the Accordion component.
85-85: Approve Alert dependency.Using
class-variance-authorityfor Alert variants is appropriate.
99-99: Approve Avatar dependency.The
@radix-ui/react-avatarpackage is correctly declared for Avatar functionality.
113-113: Approve Badge dependency.
class-variance-authorityis right for managing Badge style variants.
127-127: Approve Button dependency.
class-variance-authorityfor button styling variants looks good.
204-204: Approve Label dependencies.Adding both
@radix-ui/react-labelandclass-variance-authoritymatches the Label implementation.
218-218: Approve Menu dependency.The
@radix-ui/react-dropdown-menudependency is correct for the Menu component.
227-241: Approve Popover component registration.The new
popoverregistry item correctly declares its dependencies, author, and registers the actualPopover.tsximplementation using"registry:component".
288-299: Approve Sonner (toast) component.The
sonnerregistry entry is properly configured with its dependencies (sonner,lucide-react,class-variance-authority) and references theSonner.tsximplementation.
371-394: Approve Toggle Group registration.The
toggle-groupitem correctly declares both component files (Toggle.tsxandToggleGroup.tsx) and necessary Radix and styling dependencies.
972-1026: Approve Toggle style blocks.All new
togglestyle variants (default, outline-muted, outlined, solid) are correctly registered as blocks with proper preview paths and dependencies.
1027-1094: Approve Toggle Group style blocks.The
toggle-groupstyle variants are properly added, linking to both toggle and toggle-group registries and using the correct preview component paths.
1096-1145: Approve Tooltip style blocks.The
tooltipstyle variants (default, primary, solid) are registered with the right registryDependencies and preview file paths.
1147-1213: Approve Sonner style variants.All Sonner toast style previews (default, error, warning, rich-colors) are correctly registered under their respective registryDependencies.
1215-1289: Approve Popover style blocks.The popover style previews (default, default-shadow, primary, primary-shadow) are well configured with the required dependencies and preview components.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
registry.json (1)
357-369: Incorrect toggle component registration
Thetoggleentry is marked as aregistry:componentbut only registers a preview block (preview/components/toggle.tsx). The actual implementation atcomponents/retroui/Toggle.tsxis missing here.
🧹 Nitpick comments (1)
registry.json (1)
5-5: Inconsistent dependency order
The rootdependenciesarray lists"tailwind-merge", "clsx", but elsewhere (e.g., utils) it's"clsx", "tailwind-merge". Consider using a consistent, alphabetical ordering across the registry.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
registry.json(57 hunks)
🔇 Additional comments (28)
registry.json (28)
58-58: Well-ordered dependencies
Theutilsregistry lists dependencies in a clear, alphabetical order, matching the preferred convention.
71-71: Dependencies are correct
Theaccordioncomponent declares its Radix and icon dependencies appropriately.
85-85: Alert dependencies look good
Thealertcomponent only relies on CVA for variants, so listing"class-variance-authority"is sufficient.
99-99: Verify avatar dependencies
Double-check that@radix-ui/react-avatarcovers all runtime imports. If theAvatarcomponent also uses icons or utilities (e.g.,lucide-react,clsx, ortailwind-merge), make sure to list them here.
113-113: Verify badge dependencies
Confirm thatclass-variance-authorityis the only external package used byBadge. If you use any utility functions (e.g.,clsx) or icon libraries, add them todependencies.
127-127: Verify button dependencies
Thebuttoncomponent lists onlyclass-variance-authority. Ensure that you don't need additional packages (e.g., utility functions fromclsxortailwind-merge) or icons if used.
227-241: Popover component registration
Thepopoverentry correctly registers the implementation filecomponents/retroui/Popover.tsxwith the proper dependencies.
371-395: Toggle Group registration
Thetoggle-groupentry registers bothToggle.tsxandToggleGroup.tsxcorrectly. Ensure that theToggleimplementation isn't redundantly defined here if it's intended to belong only under the standalonetoggleentry.
396-409: Tooltip component registration
Thetooltipregistry entry properly registerscomponents/retroui/Tooltip.tsxwith its dependencies.
972-984: Toggle style-default block
Style block fortoggle-style-defaultcorrectly referencestoggle.json, listslucide-reactfor icons, and registers the preview file.
986-998: Toggle style-outline-muted block
Correct registry entry with dependencies and preview file for the muted outline variant.
1000-1012: Toggle style-outlined block
Looks good: registryDependencies and dependencies accurately reflect required packages for the outlined style.
1014-1026: Toggle style-solid block
Consistent with other toggle variants—in both registryDependencies and preview registration.
1028-1043: Toggle-group style-default block
RegistryDependencies include bothtoggle.jsonandtoggle-group.json, and dependencies listlucide-react.
1045-1060: Toggle-group style-outline-muted block
Correctly references both JSON files and lists icon dependencies for the outline-muted variant.
1061-1077: Toggle-group style-outlined block
Entry is accurate and follows the same pattern as other toggle-group variants.
1078-1094: Toggle-group style-solid block
Looks good: dependencies and registryDependencies align with the toggle-group component.
1096-1111: Tooltip style-default block
Correctly references bothtooltip.jsonandbutton.jsonfor preview dependencies, and registers the style preview.
1113-1128: Tooltip style-primary block
Registry entry is consistent with default style, including icon dependencies.
1129-1145: Tooltip style-solid block
All fields look correct and consistent with other tooltip style entries.
1147-1162: Sonner style-default block
Correctly references bothsonner.jsonandbutton.json, and includeslucide-reactfor icons.
1163-1179: Sonner style-error block
Entry is accurate for the error variant and follows established patterns.
1181-1196: Sonner style-warning block
Looks good for the warning variant with proper dependencies.
1197-1213: Sonner style-rich-colors block
Registry entry matches the pattern for the rich-colors variant; dependencies are correct.
1215-1232: Popover style-default block
Correctly referencespopover.json,label.json,input.json, andbutton.jsonwith icon dependencies.
1233-1251: Popover style-default-shadow block
Entry is consistent with the default style variant and its shadow variant.
1252-1270: Popover style-primary block
Proper registry entry for the primary variant with correct dependencies.
1271-1288: Popover style-primary-shadow block
All fields are correct and mirror the pattern of other popover style entries.
I have created the following ShadCN in RetroUI styles:
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores