How Framework Sprawl Happens
Year 1: "We'll use Material UI, it has everything."
Year 2: "This new feature needs Radix for the dropdown."
Year 3: "The contractor used Chakra, we'll migrate later."
Year 4: "Why is our bundle 2MB?"
See it in action
buoy-cli
$
âš“ Analyzing framework usage...
âš Found 3 UI libraries in use
Libraries detected:
├─ @radix-ui/react-* 47 imports (primary)
├─ @chakra-ui/react 12 imports (secondary)
└─ @mui/material 3 imports (legacy?)
Component overlap:
├─ Button: 3 implementations (Radix, Chakra, MUI)
├─ Modal: 2 implementations (Radix, Chakra)
└─ Select: 2 implementations (Radix, MUI)
Recommendation: Consolidate to Radix UI
Types of Sprawl We Detect
Multiple UI Libraries
Using Radix AND Chakra AND MUI in the same project
Impact: Massive bundle bloat, inconsistent UX
Framework Mixing
React components alongside jQuery or vanilla JS
Impact: Hydration issues, maintenance nightmare
CSS-in-JS Sprawl
Styled-components, Emotion, AND Tailwind together
Impact: Conflicting styles, specificity wars
State Management Chaos
Redux + MobX + Zustand + Context in one app
Impact: Unpredictable state, debugging hell
The Bundle Size Impact
@radix-ui (headless) ~45KB gzipped
@chakra-ui/react ~120KB gzipped
@mui/material ~300KB gzipped
Using all three = ~465KB just for UI components.
Pick one = ~45-120KB depending on choice.
Plan Your Migration
buoy sprawl report --output json
{
"primary": {
"library": "@radix-ui",
"imports": 47,
"recommendation": "Keep as primary"
},
"secondary": [
{
"library": "@chakra-ui/react",
"imports": 12,
"components": ["Button", "Modal", "Toast"],
"migrationEffort": "medium",
"recommendation": "Replace with Radix equivalents"
},
{
"library": "@mui/material",
"imports": 3,
"components": ["DataGrid"],
"migrationEffort": "low",
"recommendation": "Replace with @tanstack/table + Radix"
}
]
}