Over 60 unused shadcn/ui components bloat the bundle #4

New issue

Closed

opened 2026-05-11 05:55:12 +00:00 by Mark · 0 comments

Mark commented

2026-05-11 05:55:12 +00:00

Owner

Description

The project currently includes 50+ shadcn/ui component files in src/components/ui/ (accordion, alert-dialog, alert, aspect-ratio, avatar, badge, breadcrumb, carousel, chart, checkbox, collapsible, command, context-menu, dialog, drawer, dropdown-menu, empty, field, form, hover-card, input-group, input-otp, input, item, kbd, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, spinner, switch, table, tabs, textarea, toggle-group, toggle, tooltip, etc.).

Of these, only a small subset are actually imported and used in the application — the rest are dead code that:

Increases bundle size (even if tree-shaken, they add to initial parse time)
Adds unnecessary dependencies (cmdk, vaul, input-otp, react-day-picker, recharts, etc.)
Causes lint warnings (8 errors from unused shadcn components)
Confuses new developers about what's actually available

Suggested Approach

Audit which components are actually used (search for import patterns)
Remove unused component files and their associated dependencies from package.json
Keep only: button, badge, card, input, label, form, select, separator, tooltip, avatar
Update components.json to track the smaller set

src/components/ui/ — 50+ component files
package.json — many unused dependencies (input-otp, recharts, cmdk, vaul, react-day-picker, etc.)
package-lock.json — bloated by unused transitive deps

## Description The project currently includes 50+ shadcn/ui component files in `src/components/ui/` (accordion, alert-dialog, alert, aspect-ratio, avatar, badge, breadcrumb, carousel, chart, checkbox, collapsible, command, context-menu, dialog, drawer, dropdown-menu, empty, field, form, hover-card, input-group, input-otp, input, item, kbd, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, spinner, switch, table, tabs, textarea, toggle-group, toggle, tooltip, etc.). Of these, only a small subset are actually imported and used in the application — the rest are dead code that: - Increases bundle size (even if tree-shaken, they add to initial parse time) - Adds unnecessary dependencies (cmdk, vaul, input-otp, react-day-picker, recharts, etc.) - Causes lint warnings (8 errors from unused shadcn components) - Confuses new developers about what's actually available ## Suggested Approach 1. Audit which components are actually used (search for import patterns) 2. Remove unused component files and their associated dependencies from `package.json` 3. Keep only: button, badge, card, input, label, form, select, separator, tooltip, avatar 4. Update `components.json` to track the smaller set ## Related Files - `src/components/ui/` — 50+ component files - `package.json` — many unused dependencies (input-otp, recharts, cmdk, vaul, react-day-picker, etc.) - `package-lock.json` — bloated by unused transitive deps