--- title: Building a Design System with React Web Components description: Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using... canonical: https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building a Design System with React Web Components | daily.dev og:description: Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using... og:url: https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0 og:image: https://api.daily.dev/og/posts/JqC6yOsx0.png og:image:alt: Building a Design System with React Web Components og:image:width: 1200 og:image:height: 630 og:locale: en --- [Community Picks](https://daily.dev/sources/community) [Read post](https://api.daily.dev/r/JqC6yOsx0) # [Building a Design System with React Web Components](https://api.daily.dev/r/JqC6yOsx0 "Go to post") Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using wrappers, polyfills and tooling to make them work in every context. The implementation turned out tougher than we anticipated but we're happy with the result. [#react](/tags/react "Check all #react posts")[#css](/tags/css "Check all #css posts")[#dom](/tags/dom "Check all #dom posts")[#design-systems](/tags/design-systems "Check all #design-systems posts")[#web-components](/tags/web-components "Check all #web-components posts")[#preact](/tags/preact "Check all #preact posts") Aug 16, 2023•1m read time•From [voorhoede.nl](https://api.daily.dev/r/JqC6yOsx0 "voorhoede.nl") [](https://api.daily.dev/r/JqC6yOsx0 "Go to post") 45 Impressions85 Upvotes2 Comments Comment Bookmark Copy Share your thoughtsPost [](https://daily.dev/sources/community) [Community Picks](https://daily.dev/sources/community "https://daily.dev/sources/community") Community Picks is a section on daily.dev where our community members share the most interesting and... Read more 9.9K Followers • 336.5K Upvotes [](https://daily.dev/anjapcodes) [Anja P](https://daily.dev/anjapcodes) [@anjapcodes](https://daily.dev/anjapcodes) Joined Nov 5\. 2022 51.4K < Self-taught front-end developer + coding bootcamp grad, tech enthusiast + design lover + poet /> #### Would you recommend this post? Copy link WhatsApp Facebook X New Squad Copy linkShare with your friends 85 2 ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building a Design System with React Web Components","url":"https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0"},"datePublished":"2023-08-16T10:06:29.775Z","dateModified":"2023-12-07T12:02:45.284Z","description":"Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a8cb5f8e9f0632fe0a79b5a2371eaac9?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a8cb5f8e9f0632fe0a79b5a2371eaac9?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":85},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"react,css,dom,design-systems,web-components,preact","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"Building a Design System with React Web Components"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0","comment":[{"@type":"Comment","text":"Much interesting. Write react components without react Js bundle. Web components are amazing.","datePublished":"2023-08-17T00:53:13.941Z","url":"https://daily.dev/posts/JqC6yOsx0#c-ml0tZiSog","author":{"@type":"Person","name":"Awais Alwaisy","url":"https://daily.dev/alwaisy","image":"https://avatars.githubusercontent.com/u/102944304?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Great article…!! Thanks for sharing.","datePublished":"2023-08-18T06:00:29.792Z","url":"https://daily.dev/posts/JqC6yOsx0#c-r8pRz55Xo","author":{"@type":"Person","name":"Saanvi Sen","url":"https://daily.dev/saanvi_ts","image":"https://lh3.googleusercontent.com/a-/AOh14GhdmzKvLv9oEsDXfx9aV9olVXfKLk1iQssysWWe=s100"}}]} ```