Old vs New — Component audit
Comparative review of components/ui/ (shadcn-based foundation) and components/kaeyros/ (Kaeyros UI rich components). Recommendations for what to keep, what to replace, and what's still missing.
Kaeyros version supersedes
Different roles, both useful
Used by Kaeyros, keep
Should be added next
Detail by area
| Area | Old (components/ui) | New (components/kaeyros) | Verdict | Reason |
|---|---|---|---|---|
| Confirm dialog | ConfirmationModal ui/confirmation-modal.tsx | ConfirmDialog kaeyros/confirm-dialog.tsx | Replace old | Kaeyros adds severity (danger/warning/info), imperative confirmDialog() helper, optional input. |
| File upload | FileUpload + ImageUploader ui/file-upload.tsx, ui/image-uploader.tsx | KaeyrosFileUpload kaeyros/file-upload.tsx | Replace old | Kaeyros has progress, total size, multiple, accept filter, file list with thumbnails — supersedes both old. |
| Floating label input | FloatingInput ui/floating-input.tsx | FloatLabel kaeyros/float-label.tsx | Replace old | FloatLabel is a wrapper that works with any input; FloatingInput was monolithic. |
| Photo gallery | PhotoGallery + Lightbox ui/photo-gallery.tsx, ui/lightbox.tsx | Galleria + ImagePreview kaeyros/galleria.tsx, kaeyros/image.tsx | Replace old | Galleria is fully featured (thumbnails, indicators, autoplay, fullscreen, captions); ImagePreview handles single-image zoom. |
| Star rating | Rating ui/rating.tsx | KaeyrosRating kaeyros/rating.tsx | Replace old | Kaeyros adds half-star, cancel (X to clear), custom on/off icons. |
| Toast notifications | Toast / Toaster / Sonner ui/toast.tsx, ui/sonner.tsx, ui/toaster.tsx | KaeyrosToast kaeyros/toast.tsx | Keep both | KaeyrosToast covers severity Messages/Toasts; sonner kept for projects already using it. |
| Avatar group | AvatarGroup ui/avatar-group.tsx | KaeyrosAvatarGroup kaeyros/avatar.tsx | Replace old | Kaeyros version has overflow counter (+N) and badge support built-in. |
| Pop-up alert | PopupAlert ui/popup-alert.tsx | Message + Messages + KaeyrosToast kaeyros/{message,toast}.tsx | Replace old | Kaeyros suite is richer with severity, life timer, stickiness. |
| Multi-step wizard | StepWizard + Stepper + OnboardingFlow ui/step-wizard.tsx, ui/stepper.tsx, ui/onboarding-flow.tsx | — (use Kaeyros TabMenu + Panel) | Should add | Should add KaeyrosSteps (numbered indicator) + a unified KaeyrosWizard. |
| Button | Button (shadcn) ui/button.tsx | KaeyrosButton kaeyros/button.tsx | Keep both | shadcn Button is the foundational primitive (used by every overlay). KaeyrosButton adds severity + raised + rounded + text variants. |
| Calendar | Calendar (react-day-picker) ui/calendar.tsx | KaeyrosCalendar kaeyros/calendar.tsx | Keep both | shadcn Calendar is used by date pickers. KaeyrosCalendar adds range/multiple modes + inline + button bar. |
| Carousel | Carousel (embla) ui/carousel.tsx | KaeyrosCarousel kaeyros/carousel.tsx | Keep both | embla is more feature-rich for marketing carousels; Kaeyros carousel is simpler with built-in pagination + autoplay. |
| Slider | Slider (Radix) ui/slider.tsx | KaeyrosSlider kaeyros/slider.tsx | Keep both | Radix slider is accessible primitive. Kaeyros adds range mode (two thumbs) + vertical orientation. |
| Pagination | Pagination ui/pagination.tsx | KaeyrosPaginator kaeyros/paginator.tsx | Keep both | shadcn pagination is plain links. Kaeyros adds rows-per-page + total + first/last + state callback. |
| Chart | Chart (recharts wrapper) ui/chart.tsx | KaeyrosChart kaeyros/chart.tsx | Keep both | recharts wrapper for advanced charts. KaeyrosChart provides zero-dep SVG charts (line/bar/doughnut/pie/polar/radar). |
| Card | Card ui/card.tsx | — | Keep (foundation) | Used by every dashboard preview and Kaeyros component card. |
| Dialog | Dialog (Radix) ui/dialog.tsx | — | Keep (foundation) | Foundational Radix primitive used by sheets, alerts, custom modals. |
| Sheet / Drawer | Sheet, Drawer ui/sheet.tsx, ui/drawer.tsx | — | Keep (foundation) | No Kaeyros equivalent needed; mobile-first slide-outs. |
| Form (react-hook-form) | Form ui/form.tsx | — | Keep (foundation) | Foundational RHF + Zod glue. |
| Color picker | ColorPicker ui/color-picker.tsx | — | Should add | Should add KaeyrosColorPicker with HSL/RGB/HEX modes + alpha. |
| Sidebar (drawer) | Sidebar ui/sidebar.tsx | — | Should add | Should add KaeyrosSidebar with positions left/right/top/bottom + dismissable. |
| Domain widgets | OpportunityCard, AppointmentCard, OrderCard, POS Terminal, etc. ui/* | — | Keep (foundation) | Domain-specific marketing/showcase components — keep all. |
Recommended cleanup
The 8 components flagged Replace old can be safely removed once their canonical pages no longer reference them. Suggested removal order:
- 1
ui/confirmation-modal.tsxReplace usages with kaeyros/confirm-dialog
- 2
ui/floating-input.tsxReplace usages with kaeyros/float-label wrapper
- 3
ui/image-uploader.tsx + ui/file-upload.tsxReplace usages with kaeyros/file-upload (richer)
- 4
ui/photo-gallery.tsx + ui/lightbox.tsxReplace usages with kaeyros/galleria + kaeyros/image
- 5
ui/rating.tsxReplace usages with kaeyros/rating (half-star + cancel)
- 6
ui/popup-alert.tsxReplace usages with kaeyros/message + kaeyros/toast
- 7
ui/avatar-group.tsxReplace usages with KaeyrosAvatarGroup (overflow + badge)
Tip: search the codebase with grep -rl "FloatingInput" app/ components/ before deleting any file.
Still missing from the catalog
Components present in the wider ecosystem but not yet built as Kaeyros UI:
Accordion
shadcn has one; could add KaeyrosAccordion with multiple expanded items + animations.
Breadcrumb
shadcn has one; KaeyrosBreadcrumb could add separators / overflow / icons.
OrganizationChart
Hierarchical org chart — currently no equivalent.
TreeTable
Tree structure with table columns — currently only Tree exists.
KeyFilter
Input with character pattern restriction.
Steps
Numbered step indicator (different from full StepWizard).
Toolbar
Header with start/center/end slots.
Dock
macOS-style dock menu.
OverlayPanel
Click-anywhere overlay positioned to a target.
Sidebar (Kaeyros)
Slide-out drawer with directional positions.
ColorPicker (Kaeyros)
Rich color picker with HSL/RGB/HEX + alpha.
TabView
Tabs with built-in panel content.
Ready to use what's here today?
Download the entire Kaeyros component folder.