var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),w=(i,e)=>{for(var o in e)a(i,o,{get:e[o],enumerable:!0})},r=(i,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!f.call(i,t)&&t!==o&&a(i,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return i};var y=(i,e,o)=>(o=i!=null?h(m(i)):{},r(e||!i||!i.__esModule?a(o,"default",{value:i,enumerable:!0}):o,i)),b=i=>r(a({},"__esModule",{value:!0}),i);var l=g((I,c)=>{c.exports=_jsx_runtime});var S={};w(S,{default:()=>k,frontmatter:()=>x});var n=y(l()),x={uid:"universal-design-system",title:"How to build a great universal design system",description:"Using React Native for Web and Tailwind CSS.",date:"2022-06-02",dateLastModified:"2022-09-25",tags:["tech","showtime","design system"]};function d(i){let e=Object.assign({blockquote:"blockquote",p:"p",a:"a",h1:"h1",span:"span",h2:"h2",strong:"strong",em:"em",div:"div",pre:"pre",code:"code",ul:"ul",li:"li",h3:"h3"},i.components),{Tweet:o}=e;return o||N("Tweet",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["This is an updated version of the ",(0,n.jsx)(e.a,{href:"/blog/archive/universal-design-system-first-edition",children:"previous post"}),`. You can also check the two complementary talks I gave at `,(0,n.jsx)(e.a,{href:"https://www.youtube.com/watch?v=CDl3EH3vUHA",children:"App.js Conf"})," and ",(0,n.jsx)(e.a,{href:"https://www.youtube.com/watch?v=sy4bRqMrGjc",children:"React Native London"}),`. This post is the most up-to-date resource at this time.`]}),` `]}),` `,(0,n.jsxs)(e.h1,{id:"how-to-build-a-great-universal-design-system",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#how-to-build-a-great-universal-design-system",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"How to build a great universal design system"]}),` `,(0,n.jsxs)(e.h2,{id:"using-react-native-for-web-and-tailwind-css",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#using-react-native-for-web-and-tailwind-css",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Using React Native for Web and Tailwind CSS."]}),` `,(0,n.jsx)(e.p,{children:'"Universal" and "design system" can mean different things so let me clarify:'}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Universal"}),`: that works on all platforms (Web, iOS, Android...), aka cross-platform or multi-platform (but `,(0,n.jsx)(e.em,{children:"supporting Web as a first-class citizen"}),")."]}),` `]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Design system"}),": a library of UI components that share a common design language (but ",(0,n.jsx)(e.em,{children:"not always"}),`). A good example is `,(0,n.jsx)(e.a,{href:"https://vercel.com/design",children:"Vercel's Geist"}),"."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"This code works on iOS, Android and Web:"}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"app/hello-world.tsx"}),(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { View } from "@showtime-xyz/universal.view" import { Text } from "@showtime-xyz/universal.text" export function HelloWorld() { return ( Hello, World! ) } `})}),` `,(0,n.jsx)(e.p,{children:"OK but that's an easy one. Here is a more advanced example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`// TODO: complex UX example. maybe show a real use-case from the Showtime app? `})}),` `,(0,n.jsxs)(e.p,{children:[`If you want to see this in action, you can check out the Showtime app on `,(0,n.jsx)(e.a,{href:"https://apps.apple.com/us/app/showtime-nft-social-network/id1606611688",children:"iOS"}),`, `,(0,n.jsx)(e.a,{href:"https://play.google.com/store/apps/details?id=io.showtime",children:"Android"}),` and `,(0,n.jsx)(e.a,{href:"https://showtime.xyz",children:"Web"}),"."]}),` `,(0,n.jsxs)(e.h1,{id:"why",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#why",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Why?"]}),` `,(0,n.jsx)(e.p,{children:"So... why would you want to build a universal app? And why do you need a design system?"}),` `,(0,n.jsx)(e.p,{children:`Building a universal app actually means building a better app. By using the best practices from both web and native, you are forced to create a very good app. And your mobile web app is better by default, because you created a great native app that also works perfectly on web.`}),` `,(0,n.jsx)(e.p,{children:"This is also a good move for your frontend team architecture."}),` `,(0,n.jsx)(e.p,{children:"We are experiencing this first-hand at Showtime:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"our code is easier to maintain"}),` `,(0,n.jsx)(e.li,{children:"our team moves faster,"}),` `,(0,n.jsx)(e.li,{children:"and each frontend engineer is incredibly impactful and productive"}),` `]}),` `,(0,n.jsxs)(e.h1,{id:"how",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#how",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"How?"]}),` `,(0,n.jsxs)(e.h3,{id:"using-universal-ui",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#using-universal-ui",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Using Universal UI"]}),` `,(0,n.jsx)(e.p,{children:"You can use Universal to build your own design system."}),` `,(0,n.jsxs)(e.p,{children:["The code is open source on ",(0,n.jsx)(e.a,{href:"https://github.com/showtime-xyz/showtime-frontend",children:"GitHub"}),` and on `,(0,n.jsx)(e.a,{href:"https://bit.cloud/showtime/universal",children:"Bit"}),`. You can install it, import it, fork it, contribute to it. Really, you are free to do anything you want.`]}),` `,(0,n.jsxs)(e.p,{children:[`The recommended way to do this would be to create a monorepo and put your design system in `,(0,n.jsx)(e.code,{children:"packages/design-system"}),`. You can then create your own components and/or import some from the `,(0,n.jsx)(e.code,{children:"@showtime-xyz/universal"})," packages."]}),` `,(0,n.jsxs)(e.h3,{id:"using-other-libraries",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#using-other-libraries",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Using other libraries"]}),` `,(0,n.jsxs)(e.p,{children:["You can also use ",(0,n.jsx)(e.code,{children:"nativewind"})," directly, or use ",(0,n.jsx)(e.code,{children:"tamagui"})," or ",(0,n.jsx)(e.code,{children:"nativebase"}),"."]}),` `,(0,n.jsxs)(e.h1,{id:"what",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#what",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"What?"]}),` `,(0,n.jsxs)(e.p,{children:["Google (Android and Flutter) has ",(0,n.jsx)(e.a,{href:"https://m3.material.io",children:"Material Design"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["Apple (iOS, ipadOS, macOS, and tvOS) has ",(0,n.jsx)(e.a,{href:"https://developer.apple.com/xcode/swiftui/",children:"SwiftUI"}),` and the `,(0,n.jsx)(e.a,{href:"https://developer.apple.com/design/human-interface-guidelines",children:"Human Interface Guidelines"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["React DOM has ",(0,n.jsx)(e.a,{href:"https://www.radix-ui.com",children:"Radix UI"}),`, `,(0,n.jsx)(e.a,{href:"https://headlessui.com",children:"Headless UI"}),", ",(0,n.jsx)(e.a,{href:"https://mui.com",children:"Material UI"}),"."]}),` `,(0,n.jsx)(e.p,{children:"And now React Native has Universal UI."}),` `,(0,n.jsx)(e.p,{children:`We aim to help you create your design system based on React Native components and Tailwind CSS.`}),` `,(0,n.jsx)(e.p,{children:`It helps you create a universal app that works on iOS, Android, and the Web. It works on mobile, tablet and desktop. It follows the native platform and screen size guidelines while unifying the UX so your users can have a great experience across all their devices.`}),` `,(0,n.jsxs)(e.h1,{id:"open-source",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#open-source",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Open-source"]}),` `,(0,n.jsxs)(e.p,{children:[`I learned to code by looking at code and fixing bugs while working on a private World of Warcraft server using open-source software (more on this in `,(0,n.jsx)(e.a,{href:"/blog/not-being-rich-made-me-more-curious",children:"Not being rich made me more curious, Chapter II"}),")."]}),` `,(0,n.jsx)(o,{id:"1557382883555385344"}),` `,(0,n.jsx)(e.p,{children:`I was 15 years old so I don't remember exactly what I did and how, but the TrinityCore GitHub repo was incredibly helpful. So now I want to pay it forward by making the Showtime universal app open to everyone. If you are new to this, I bet it will be very helpful to learn how to build your own universal app.`}),` `,(0,n.jsx)(e.p,{children:`So here it is: the Showtime frontend monorepo is now open source. You can learn how we created a universal React app with Expo and Next.js and Universal UI.`}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["GitHub: ",(0,n.jsx)(e.a,{href:"https://github.com/showtime-xyz/showtime-frontend",children:"github.com/showtime-xyz/showtime-frontend"})]}),` `,(0,n.jsxs)(e.li,{children:["Bit: ",(0,n.jsx)(e.a,{href:"https://bit.cloud/showtime/universal",children:"bit.cloud/showtime/universal"})]}),` `,(0,n.jsxs)(e.li,{children:["npm: ",(0,n.jsx)(e.a,{href:"https://npmjs.com/org/showtime-xyz",children:"npmjs.com/org/showtime-xyz"})]}),` `,(0,n.jsxs)(e.li,{children:["Storybook: ",(0,n.jsx)(e.a,{href:"https://universal.showtime.xyz",children:"universal.showtime.xyz"})]}),` `]}),` `,(0,n.jsxs)(e.h1,{id:"vision",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#vision",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Vision"]}),` `,(0,n.jsx)(e.p,{children:`This is not released as v1 yet because some of our components are styled. We are working on a new version that will be unstyled.`}),` `,(0,n.jsx)(o,{id:"1567446737702330369"}),` `,(0,n.jsxs)(e.h3,{id:"design",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#design",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Design"]}),` `,(0,n.jsx)(e.p,{children:`Our vision is to ship without styles, but with all the bricks you need to quickly style your app. This is why we are using Tailwind CSS.`}),` `,(0,n.jsxs)(e.p,{children:[`We don't apply any Tailwind utilities to our components ourselves, but we let you use a `,(0,n.jsx)(e.code,{children:"tw"})," prop to do so yourself."]}),` `,(0,n.jsx)(e.p,{children:`Design is not only about visual design. It's also the UX design and API design for example.`}),` `,(0,n.jsx)(e.p,{children:"We are opinionated on Tailwind and clean APIs while being un-opinionated on styling."}),` `,(0,n.jsxs)(e.h3,{id:"long-term",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#long-term",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Long-term"]}),` `,(0,n.jsx)(e.p,{children:`In the future, we might even create a marketplace where you can buy and sell Universal UI styled components based on Tailwind markup.`}),` `,(0,n.jsx)(e.p,{children:`So yes, you guessed it: I'll write another article "How to build a perfect universal design system" once we release v1.`}),` `,(0,n.jsxs)(e.h1,{id:"tailwind",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#tailwind",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Tailwind"]}),` `,(0,n.jsxs)(e.p,{children:[`As mentioned above, we are using Tailwind for styling and theming. We are building on top of `,(0,n.jsx)(e.a,{href:"https://github.com/marklawlor/nativewind",children:"NativeWind"}),`, a universal style system that output styles as CSS StyleSheet on web and StyleSheet.create on native. Using proper CSS on web is very important -- it lets you do server-side rendering.`]}),` `,(0,n.jsxs)(e.p,{children:["Shout out to ",(0,n.jsx)(e.a,{href:"https://github.com/marklawlor",children:"Mark Lawlor"})," for building NativeWind!"]}),` `,(0,n.jsx)(e.p,{children:`Tailwind is amazing for dark mode and responsive design. And you can easily copy paste styles from Tailwind.`}),` `,(0,n.jsxs)(e.h3,{id:"config",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#config",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Config"]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Pro tip #1: you can add ",(0,n.jsx)(e.code,{children:"tw"})," to ",(0,n.jsx)(e.code,{children:"Tailwind CSS: Class Attributes"}),` VS Code extension setting to get IntelliSense working!`]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["You should create a ",(0,n.jsx)(e.code,{children:"tailwind.config.js"}),` file for each of your apps: one for `,(0,n.jsx)(e.code,{children:"apps/expo"})," and one for ",(0,n.jsx)(e.code,{children:"apps/next"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["Be very careful with your config for ",(0,n.jsx)(e.code,{children:"apps/expo"}),`. The error handling is not great and you might get in trouble if you don't know what you're doing.`]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Pro tip #2: you can use ",(0,n.jsx)(e.code,{children:"prettier-plugin-tailwindcss"}),` to format your Tailwind utilities.`]}),` `]}),` `,(0,n.jsxs)(e.h1,{id:"universal-ui",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#universal-ui",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Universal UI"]}),` `,(0,n.jsx)(e.p,{children:`We are shipping lots of high-quality components that works on all platforms (iOS, Android and Web) and that works with Expo and Next.js out of the box.`}),` `,(0,n.jsxs)(e.p,{children:["You can use ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:"