Component Library for a European Fintech Platform

  • Services:
  • Industries: Fintech
  • Engagement: Build
  • Timeline: Q1-Q2 2024

About the project

A European Series-B fintech with eight product teams came to us after eighteen months of parallel UI growth had produced three incompatible button styles and no shared token system. We built a component library on shadcn and Radix as the new shared foundation, shipped it to all teams inside eight weeks, and reduced duplicated UI code by roughly 60%. This component library case study covers the architecture decisions, token pipeline, and rollout approach that made the transition stick.

Background

The fintech had scaled quickly after a Series-A fundraise, hiring four additional product teams over fourteen months. Each team chose its own component approach. By the time the Series-B closed, the codebase held three separate date-picker implementations, two modal patterns, and no shared color token system. Accessibility compliance for WCAG 2.1 AA was inconsistent across surfaces. The engineering leads estimated each cross-team design change required coordinating four to six separate PRs. That coordination cost was slowing the release cadence visibly.

Build your component library with Alpina Tech
Profile images
We help growing product teams replace fragmented UI code with a shared, accessible component library they can ship from immediately.

What we built

A component library case study grounded in shadcn and Radix primitives, a CSS token pipeline, Storybook documentation, and a phased rollout across eight teams.

Shared token system Icon

Shared token system

We defined a single set of color, spacing, and typography tokens in CSS custom properties, linked to the design tool via a CI-driven export step. A designer can change a brand color once and the update propagates to every component surface on the next build.

Accessible Radix primitives Icon

Accessible Radix primitives

Every interactive component uses Radix UI primitives for focus management, keyboard navigation, and ARIA semantics. The fintech reached WCAG 2.1 AA compliance on the migrated surfaces without each team writing separate accessibility logic.

Storybook documentation Icon

Storybook documentation

Each component ships with a Storybook story covering its default state, all variants, and edge cases. The documentation site reduced the time a new engineer needs to find and use the correct component from a team channel question to a thirty-second search.

Codemod migration path Icon

Codemod migration path

We wrote codemods that replaced the most common legacy import patterns across each team repo automatically. The average team completed its highest-priority surface migration in three days, not three sprints.

Takeaway

This component library case study shows what a focused eight-week build produces for a fintech that has outgrown ad-hoc UI decisions. The key was starting with the token layer and a clear component priority list before writing any code. Radix handled the accessibility foundation so teams did not duplicate that work. Shipping in batches meant eight teams kept releasing features while the migration was in progress. We bring the same phased, audit-first approach to any product org that needs a shared design system without a six-month rewrite.

Trusted by Businesses Worldwide

See what our clients say about working with Alpina Tech

ShadcnReact.jsReact +12

Working with Alpina Tech on a headless CMS project built with Strapi, Node.js, and Next.js was a great experience. His deep understanding of modern frontend frameworks, API development, and server-side rendering (SSR) ensured a smooth and efficient development process. Alpina Tec...

Working with Alpina Tech on a headless CMS project built with Strapi, Node.js, and Next.js was a great experience. His deep understanding of modern frontend frameworks, API development, and server-side rendering (SSR) ensured a smooth and efficient development process. Alpina Tech showcased excellent React.js and Next.js skills, implementing dynamic UI components with optimal performance and seamless API integrations. His expertise in RESTful and GraphQL APIs, combined with a solid grasp of backend development in Node.js, made the project highly scalable and maintainable. Additionally, his proficiency in frontend optimization, component-based architecture, and responsive design ensured that the final product was both fast and user-friendly. I highly recommend Alpina Tech to anyone looking for a skilled full-stack developer who excels in headless CMS solutions, Next.js development, and API-driven web applications.

5.0 / 5
HTMLCSSHugo +5

Alpina tech did a good job during the discovery phase of our project

4.9 / 5
StrapiNext.jsReact +9

I had the opportunity to work with Alpina Tech and the experience was very positive. He successfully achieved the goals set, demonstrating talent and commitment at every stage of the work. Moreover, he was always attentive to my instructions and consistently available, which grea...

