Comfy-Org / Comfy-Org/ComfyUI_frontend
Replace PrimeVue Divider with design-system primitives
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Background
As part of the ongoing migration away from PrimeVue components to shadcn/vue and Reka UI, we should replace all usages of the PrimeVue `Divider` component with design-system-backed separators.
## Context
This was identified during review of PR #7223:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7223#discussion_r2608871632
## Current Usage
The `Divider` component from PrimeVue is currently used in **22 files** across the codebase:
### Main App
- `src/views/UserSelectView.vue`
- `src/platform/settings/components/SettingGroup.vue`
- `src/platform/settings/components/ServerConfigPanel.vue`
- `src/platform/settings/components/SettingDialogContent.vue`
- `src/platform/cloud/onboarding/CloudSignupView.vue`
- `src/platform/cloud/onboarding/CloudLoginView.vue`
- `src/components/topbar/CurrentUserPopover.vue`
- `src/components/sidebar/tabs/ModelLibrarySidebarTab.vue`
- `src/components/sidebar/tabs/AssetsSidebarTab.vue`
- `src/components/sidebar/tabs/NodeLibrarySidebarTab.vue`
- `src/components/dialog/content/SignInContent.vue`
- `src/components/dialog/content/setting/UserPanel.vue`
- `src/components/dialog/content/setting/LegacyCreditsPanel.vue`
- `src/components/dialog/content/setting/AboutPanel.vue`
- `src/components/dialog/content/ErrorDialogContent.vue`
- `src/components/common/TextDivider.vue`
- `src/components/common/SystemStatsPanel.vue`
- `src/components/common/CustomizationDialog.vue`
### Desktop App
- `apps/desktop-ui/src/components/maintenance/TaskListPanel.vue`
- `apps/desktop-ui/src/components/install/InstallLocationPicker.vue`
- `apps/desktop-ui/src/components/install/mirror/MirrorItem.vue`
- `apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue`
## Proposed Solution
Replace PrimeVue `Divider` with one of:
1. Enhanced `TextDivider` component (which itself wraps PrimeVue Divider currently, so would need updating)
2. Simple Tailwind-based dividers using theme tokens from `style.css` (e.g., `
3. Design-system separator primitive if one exists or should be created
## Acceptance Criteria
- [ ] All PrimeVue `Divider` imports removed
- [ ] Replacement separator approach decided and implemented
- [ ] Visual appearance preserved or improved
- [ ] No regressions in layout or spacing
---
**Related PR:** #7223
**Requested by:** @DrJKL
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7334-Replace-PrimeVue-Divider-with-design-system-primitives-2c66d73d3650814cb9d2e3eb6552827f) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.