{"id":5751,"date":"2017-12-08T16:11:37","date_gmt":"2017-12-08T16:11:37","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=5751\/"},"modified":"2026-08-14T17:23:20","modified_gmt":"2026-08-14T17:23:20","slug":"atomic-design-react","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/","title":{"rendered":"Atomic Design with React"},"content":{"rendered":"<p>How one methodology allowed me to create a great design system from scratch and made me a better developer, with principles of componentization, hierarchies and reuse of code.<\/p>\n<p><!--more--><\/p>\n<p><span style=\"font-weight: 400\">I have recently had the opportunity to work on a new product from scratch made in React and PWA with a well-crafted and componentized UI at Cheesecake. However, when we discussed with the whole team the <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/building-app-phase-3-product-development\/\">best way to approach the development<\/a>, we ended up having the same old problems that have happened in most past projects, such as:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Lack of a styleguide for components;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Lack of precision in estimating development time;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Great amount of setup time for developers;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Inconsistency between components and view;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Repeated code;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Side effects;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Very specific components for each page;<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">We\u2019ve started to build the CSS architecture using the <a href=\"https:\/\/www.xfive.co\/blog\/itcss-scalable-maintainable-css-architecture\/\" target=\"_blank\" rel=\"noopener noreferrer\">ITCSS<\/a> methodology that organizes the style files in stacks from generic styles to specific ones, which helps you to scale large projects easily. But along with ITCSS, we were using CSS Modules to scope the components, so we noticed that the component stack was getting huge and even the generic styles were being componentized and reused within other components.<\/span><\/p>\n<p><span style=\"font-weight: 400\">That was the moment in which we paused to rethink our architecture and how we could set the components in a more distributed and organized way. Then we found a methodology called <\/span><a href=\"http:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Atomic Design<\/b><\/a><span style=\"font-weight: 400\"> that creates multiple stacks of components, with different hierarchies of complexity and dependence.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5752\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Atomic-Design.png\" alt=\"\" width=\"1968\" height=\"448\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Atomic-Design.png 1968w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Atomic-Design-768x175.png 768w\" sizes=\"(max-width: 1968px) 100vw, 1968px\" \/><\/p>\n<h2><span style=\"font-weight: 400\">What is Atomic Design?<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Popularly known within the design world, Atomic Design helps to build consistent, solid and reusable design systems. Plus, in the world of React, Vue and frameworks that stimulate componentization, Atomic Design is used unconsciously; but when used in the right way, it becomes a powerful ally for developers.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The name Atomic Design comes from the idea of separating the components into atoms, molecules, organisms, templates and pages, like in the image above. But what are the responsibilities of each separated part?<\/span><\/p>\n<h3>Atoms<\/h3>\n<p><img decoding=\"async\" class=\"size-full wp-image-5753 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Atoms.png\" alt=\"\" width=\"304\" height=\"132\"><\/p>\n<p><span style=\"font-weight: 400\">Atoms are the smallest possible components, such as buttons, titles, inputs or even color palettes, animations, and fonts. They can be applied in any context, globally or within other components and templates, besides having many states, such as in this button example: disabled, hover, different sizes, etc.<\/span><\/p>\n<h3>Molecules<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5755\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Molecules.png\" alt=\"\" width=\"601\" height=\"348\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Molecules.png 1308w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Molecules-768x445.png 768w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/p>\n<p><span style=\"font-weight: 400\">They are the composition of one or more components of atoms. Here we begin to compose complex components and reuse some of those components. Molecules can have their own properties and create functionalities by using atoms, which don&#8217;t have any function or action by themselves.<\/span><\/p>\n<h3>Organisms<\/h3>\n<p><img decoding=\"async\" class=\"size-full wp-image-5756 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Organisms.png\" alt=\"\" width=\"2712\" height=\"850\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Organisms.png 2712w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Organisms-768x241.png 768w\" sizes=\"(max-width: 2712px) 100vw, 2712px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Organisms are the combination of molecules that work together or even with atoms that compose more elaborate interfaces. At this level, the components begin to have their final shape, but they are still ensured to be independent, portable and reusable enough to be used in any context. <\/span><\/p>\n<h3>Templates<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5758\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Templates.png\" alt=\"\" width=\"600\" height=\"442\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Templates.png 1170w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Templates-768x566.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400\">At this stage, we stop composing components and begin to set their context. Moreover, the templates create relationships between the organisms and other components through positions, placements and patterns of the pages, but they don\u2019t have any style, color or rendered component. That\u2019s why it looks like a wireframe.<\/span><\/p>\n<h3>Pages<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5759\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Pages.png\" alt=\"\" width=\"1536\" height=\"1011\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Pages.png 1536w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Pages-768x506.png 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Pages are the navigable parts of the application, and they are where the components are distributed in one specific template. The components get real content and they\u2019re connected with the whole application. At this stage, we can test the efficiency of the design system to analyse if all the components are independent enough or if we need to split them into smaller parts.<\/span><\/p>\n<h2>How do you use Atomic Design with React?<\/h2>\n<p><span style=\"font-weight: 400\">When we started to use Atomic Design within React, we had to adjust some rules of the methodology to make sure components were reused as much as possible. They had to be stateless, with no positioning styles and no very specific margins, so as to avoid any side effects in the pages of the application.<\/span><\/p>\n<p><span style=\"font-weight: 400\">So with each new component we asked ourselves: \u201cAre these components generic enough to avoid specificity and\/or repeated code in whatever context they are used?\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400\">So we were able to write a few rules:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Atomic Design should have a file of <\/span><b>variables<\/b><span style=\"font-weight: 400\"> and it must be imported by each component;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">The <\/span><b>atoms<\/b><span style=\"font-weight: 400\"> should be written without margins and positions;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Only the <\/span><b>molecules<\/b><span style=\"font-weight: 400\"> and <\/span><b>organisms<\/b><span style=\"font-weight: 400\"> can set the positions of atoms, but these stacks can\u2019t have any styles of margins and positions;<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Templates <\/b><span style=\"font-weight: 400\">have only one function: to set the grid of pages but never positions of specific components;<\/span><\/li>\n<li><b>Pages <span style=\"font-weight: 400\">render the components with a defined template, and it\u2019s here that <\/span>Atomic Design <span style=\"font-weight: 400\">will be connected to the rest of the application;<\/span><\/b><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400\">How do you set up Atomic Design in a React project?<\/span><\/h2>\n<p>Everything shown here is available in a<strong> <a href=\"https:\/\/github.com\/danilowoz\/react-atomic-design\" target=\"_blank\" rel=\"noopener noreferrer\">boilerplate on GitHub<\/a>,<\/strong> which you can test and then use to start your own projects with Atomic Design. It sets up the atoms, molecules, organisms, templates and pages folders in React, plus a UI library to preview each component, so let&#8217;s do it:<\/p>\n<p><span style=\"font-weight: 400\">To build a UI library we used an awesome tool called <a href=\"https:\/\/storybook.js.org\" target=\"_blank\" rel=\"noopener noreferrer\">Storybook<\/a><\/span><span style=\"font-weight: 400\">, which is a great ally to Atomic Design in React (you can use it for <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/react-native-examples-innovative-brands\/\">React Native<\/a> and Vue too). It lets you render the components and list all the states and variations of each one.<\/span><\/p>\n<p><span style=\"font-weight: 400\">With Storybook installed, the folder structure will look like this:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-5757 size-full\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/path.png\" alt=\"\" width=\"1564\" height=\"988\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/path.png 1564w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/path-768x485.png 768w\" sizes=\"(max-width: 1564px) 100vw, 1564px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Note that inside the button component there is a file called \u2018index.js\u2019, which is the component itself. The \u2018styles.css\u2019 file holds the style that will be imported by CSS Modules (here we\u2019ve used BEM CSS inside the structure; I recommend reading the article \u2018<a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/css-architecture-reactjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Architecture with ReactJS<\/a>\u2019). The \u2018stories.js\u2019 file imports the component into Storybook, which looks like this:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5754\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/button.png\" alt=\"\" width=\"1564\" height=\"784\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/button.png 1564w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/button-768x385.png 768w\" sizes=\"(max-width: 1564px) 100vw, 1564px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Each &#8216;add ()&#8217; function is a variation of the component and it is the best approach to describe each state individually rather than a single function, so it becomes easier to highlight and control each one of them. So if you describe all the component variations, Storybook should look like this:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5760\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Storybook.png\" alt=\"\" width=\"1536\" height=\"1011\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Storybook.png 1536w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/Storybook-768x506.png 768w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/p>\n<p><span style=\"font-weight: 400\">And the coolest part of Storybook is that you can add some \u2018addons\u2019, such as the <a href=\"https:\/\/github.com\/storybooks\/storybook\/tree\/master\/addons\/info\" target=\"_blank\" rel=\"noopener noreferrer\">Storybook Info<\/a>, which does awesome things like: story source, prop types, default values and which values are required or not.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-5764 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/proptypes.png\" alt=\"\" width=\"446\" height=\"316\"><\/p>\n<h2><span style=\"font-weight: 400\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400\">At the end of the project, we reached the initial goals and we believe we left a good legacy, a structure which ensures that the project can grow and that other developers can understand the architecture quickly. Maybe we initially spent some extra time writing stories and so on, but the more the project grows, the more the benefits make clear why we should use such an architecture.<\/span><\/p>\n<p><span style=\"font-weight: 400\">However, we could see that this architecture probably doesn\u2019t work for every project because it depends on several factors. The main one is that the design needs to be thought in the same way as the development: <\/span><b>in an atomic way<\/b><span style=\"font-weight: 400\">. But the integration between design and development is a point that every project wants to reach, so it becomes a very positive point for <\/span><b>Atomic Design.<\/b><\/p>\n<h3>References<\/h3>\n<p><a href=\"https:\/\/github.com\/danilowoz\/react-atomic-design\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Boilerplate on GitHub<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/css-architecture-reactjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Architecture with ReactJS<\/a><\/p>\n<p><a href=\"http:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atomic Web Design<\/a><\/p>\n<p><a href=\"http:\/\/patternlab.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Patternlab<\/a><\/p>\n<p><a href=\"https:\/\/medium.com\/buildit\/using-react-within-a-design-system-73d4bb0cc822\" target=\"_blank\" rel=\"noopener noreferrer\">Using React within a design system<\/a><\/p>\n<p><a href=\"https:\/\/medium.com\/@yejodido\/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f\" target=\"_blank\" rel=\"noopener noreferrer\">Atomic components managing dynamic React components using atomic design <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How one methodology allowed me to create a great design system from scratch and made me a better developer, with principles of componentization, hierarchies and reuse of code.<\/p>\n","protected":false},"author":65,"featured_media":5772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_focuskw":"Atomic Design with React","_yoast_wpseo_title":"Atomic Design with React | Cheesecake Labs","_yoast_wpseo_metadesc":"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.","_yoast_wpseo_meta-robots-noindex":"","_yoast_wpseo_canonical":"","footnotes":"","ckl_wpml_lang":"","ckl_wpml_source_id":0,"ckl_wpml_status":""},"categories":[1425,6],"tags":[],"class_list":["post-5751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-engineering","category-product-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Atomic Design with React | Cheesecake Labs<\/title>\n<meta name=\"description\" content=\"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Atomic Design with React | Cheesecake Labs\" \/>\n<meta property=\"og:description\" content=\"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-08T16:11:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-14T17:23:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1065\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\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:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\"},\"author\":{\"name\":\"Danilo Woznica\"},\"headline\":\"Atomic Design with React\",\"datePublished\":\"2017-12-08T16:11:37+00:00\",\"dateModified\":\"2026-08-14T17:23:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\"},\"wordCount\":1206,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg\",\"articleSection\":[\"Product Engineering\",\"Product Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\",\"name\":\"Atomic Design with React | Cheesecake Labs\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg\",\"datePublished\":\"2017-12-08T16:11:37+00:00\",\"dateModified\":\"2026-08-14T17:23:20+00:00\",\"description\":\"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg\",\"width\":3000,\"height\":1065,\"caption\":\"Atomic Design with React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Atomic Design with React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"AI Implementation, Data and Product Engineering\",\"publisher\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\",\"name\":\"Cheesecake Labs\",\"alternateName\":\"Cheesecake Labs Inc\",\"url\":\"https:\/\/cheesecakelabs.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cheesecakelabs.com\/#logo\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png\",\"caption\":\"Cheesecake Labs\",\"inLanguage\":\"en\"},\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cheesecakelabs.com\/#primary-image\",\"url\":\"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp\",\"contentUrl\":\"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp\",\"width\":1920,\"height\":1080,\"caption\":\"Cheesecake Labs \u2014 AI, Data & Blockchain software development services\",\"inLanguage\":\"en\"},\"sameAs\":[\"https:\/\/www.facebook.com\/cheesecakelabs\",\"https:\/\/x.com\/cheesecakelabs\",\"https:\/\/www.instagram.com\/cheesecakelabs\/\",\"https:\/\/www.linkedin.com\/company\/cheesecake-labs\/\",\"https:\/\/www.youtube.com\/channel\/UCdGEQ5AHJcmIlaOaI5fGGVA\",\"https:\/\/clutch.co\/profile\/cheesecake-labs\",\"https:\/\/www.behance.net\/cheesecakelabs\",\"https:\/\/dribbble.com\/cheesecakelabs\",\"https:\/\/www.designrush.com\/agency\/profile\/cheesecake-labs\",\"https:\/\/www.g2.com\/products\/cheesecake-labs\/reviews\"],\"description\":\"Cheesecake Labs is a software development studio that designs and builds custom digital products \u2014 web, mobile, and platforms \u2014 combining product design and high-performance engineering.\",\"foundingDate\":\"2013\"},{\"@type\":\"Person\",\"name\":\"Danilo Woznica\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg\",\"caption\":\"Danilo Woznica\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/danilo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Atomic Design with React | Cheesecake Labs","description":"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.","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:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/","og_locale":"en_US","og_type":"article","og_title":"Atomic Design with React | Cheesecake Labs","og_description":"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.","og_url":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-12-08T16:11:37+00:00","article_modified_time":"2026-08-14T17:23:20+00:00","og_image":[{"width":3000,"height":1065,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg","type":"image\/jpeg"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/"},"author":{"name":"Danilo Woznica"},"headline":"Atomic Design with React","datePublished":"2017-12-08T16:11:37+00:00","dateModified":"2026-08-14T17:23:20+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/"},"wordCount":1206,"commentCount":0,"publisher":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#organization"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg","articleSection":["Product Engineering","Product Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/","url":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/","name":"Atomic Design with React | Cheesecake Labs","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg","datePublished":"2017-12-08T16:11:37+00:00","dateModified":"2026-08-14T17:23:20+00:00","description":"How atomic design with React allows creating a great design system from scratch with principles of componentization, hierarchies, and reuse of code.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/12\/danilo_blogpost2-02.jpg","width":3000,"height":1065,"caption":"Atomic Design with React"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/atomic-design-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Atomic Design with React"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"AI Implementation, Data and Product Engineering","publisher":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cheesecakelabs.com\/blog\/#organization","name":"Cheesecake Labs","alternateName":"Cheesecake Labs Inc","url":"https:\/\/cheesecakelabs.com\/","logo":{"@type":"ImageObject","@id":"https:\/\/cheesecakelabs.com\/#logo","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png","caption":"Cheesecake Labs","inLanguage":"en"},"image":{"@type":"ImageObject","@id":"https:\/\/cheesecakelabs.com\/#primary-image","url":"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp","contentUrl":"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp","width":1920,"height":1080,"caption":"Cheesecake Labs \u2014 AI, Data & Blockchain software development services","inLanguage":"en"},"sameAs":["https:\/\/www.facebook.com\/cheesecakelabs","https:\/\/x.com\/cheesecakelabs","https:\/\/www.instagram.com\/cheesecakelabs\/","https:\/\/www.linkedin.com\/company\/cheesecake-labs\/","https:\/\/www.youtube.com\/channel\/UCdGEQ5AHJcmIlaOaI5fGGVA","https:\/\/clutch.co\/profile\/cheesecake-labs","https:\/\/www.behance.net\/cheesecakelabs","https:\/\/dribbble.com\/cheesecakelabs","https:\/\/www.designrush.com\/agency\/profile\/cheesecake-labs","https:\/\/www.g2.com\/products\/cheesecake-labs\/reviews"],"description":"Cheesecake Labs is a software development studio that designs and builds custom digital products \u2014 web, mobile, and platforms \u2014 combining product design and high-performance engineering.","foundingDate":"2013"},{"@type":"Person","name":"Danilo Woznica","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg","caption":"Danilo Woznica"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/danilo\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=5751"}],"version-history":[{"count":2,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5751\/revisions"}],"predecessor-version":[{"id":14579,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5751\/revisions\/14579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/5772"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=5751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=5751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=5751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}