{"id":44291,"date":"2024-03-15T04:42:32","date_gmt":"2024-03-15T11:42:32","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=44291"},"modified":"2024-08-13T05:44:37","modified_gmt":"2024-08-13T12:44:37","slug":"react-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/","title":{"rendered":"React Design System \u2013 Where to Start?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system-1024x512.png\" alt=\"React design system\" class=\"wp-image-44292\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Building a React design system from scratch requires careful planning and consideration. Input from multiple departments and stakeholders is crucial for creating a component library that serves the organization and its end users.<\/p>\n\n\n\n<p>This article is an introduction to React design systems and how to approach component development, documentation, governance, design tools, and more. We also have a <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">step-by-step guide to building a design system<\/a> which covers 12 essential topics.<\/p>\n\n\n\n<p>Bring UI components to UXPin and create well-designed prototypes based on your React design system. Speed up your development by building apps 10x faster. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <h3 class=\"discover-merge__heading\">Design UI with code-backed components.<\/h3>\n            <p class=\"discover-merge__text\">Use the same components in design as in development. Keep UI consistency at scale.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Try UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is a React Design System?<\/h2>\n\n\n\n<p>A React Design System is a collection of reusable UI components and guidelines built specifically for use with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-react-works\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a>, a popular JavaScript library for building user interfaces. It encompasses a set of pre-designed, customizable components such as buttons, forms, navigation bars, cards, and more, along with guidelines for their usage and implementation within React applications.<\/p>\n\n\n\n<p>The main purpose of a React Design System is to promote consistency, efficiency, and scalability in UI development by providing a unified set of components and design patterns that can be easily reused across projects. By leveraging a React Design System, developers can streamline the development process, reduce code duplication, and ensure a cohesive and polished look and feel across their applications.<\/p>\n\n\n\n<p>Key components of a React Design System typically include:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Reusable Components<\/strong>: A library of React components that encapsulate common UI patterns and functionalities, such as input fields, dropdown menus, modals, and tabs.<\/li>\n\n\n\n<li><strong>Design Guidelines<\/strong>: Clear documentation and guidelines on how to use each component, including information on props, styling options, accessibility considerations, and best practices for integration within React applications.<\/li>\n\n\n\n<li><strong>Theming and Customization<\/strong>: Support for theming and customization, allowing developers to easily adapt the design system to match their brand identity and design requirements.<\/li>\n\n\n\n<li><strong>Responsive Design<\/strong>: Components designed to be responsive and adaptable to different screen sizes and devices, ensuring a consistent user experience across desktop, tablet, and mobile platforms.<\/li>\n\n\n\n<li><strong>Accessibility<\/strong>: Considerations for accessibility, with components designed to meet accessibility standards and guidelines, ensuring that applications built with the design system are usable by all users, including those with disabilities.<\/li>\n<\/ol>\n\n\n\n<p>Overall, a React Design System provides a solid foundation for building React applications, enabling developers to create consistent, high-quality user interfaces with minimal effort. It promotes collaboration, efficiency, and maintainability, making it an invaluable tool for teams working on React-based projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-a-react-design-system\">The Benefits of a React Design System<\/h2>\n\n\n\n<p>There are many benefits to using or building a React design system. React&#8217;s component-driven development approach makes it the perfect modular-style UI library for design systems. Front-end developers can strip React components down to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">atoms<\/a> and combine these to create new <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI elements<\/a>, patterns, and templates.<\/p>\n\n\n\n<p>React is one of the most widely used UI libraries, which offers many benefits for building design systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A big community of developers to ask questions and solve problems<\/li>\n\n\n\n<li>An abundance of Javascript tools and integrations<\/li>\n\n\n\n<li>Many <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">well-established design systems<\/a> for inspiration<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-which-companies-use-react-design-systems\">Which companies use React design systems?<\/h2>\n\n\n\n<p>Here is a short list of companies using React for their design systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/instacart\/Snacks\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Instacart&#8217;s Snacks<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Shopify\/polaris\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Shopify Polaris<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/atlassian.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Atlassian Design System<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/salesforce-ux\/design-system\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Salesforce Lightning<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/carbon-design-system\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">IBM&#8217;s Carbon Design System<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft&#8217;s Fluent UI<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mui\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a> (Material UI)\u2013built on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google&#8217;s Material Design<\/a><\/li>\n<\/ul>\n\n\n\n<p>We recommend checking out these design systems to learn about component syntax, documentation, guidelines, and other design system factors.<\/p>\n\n\n\n<p><a href=\"https:\/\/adele.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check out Adele<\/a> for more design system inspiration. It&#8217;s a repository of publicly available design systems and pattern libraries with links to GitHub repos to download and analyze.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-react-design-system-fundamentals\">React Design System Fundamentals<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-components.png\" alt=\"design system components\" class=\"wp-image-32623\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-understanding-atomic-design-principles\">Understanding Atomic Design Principles<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design<\/a> is a system created by Brad Frost where he organizes UI elements into five categories:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Atoms: <\/strong>foundational UI elements you cannot break down further\u2013e.g., HTML tags, fonts, buttons, animations, and color palettes.<\/li>\n\n\n\n<li><strong>Molecules:<\/strong> groups of atoms create components that serve a specific function or purpose. e.g., search input, nav links, dropdown menu, etc.<\/li>\n\n\n\n<li><strong>Organisms:<\/strong> Complex UI patterns that combine to create user interfaces. e.g., a header nav bar, footer, image carousel, etc.<\/li>\n\n\n\n<li><strong>Templates:<\/strong> represent a complete user interface with multiple organisms working together. e.g., a dashboard, news feed, chat UI, etc.<\/li>\n\n\n\n<li><strong>Pages:<\/strong> represent the different instances of the template and how content changes within the screen\u2013for example, refreshing content in a newsfeed or receiving a message through chat.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Why is Atomic Design important for React design systems?&nbsp;<\/h4>\n\n\n\n<p>The Atomic Design methodology enables you to leverage React&#8217;s modularity and reusability benefits. By approaching a design system as a sum of many atoms (or Lego pieces), it&#8217;s easier to develop a flexible, scalable UI library that can adapt and evolve with your product.<\/p>\n\n\n\n<p>The design system team can build new components and patterns much quicker by combining atoms and molecules. This modular approach also makes building one-off solutions easier and more cost-effective because it&#8217;s a matter of combining what you have rather than developing from scratch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-role-of-components-in-a-react-design-system\">The role of components in a React design system<\/h3>\n\n\n\n<p>React components are the building blocks that help ensure consistency, reusability, and maintainability across user interfaces and apps. These UI elements serve many vital purposes, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Modularity:<\/strong> React components are modular by design, making it easy to combine, reuse, and manage the UI library.<\/li>\n\n\n\n<li><strong>Consistency:<\/strong> React&#8217;s effortless reusability enables developers to build design principles, styles, and interactions into each component and recall it anywhere in the application.<\/li>\n\n\n\n<li><strong>Reusability:<\/strong> Developers can leverage a UI library of reusable components to save time and resources when developing new products. This reusability also reduces errors and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">technical debt<\/a> because devs don&#8217;t have to write code from scratch.<\/li>\n\n\n\n<li><strong>Customizability:<\/strong> developers can easily customize specific components while still adhering to design guidelines or affecting the UI library, allowing for flexibility when necessary.<\/li>\n\n\n\n<li><strong>Maintainability: <\/strong>With components stored in a centralized repository, developers can push updates and bug fixes from one place, making it easy to maintain and improve the design system and its products.<\/li>\n\n\n\n<li><strong>Scalability:<\/strong> Engineers can extend and adapt React components to evolve with products and new technology.<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> Developers can incorporate foundational accessibility standards at the component level, making it easier to implement product-wide.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-importance-of-using-design-tokens\">The importance of using design tokens<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design tokens<\/a> incorporate the core values of a React design system. These tokens contain properties such as colors, typography, spacing, sizing, states, interactivity, and more to maintain a consistent design language <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-platform-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">across multiple platforms, devices, and operating systems<\/a>.<\/p>\n\n\n\n<p>A design token can contain many values for multiple platforms. For example, UXPin&#8217;s homepage uses yellow for CTAs. The hex code for this yellow is #FCC821, which you can represent in several ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HEX: #FCC821<\/li>\n\n\n\n<li>RGB (CSS): rgb(252, 200, 33)<\/li>\n\n\n\n<li>RGBA: rgba(252, 200, 33, 1)<\/li>\n\n\n\n<li>Octal (Android\/Flutter): 77144041<\/li>\n<\/ul>\n\n\n\n<p>We can encapsulate all four values under one design token:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cta-background-primary<\/li>\n<\/ul>\n\n\n\n<p>So, if you&#8217;re implementing this color in any platform, you use the token instead of the code. Design tokens also make cross-functional collaboration easier because everyone uses the same language rather than one team referencing the HEX, another the RGB, and another the octal\u2013<em>which can get confusing and lead to errors<\/em>.<\/p>\n\n\n\n<p>Design tokens also allow the design system team to implement product-wide modifications simply by changing the properties in the token file. For example, the team can change the <em>cta-background-primary<\/em> design token from yellow to blue across the product ecosystem by adjusting the four codes in one place rather than updating every instance or stylesheet individually.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-getting-started-with-a-react-design-system\">Getting Started with a React Design System<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-atomic-library-components.png\" alt=\"design system atomic library components\" class=\"wp-image-32669\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-atomic-library-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-atomic-library-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>On the surface, a design system appears simple. But, in reality, these UI libraries are complex organisms with many moving parts. Here are some things to consider when planning your React design system.<\/p>\n\n\n\n<p>These factors will lay the foundation for your design system&#8217;s governance protocols and procedures. For this reason, it&#8217;s essential to document every stage of this early decision-making process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mono-repo-vs-poly-repo-repositories\">Mono-repo vs. poly-repo repositories<\/h3>\n\n\n\n<p>Decide whether to use a single repository (mono-repo) or multiple repositories (poly-repo) for your design system&#8217;s React component library.<\/p>\n\n\n\n<p>Mono-repos simplify dependency management and make it easier to work on multiple packages simultaneously. Poly-repos offer more modularity and isolation between packages, making it easier to maintain and use individual components independently.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.accenture.com\/us-en\/blogs\/software-engineering-blog\/how-to-choose-between-mono-repo-and-poly-repo\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Accenture shares the pros and cons of using mono vs. poly-repos<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-component-organization\">Component organization<\/h3>\n\n\n\n<p>Organize your component library in a way that makes the most sense to your product and team. For example, you can group components by functionality, domain, or Atomic Design\u2013<a href=\"https:\/\/mui.com\/material-ui\/react-autocomplete\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI organizes its UI library by functionality<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Inputs<\/strong>: Button, Switch, Text Field, etc.<\/li>\n\n\n\n<li><strong>Navigation<\/strong>: Drawer, Menu, Pagination, etc.<\/li>\n\n\n\n<li><strong>Layouts<\/strong>: Box, Container, Grid, etc.<\/li>\n\n\n\n<li><strong>Data Display<\/strong>: Avatar, Icons, List, etc.<\/li>\n<\/ul>\n\n\n\n<p>No matter how you categorize these components, each must have its own source code, styles, tests, and documentation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-token-management\">Design token management<\/h3>\n\n\n\n<p><a href=\"https:\/\/bit.dev\/blog\/design-tokens-in-components-with-react-and-bit-l28qlxq6\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Centralize design token management<\/a> in a dedicated folder or package controlled by the design system team. This centralized management helps facilitate better maintenance and governance while simplifying changes and updates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-theming-and-customization\">Theming and customization<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-theming\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design system theming<\/a> and customization are vital for modern product development, typically requiring at least two themes, light and dark modes. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Multi-brand design systems<\/a> require greater customization and flexibility, so you must consider these factors before developing.<\/p>\n\n\n\n<p>Check out <a href=\"https:\/\/css-tricks.com\/theming-and-theme-switching-with-react-and-styled-components\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>&#8220;Theming and Theme Switching with React and styled-components&#8221;<\/em> from CSS Tricks<\/a> for details on how to set up themes for React libraries.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-documentation\">Documentation<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design system documentation<\/a> is vital for successful adoption and consistent implementation. The docs must include your design language, guidelines (content, design, code, accessibility, etc.), style guide, use cases, code examples, tools, and other critical information.<\/p>\n\n\n\n<p>A tool like <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Storybook<\/a> can help centralize your design system&#8217;s documentation management and updates. You can <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">sync your Storybook to UXPin using Merge<\/a> and create a single source of truth across design and development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-testing\">Testing<\/h3>\n\n\n\n<p>Plan a structure for managing and organizing your component tests\u2013<em>another reason to consider Storybook<\/em>. Storybook offers <a href=\"https:\/\/storybook.js.org\/docs\/react\/writing-tests\/introduction\" target=\"_blank\" rel=\"noreferrer noopener\">built-in component testing<\/a> automation with multiple bug-prevention tests, including visual, interaction, accessibility, snapshot, and more.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-versioning-and-release-management\">Versioning and release management<\/h3>\n\n\n\n<p>Establish your <a href=\"https:\/\/storybook.js.org\/tutorials\/design-systems-for-developers\/react\/en\/distribute\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React library&#8217;s versioning strategy and release management process<\/a> to ensure your design system remains updated and compatible with your products.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-tools\">Design tools<\/h3>\n\n\n\n<p>Designers will need access to your React design system for prototyping and testing. A common strategy is to use vector-based tools, but this means updating and maintaining two formats of your React design system:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The component library in the repository<\/li>\n\n\n\n<li>UI kits for design teams<\/li>\n<\/ul>\n\n\n\n<p>With UXPin Merge, you can import your React library into UXPin&#8217;s design editor so designers and engineers use the exact same UI components. There are a couple of options for syncing code components. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about them and discover UXPin Merge<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">Try UXPin Merge<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Building a React design system from scratch requires careful planning and consideration. Input from multiple departments and stakeholders is crucial for creating a component library that serves the organization and its end users. This article is an introduction to React design systems and how to approach component development, documentation, governance, design tools, and more. We<\/p>\n","protected":false},"author":3,"featured_media":44292,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,199,174],"tags":[],"class_list":["post-44291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-systems","category-enterprise-ux"],"yoast_title":"","yoast_metadesc":"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>React Design System \u2013 Where to Start? | UXPin<\/title>\n<meta name=\"description\" content=\"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Design System \u2013 Where to Start?\" \/>\n<meta property=\"og:description\" content=\"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T11:42:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-13T12:44:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"React Design System \u2013 Where to Start?\",\"datePublished\":\"2024-03-15T11:42:32+00:00\",\"dateModified\":\"2024-08-13T12:44:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/\"},\"wordCount\":1770,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/React-design-system.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Systems\",\"Enterprise UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/\",\"name\":\"React Design System \u2013 Where to Start? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/React-design-system.png\",\"datePublished\":\"2024-03-15T11:42:32+00:00\",\"dateModified\":\"2024-08-13T12:44:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/React-design-system.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/React-design-system.png\",\"width\":1200,\"height\":600,\"caption\":\"React design system\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/react-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Design System \u2013 Where to Start?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Design System \u2013 Where to Start? | UXPin","description":"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/","og_locale":"en_US","og_type":"article","og_title":"React Design System \u2013 Where to Start?","og_description":"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2024-03-15T11:42:32+00:00","article_modified_time":"2024-08-13T12:44:37+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"React Design System \u2013 Where to Start?","datePublished":"2024-03-15T11:42:32+00:00","dateModified":"2024-08-13T12:44:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/"},"wordCount":1770,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png","articleSection":["Blog","Component-Driven Prototyping","Design Systems","Enterprise UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/","name":"React Design System \u2013 Where to Start? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png","datePublished":"2024-03-15T11:42:32+00:00","dateModified":"2024-08-13T12:44:37+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"New to design systems? Build one which can be translated from code to design and the other way round. Learn about React design systems.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/React-design-system.png","width":1200,"height":600,"caption":"React design system"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"React Design System \u2013 Where to Start?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=44291"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44291\/revisions"}],"predecessor-version":[{"id":54113,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44291\/revisions\/54113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/44292"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=44291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=44291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=44291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}