I had the opportunity to work with Alpina Tech and the experience was very positive. He successfully achieved the goals set, demonstrating talent and commitment at every stage of the work. Moreover, he was always attentive to my instructions and consistently available, which greatly facilitated communication and the development of the project. I highly recommend his work without hesitation.

5.0 / 5
Next.jsReactJavaScript +5

Alpina Tech is not only a very talented dev, but he's a fantastic partner who has a rich business acumen and is quick to complete anything you throw at him. He knocked out work in a single day that I wasn't expecting for a week. Will definitely work with him again.

5.0 / 5
React NativeReactNode.js +7

Alpina Tech always responded promptly and got a lot done in the limited environment we had. If things weren’t clear, he’d message and make sure he has the scope right. I highly recommend him for full stack development.

5.0 / 5
UX/UI DesignFigmaLanding Pages +4

I had the opportunity to work with Alpina Tech on the design of several landing pages and a UI kit, and I couldn’t be happier with the results. He managed to deliver high-quality designs in a very short time. The landing pages were beautifully crafted, and the UI kit was exactly...

I had the opportunity to work with Alpina Tech on the design of several landing pages and a UI kit, and I couldn’t be happier with the results. He managed to deliver high-quality designs in a very short time. The landing pages were beautifully crafted, and the UI kit was exactly what we needed to streamline the project. On top of that, he generously created ad banners at no extra cost, which was a great bonus. Throughout the entire process, communication was smooth, and he was always quick to make adjustments based on my feedback. I’m thrilled with the final outcome and would definitely love to work with him again. Highly recommend!

5.0 / 5
SwiftSwiftUIUIKit +8

We worked with Alpina Tech, a top-tier Apple ecosystem developer specializing in Swift, SwiftUI, UIKit, and Combine. Delivered a seamless, high-performance app with Core Data, iCloud Sync, AVKit, MapKit, and Push Notifications. Optimized for iOS, watchOS, and macOS, ensuring smoo...

We worked with Alpina Tech, a top-tier Apple ecosystem developer specializing in Swift, SwiftUI, UIKit, and Combine. Delivered a seamless, high-performance app with Core Data, iCloud Sync, AVKit, MapKit, and Push Notifications. Optimized for iOS, watchOS, and macOS, ensuring smooth performance and App Store compliance. We were very happy with the outcome of the app we commissioned to develop and look forward to working again with this developer.

5.0 / 5
JAMstackHugoNext.js +10

I hired Alpina Tech to build a custom Hugo website. He was a pleasure to work with. He took the time to understand exactly what I wanted at the beginning of the project, and he then proposed a much better way of achieving that. He communicated regularly, provided clear and timely...

I hired Alpina Tech to build a custom Hugo website. He was a pleasure to work with. He took the time to understand exactly what I wanted at the beginning of the project, and he then proposed a much better way of achieving that. He communicated regularly, provided clear and timely updates, offered ongoing support with my website, and took a 'customer first' approach. Overall, I'm really happy with the website and I would definitely work with Alpina Tech again if I need more web development in the future.

5.0 / 5
Next.jsReactSanity +7

Alpina Tech was incredibly helpful and a pleasure to work with! He not only assisted with improving the SEO of my startup but also fixed a challenging Sanity bug with great patience and professionalism. His expertise and attention to detail were invaluable, and he did an excellen...

Alpina Tech was incredibly helpful and a pleasure to work with! He not only assisted with improving the SEO of my startup but also fixed a challenging Sanity bug with great patience and professionalism. His expertise and attention to detail were invaluable, and he did an excellent job overall. Highly recommended!

4.9 / 5
UI/UX DesignFigmaWeb Design +3

I had the pleasure of working with Alpina Tech on the UI/UX design for my public website, and I am extremely impressed with his work. He significantly expanded and improved upon the original design I already had, seamlessly integrating enhancements that perfectly matched the exis...

