Design system and component library · Build
One component library for web and React Native
If your web and mobile apps have started to look different, we write each component once for both. Our own system has 74 components and 678 tests.
EngagementHourly · remote
Hours9–18 CET · 4 h overlap
StackTypeScript · React · Next.js
Proof3 case studies
The service in 4 parts
01 · Who it’s for
A team whose web app and mobile app have started to look and behave differently, or a team about to build its third set of buttons from scratch.
02 · What we’ve built
- Our own cross-platform design system: 74 components, 678 tests and an 81-page catalog generated from the source code. Its login form is a single file that a Next.js app, a Vite app and a React Native app all use unchanged.Case study 01 →
- More than 200 components in a monorepo for a US truck-services marketplace, built while the product stayed live and used by both its dashboards and its mobile app.Case study 04 →
- A library of about a hundred components, built in two months for a white-label construction product with more than thirty brands. It works with any framework and is organized by size, type and kind, so developers can find what they need.Case study 02 →
- We measured one page written three ways. The design system version was 44% smaller than the version hand-written with styled-components, and it had 13 hardcoded design values where the hand-written one had 197.Blog post →
03 · How we work
01 · PLATFORM CODE IN PRIMITIVESCode that differs between web and mobile goes only into the lowest-level components, such as boxes, text and inputs. Larger patterns may not have a separate native version, and a CI check fails if someone adds one.
02 · CATALOG FROM THE SOURCEThe component catalog and its props tables are generated from the code. If a component has no catalog entry, the build stops, so the documentation can’t fall behind.
03 · AN EARLY REVIEWWe review the library when it has about 30 components. On our own system the review came at 75 and found 188 issues, and their three causes were already there at 30, when fixing them would have cost far less.
04 · Stack
TypeScriptReactNext.jsReact NativeVitestyled-componentspnpm workspacescustom ESLint rules
Proof
Where we’ve done this before
Case study 01 · Platforms74 / 678Our own cross-platform design system: 74 components, 678 tests and an 81-page catalog generated from the source code. Its login form is a single file that a Next.js app, a Vite app and a React Native app all use unchanged.Read the case study →Case study 04 · MarketplaceZero outagesMore than 200 components in a monorepo for a US truck-services marketplace, built while the product stayed live and used by both its dashboards and its mobile app.Read the case study →Case study 02 · Platforms~100 / 30+A library of about a hundred components, built in two months for a white-label construction product with more than thirty brands. It works with any framework and is organized by size, type and kind, so developers can find what they need.Read the case study →WritingA half-built design system made our page bigger than plain HTMLWe measured one page written three ways. The design system version was 44% smaller than the version hand-written with styled-components, and it had 13 hardcoded design values where the hand-written one had 197.Read the post →
FAQ
Questions about this service
Yes. About half of the components in our own system are a single file for both platforms. In the rest, the difference comes down to one primitive, such as a div that becomes a View, and nothing built on top of it has to know.
In the port of our marketing page, the phone reused 91% of what it draws without a change. The web-only part was confined to one layout file, which followed from keeping the platform split in the primitives.
No. We built the marketplace library inside a product that kept running.
Not on the page we measured. The version with a hand-written partial system was the largest of the three, bigger even than plain HTML, because it first had to rebuild the containers, headings, buttons and cards that a design system already provides.
Next step
Describe the problem and we’ll come back with three options.
The first call takes 30 minutes, and you’re under no obligation.