Skip to content

Migrate components to @base-ui/react and enhance UI consistency - #47

Merged
Barata-Ribeiro merged 18 commits into
mainfrom
radix-to-baseui-migration
Aug 7, 2026
Merged

Migrate components to @base-ui/react and enhance UI consistency#47
Barata-Ribeiro merged 18 commits into
mainfrom
radix-to-baseui-migration

Conversation

@Barata-Ribeiro

Copy link
Copy Markdown
Owner

This pull request introduces several improvements and refactoring efforts across the codebase, primarily focusing on standardizing component APIs, enhancing type safety, and improving UI consistency. The most significant changes include replacing the asChild prop with a new render prop for several UI components, updating the navigation logic for better state management, and refining styling and placeholder logic in calculator components.

Component API Refactoring:

  • Replaced usage of the asChild prop with a new render prop for components such as DropdownMenuTrigger, SidebarMenuButton, PopoverTrigger, CollapsibleTrigger, SidebarMenuSubButton, and related menu items, ensuring a more explicit and type-safe way to pass custom render elements. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Navigation and State Management:

  • Refactored the main navigation (NavMain) to use local state (openGroups) for managing the open/closed state of navigation groups, improving responsiveness and reliability of the sidebar navigation. [1] [2]

Styling and UI Consistency:

  • Updated Tailwind CSS settings in .vscode/settings.json to enhance class detection and support for various class attribute patterns and libraries (e.g., clsx, cva, twMerge).
  • Improved styling in the general calculator by updating color classes for better visual consistency and switching from template string syntax to function calls for the cn utility.

Calculator Components Improvements:

  • In the date add/subtract and date difference calculators, replaced Math.random with mathjs's random and floor for placeholder generation, and updated select and popover components for better accessibility and UI alignment. [1] [2] [3] [4] [5] [6] [7]

Dependency Updates:

  • Added imports for useEffect and useState in navigation components to support the new state management logic.

These changes collectively improve code maintainability, type safety, and the user experience across the application.

- Updated Separator component to use @base-ui/react/separator.
- Refactored Sheet component to utilize @base-ui/react/dialog and adjusted related subcomponents.
- Transitioned Sidebar component to use new hooks and removed unnecessary fetcher logic.
- Updated Slider component to use @base-ui/react/slider and simplified its structure.
- Refactored Switch component to utilize @base-ui/react/switch.
- Migrated Tabs component to @base-ui/react/tabs and adjusted related subcomponents.
- Updated Toggle and ToggleGroup components to use @base-ui/react/toggle and @base-ui/react/toggle-group.
- Refactored Tooltip component to use @base-ui/react/tooltip and adjusted its content structure.
@Barata-Ribeiro Barata-Ribeiro self-assigned this Aug 7, 2026
@Barata-Ribeiro Barata-Ribeiro added bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request chore Handle config, moving etc. labels Aug 7, 2026
@vercel

vercel Bot commented Aug 7, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
utilities-webapp Ready Ready Preview Aug 7, 2026 2:07pm

@Barata-Ribeiro
Barata-Ribeiro merged commit 6f95eb6 into main Aug 7, 2026
2 of 3 checks passed
@Barata-Ribeiro
Barata-Ribeiro deleted the radix-to-baseui-migration branch August 7, 2026 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working chore Handle config, moving etc. documentation Improvements or additions to documentation enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant