Our New UI: Migrating from Cloudscape to shadcn/ui
We completed a full redesign from AWS Cloudscape to shadcn/ui with Tailwind CSS. Here's why we made the change, the challenges we faced, and what we achieved.
Last month, we completed a complete redesign of the Echosaw web interface, migrating from AWS Cloudscape to shadcn/ui with Tailwind CSS. This wasn't just a visual refresh—it was a fundamental shift in our design system and component architecture. Here's the story of why we made the change, the challenges we faced, and the improvements we achieved.
Why We Left Cloudscape
Cloudscape served us well initially. As an AWS design system, it provided enterprise-grade components out of the box and aligned with our AWS-native infrastructure. However, as our product evolved, we ran into limitations:
- Limited customization — Cloudscape's opinionated design made it difficult to achieve the modern, polished aesthetic we wanted
- Heavy bundle size — The component library added significant JavaScript overhead
- Tight AWS coupling — Using an AWS-specific design system felt like overkill for a product that happens to run on AWS but isn't an AWS console
- Developer experience — The API felt dated compared to modern React component libraries
Why We Chose shadcn/ui
shadcn/ui emerged as the clear choice for several reasons:
- Built on Radix UI — Radix provides accessible, unstyled primitives as a foundation, ensuring we wouldn't sacrifice accessibility for aesthetics
- Tailwind CSS integration — Tailwind's utility-first approach aligned with our development philosophy and enabled rapid iteration
- Copy-paste components — Unlike traditional component libraries, shadcn/ui components are copied into your codebase, giving you full ownership and customization ability
- Modern aesthetics — The default design language is clean, minimal, and contemporary—exactly what we wanted
- Active community — The project has strong momentum and excellent documentation
The Migration Challenges
Migrating an entire application is never straightforward. Here are the key challenges we faced:
Component mapping — Cloudscape and shadcn/ui have different component philosophies. Cloudscape provides complex, opinionated components (like data tables with built-in pagination), while shadcn/ui offers simpler primitives that you compose. We had to rebuild several complex components from scratch. State management — Cloudscape components often managed their own internal state. shadcn/ui components are more controlled, requiring us to be more explicit about state management in our application code. Styling consistency — With Tailwind's utility classes, maintaining consistency required discipline. We established strict design tokens and used CSS variables for colors, spacing, and typography to ensure consistency across the application. Accessibility testing — While Radix UI primitives are accessible by default, our custom compositions required thorough testing with screen readers and keyboard navigation to ensure we maintained accessibility parity.Accessibility Improvements
The migration actually improved our accessibility posture. Radix UI's primitives include proper ARIA attributes, keyboard navigation, and focus management out of the box. We added tooltips to icon-only navigation elements, improved form labeling, and ensured proper color contrast ratios. The new design system makes it easier to build accessible components by default.
Before and After
The visual transformation is striking. The old Cloudscape interface felt functional but enterprise-heavy—dense information, conservative styling, and a distinct "AWS console" aesthetic. The new shadcn/ui interface is lighter, more modern, with generous whitespace, refined typography, and card-based layouts that make content breathe.
Beyond aesthetics, the new UI is faster (smaller bundle size), more responsive (better mobile experience), and more maintainable (we own the component code). The development experience is also improved—Tailwind's utility classes make styling faster and more predictable.
Design System Decisions
We established several design system principles during the migration:
- CSS variables for theming — All colors use CSS variables, making dark mode implementation straightforward (though we haven't shipped it yet)
- Consistent spacing scale — We use a 4px base unit for all spacing (4, 8, 12, 16, 20, 24px)
- Typography hierarchy — Clear heading scales with consistent line heights and letter spacing
- Component variants — We use class-variance-authority to manage component variants (primary, secondary, destructive, etc.)
The migration from Cloudscape to shadcn/ui was a significant investment, but it's already paying dividends. Our users get a more polished, modern experience, our developers work with a more flexible toolchain, and we have a design system that can evolve with our product. Sometimes, starting over is the best way to move forward.