I had the pleasure of working with Alpina Tech on the UI/UX design for my public website, and I am extremely impressed with his work. He significantly expanded and improved upon the original design I already had, seamlessly integrating enhancements that perfectly matched the existing style. His ability to develop great-looking features while staying true to the original concept was remarkable. Communication with Alpina Tech was excellent throughout the project. He was responsive and accommodating, making several tweaks based on my requests to ensure everything was just right. I am thoroughly satisfied with the outcome and wouldn't hesitate to collaborate with him on future projects. Highly recommend!

5.0 / 5
JekyllJAMstackHTML +5

Working with Alpina Tech was a great experience. He is knowledgeable and delivers high-quality work. The agency boasts a wide range of talent, making it a good choice for various projects. Communication was consistently excellent, and Alpina Tech ensured that every aspect of the...

Working with Alpina Tech was a great experience. He is knowledgeable and delivers high-quality work. The agency boasts a wide range of talent, making it a good choice for various projects. Communication was consistently excellent, and Alpina Tech ensured that every aspect of the project worked as expected. The work was completed on time, which was greatly appreciated. I highly recommend both Alpina Tech and the agency for future collaborations.

5.0 / 5
UI/UX DesignFigmaLanding Pages +4

Alpina Tech and the team have completed the design quickly and it looks great. They are very responsive and were able to quickly make adjustments that I have requested.

5.0 / 5
iOSSwiftSwiftUI +3

Alpina Tech is awesome, he fixed a complicated bug on VPN iOS app in two hours.

5.0 / 5
React NativeReactiOS +5

Tyler V.

5.0 / 5
HugoJAMstackHTML +3

Alpina Tech did an excellent job guiding us through the process and helping us achieve our project goals.

5.0 / 5
GitHub PagesHTMLCSS +4

Alpina Tech helped us launch a research project website. Thank you for being available on short notice!

5.0 / 5
Technical SEOWeb StrategyManagement

I had the pleasure of working with Alpina Tech on leadership and technical projects. The team is highly motivated, strategically minded, and has exceptional technical SEO expertise. Their approach significantly boosted our digital presence. I highly recommend Alpina Tech for engi...

I had the pleasure of working with Alpina Tech on leadership and technical projects. The team is highly motivated, strategically minded, and has exceptional technical SEO expertise. Their approach significantly boosted our digital presence. I highly recommend Alpina Tech for engineering and leadership-driven projects – a truly valuable partner.

5.0 / 5
HTMLCSSJavaScript +4

Alpina Tech demonstrates all the right qualities of a strong development team – deep frontend expertise, great communication, and a proactive work attitude. A reliable partner for any technical project.

5.0 / 5
Web DevelopmentFrontendHTML +3

Alpina Tech is a very professional and reliable team. Working together on web projects was extremely successful. The team showed strong technical knowledge and excellent organizational skills.

5.0 / 5

Let's just
{ Make it together! }

Learn how our services can improve your business processes, customer experience, and drive growth.

Schedule a meeting

Get a lightning-fast, SEO-optimized, high-performance web app for:

  • • SaaS platforms
  • • Marketplaces
  • • Marketing websites
  • • News portals
  • • Catalogs & listings

Meeting agenda

  1. Define goals & product scope
  2. Quick technical SEO check-up
  3. Outline your development roadmap
30 min
Web conferencing details provided upon confirmation.

Meet our team

Team member 1Team member 2Team member 3Team member 4Team member 5Team member 6

Success!

Form was sent to our team. We will contact you soon.

Get Your Estimate

Tell us about your project and we'll get back to you with an estimate.

Your Name
Solutions
Contact Email
Estimated Budget
Attach File

Schedule a meeting

Get a lightning-fast, SEO-optimized, high-performance web app for:

  • • SaaS platforms
  • • Marketplaces
  • • Marketing websites
  • • News portals
  • • Catalogs & listings

Meeting agenda

  1. Define goals & product scope
  2. Quick technical SEO check-up
  3. Outline your development roadmap
30 min
Web conferencing details provided upon confirmation.

Meet our team

Team member 1Team member 2Team member 3Team member 4Team member 5Team member 6