{"id":24033,"date":"2023-03-17T06:30:17","date_gmt":"2023-03-17T13:30:17","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=24033"},"modified":"2026-05-08T17:11:43","modified_gmt":"2026-05-09T00:11:43","slug":"atomic-ui-components","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/","title":{"rendered":"5 UI Components in Atomic Design"},"content":{"rendered":"<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\/2022\/08\/UI-Components-in-Atomic-Design-1024x512.png\" alt=\"UI Components in Atomic Design\" class=\"wp-image-36118\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/UI-Components-in-Atomic-Design-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/UI-Components-in-Atomic-Design-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/UI-Components-in-Atomic-Design-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/UI-Components-in-Atomic-Design.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Atomic Design: once an obscure concept, it&#8217;s gained popularity in recent years. And it&#8217;s a hot interface design trend for good reason. When done correctly, Atomic Design allows design teams to deploy truly unique design systems. What&#8217;s more, these design systems offer unparalleled high-quality, consistent interfaces, which benefits end-users and developers alike.<\/p>\n<p>In this post, we&#8217;ll discuss the ins and outs of Atomic Design, and what you need to know about the UI components within it.<\/p>\n<p>Make it easier for your design team to adopt atomic design methodology. Design component-based prototypes. Bring React components to UXPin with its revolutionary Merge technology. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about UXPin Merge<\/a>.<\/p>\n<section class=\"discover-merge\">\n<div class=\"discover-merge__container\">\n<div class=\"discover-merge__left\">\n<p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n<p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\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<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-the-5-ui-components-of-atomic-design\"><strong>The 5 UI Components of Atomic Design<\/strong><\/h2>\n<p>Atomic Design is a web design theory pioneered by Brad Frost. A student of chemistry, Frost used the basis of the periodic table to develop this mental model of component-based design and development. In chemistry, a group of atoms combine to form a single molecule, which can then be combined into a series of progressively larger molecules and organisms.<\/p>\n<p>Frost adapts this process as the foundation of his Atomic Design approach.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"194\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/1_16.png\" alt=\"1 16\" class=\"wp-image-36120\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/1_16.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/1_16-700x181.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>In essence, Atomic Design consists of five elements that build on one another. They are as follows:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Atoms<\/strong>. In Atomic Design, as in chemistry, atoms are the basic elements that help inform everything. In the world of web applications, atoms are the foundational elements, such as HTML tags, fonts, animations, and<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/choose-color-pallete\/\" target=\"_blank\" rel=\"noreferrer noopener\"> color palettes<\/a>. Web design &#8220;atoms&#8221; can also be less concrete. Examples include buttons or forms.<\/li>\n<li><strong>Molecules<\/strong>. Molecules are the next-largest building block. Created by the joining of different atomic elements, molecules are complex by nature. Because they&#8217;re the product of various atoms, though, it&#8217;s possible to break them down, conceptually, into UI elements that are easier to digest. Examples of web design molecules include the things that become the backbone of the larger design system, such as form labels or input field.<\/li>\n<li><strong>Organisms<\/strong>. Atoms combine to form molecules, and groups of molecules form organisms. In the world of Atomic Design, organisms are the UI elements that shape both the appearance and functionality of a website. They&#8217;re also the elements that start to impact user interface. The way a developer arranges molecules informs the site experience and the complexity of the finished product. Examples of organisms include logos, search fields, and main navigation which together may form a header organism.<\/li>\n<li><strong>Templates<\/strong>. At this phase of the Atomic Design process, we start to break with the chemistry analogy and shift back into the lexicon of front-end development, as a whole. Templates, then, are &#8220;organisms&#8221; strung together at the page-level or beyond. Templates, online atoms, organisms, and molecules, are highly concrete. They provide a fixed context for the more abstract pieces to fit and are responsible for pulling the site together into something resembling its final form. An HTML wireframe is an excellent example of a template.<\/li>\n<li><strong>Pages<\/strong>. Pages, finally, are the final element of Atomic Design. According to<a href=\"https:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/#molecules\"> Frost<\/a> himself, pages are the <em>specific instances of templates. <\/em>Pages are the most tangible element of all and are the places users spend most of their time. They&#8217;re also one of the most essential phases of the Atomic Design process since the final iteration of pages is where developers get to see whether the entire design system is effective or not. In short, the final appearance of the pages dictates whether the product design is ready to launch, or whether the developer needs to loop back and make changes to earlier UI design elements.<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-atomic-design\"><strong>The Benefits of Atomic Design<\/strong><\/h2>\n<p>Now that we&#8217;ve discussed the basic UI components of Atomic Design, let&#8217;s take a deeper dive into<a href=\"https:\/\/www.creativebloq.com\/web-design\/10-reasons-you-should-be-using-atomic-design-61620771\" target=\"_blank\" rel=\"noreferrer noopener\"> why these components are beneficial<\/a>, and why it&#8217;s emerged as such a popular approach to structuring a design system.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-atomic-design-allows-for-a-mix-and-match-approach\"><strong>Atomic Design allows for a &#8220;mix and match&#8221; approach<\/strong><\/h3>\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\/2022\/08\/2_17.png\" alt=\"2 17\" class=\"wp-image-36124\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/2_17.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/2_17-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>With Atomic Design methodology, developers can take UI elements independently, rather than as a single brick that needs to move as one. This allows developers to reuse, repurpose, or pair atomic components with other elements to form new, more complex components. When teams need to scale their component libraries or integrate them with backend systems, tools like <a href=\"https:\/\/www.dreamfactory.com\" target=\"_blank\" rel=\"noopener noreferrer\">DreamFactory<\/a> can provide the governed API access and data infrastructure needed to power these increasingly complex design systems at the enterprise level.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-atomic-design-generates-straightforward-layouts\"><strong>Atomic Design generates straightforward layouts<\/strong><\/h3>\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\/2022\/08\/3_14.png\" alt=\"3 14\" class=\"wp-image-36122\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/3_14.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/3_14-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>This is true for both developers and final users. For developers,<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-based-design-without-learning-code\/\"> the code<\/a> of sites created with Atomic Design is easier to read and understand. For users, atomically designed sites are easier to navigate and more intuitive. When and if developers need to go back into the site to make changes in its content structure, Atomic Design makes it easy to identify each element and what it represents and alter things accordingly.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-atomic-design-creates-a-simpler-ux-design-overall\"><strong>Atomic Design creates a simpler UX design, overall<\/strong><\/h3>\n<p>While the basics of Atomic Design may sound complex, the fact is that sites created from a place of Atomic Design contain fewer UI components, overall.<\/p>\n<p>Here&#8217;s why:<\/p>\n<p>When developers have a list of basic building blocks (including atoms, molecules, and organisms) available <em>before<\/em> they begin to build a user interface, they&#8217;re more likely to employ existing infrastructure than they are to create new UI elements needlessly.<\/p>\n<p>The end result is fewer components, which makes for leaner, easier-to-use sites.<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-atomic-design-enhances-ui-components\"><strong>Atomic Design Enhances UI Components<\/strong><\/h2>\n<p>The world of web design is intensely UI-focused right now, and for good reason. As customers become more advanced and discerning, web development needs to keep up. Fortunately, Atomic Design makes it easy to do just that. By simplifying otherwise-complex web development outlooks, Atomic Design<a target=\"_blank\" href=\"https:\/\/www.creativebloq.com\/web-design\/10-reasons-you-should-be-using-atomic-design-61620771\" rel=\"noreferrer noopener\"> streamlines workflows for developers<\/a> and promotes better UIs for end users.<\/p>\n<p>Design with reusable components in UXPin. Bring React components to product design and follow atomic design principles in prototyping. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about UXPin Merge<\/a>.<\/p>\n<div class=\"wp-block-buttons\">\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=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Atomic Design: once an obscure concept, it&#8217;s gained popularity in recent years. And it&#8217;s a hot interface design trend for good reason. When done correctly, Atomic Design allows design teams to deploy truly unique design systems. What&#8217;s more, these design systems offer unparalleled high-quality, consistent interfaces, which benefits end-users and developers alike. In this post,<\/p>\n","protected":false},"author":3,"featured_media":24034,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,441],"tags":[362,363],"class_list":["post-24033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-front-end","tag-atomic-design","tag-ui-components"],"yoast_title":"%%title%% %%page%% - by UXPin","yoast_metadesc":"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.9 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 UI Components in Atomic Design - by UXPin<\/title>\n<meta name=\"description\" content=\"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.\" \/>\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\/atomic-ui-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 UI Components in Atomic Design\" \/>\n<meta property=\"og:description\" content=\"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-17T13:30:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T00:11:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UI-Components-in-Atomic-Design.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=\"5 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\\\/atomic-ui-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"5 UI Components in Atomic Design\",\"datePublished\":\"2023-03-17T13:30:17+00:00\",\"dateModified\":\"2026-05-09T00:11:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/\"},\"wordCount\":1002,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/UI-Components-in-Atomic-Design.png\",\"keywords\":[\"atomic design\",\"ui components\"],\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Front-End\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/\",\"name\":\"5 UI Components in Atomic Design - by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/UI-Components-in-Atomic-Design.png\",\"datePublished\":\"2023-03-17T13:30:17+00:00\",\"dateModified\":\"2026-05-09T00:11:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/UI-Components-in-Atomic-Design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/UI-Components-in-Atomic-Design.png\",\"width\":1200,\"height\":600,\"caption\":\"UI Components in Atomic Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-ui-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 UI Components in Atomic Design\"}]},{\"@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":"5 UI Components in Atomic Design - by UXPin","description":"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.","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\/atomic-ui-components\/","og_locale":"en_US","og_type":"article","og_title":"5 UI Components in Atomic Design","og_description":"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/","og_site_name":"Studio by UXPin","article_published_time":"2023-03-17T13:30:17+00:00","article_modified_time":"2026-05-09T00:11:43+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UI-Components-in-Atomic-Design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"5 UI Components in Atomic Design","datePublished":"2023-03-17T13:30:17+00:00","dateModified":"2026-05-09T00:11:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/"},"wordCount":1002,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UI-Components-in-Atomic-Design.png","keywords":["atomic design","ui components"],"articleSection":["Blog","Component-Driven Prototyping","Front-End"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/","name":"5 UI Components in Atomic Design - by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UI-Components-in-Atomic-Design.png","datePublished":"2023-03-17T13:30:17+00:00","dateModified":"2026-05-09T00:11:43+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UI-Components-in-Atomic-Design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/UI-Components-in-Atomic-Design.png","width":1200,"height":600,"caption":"UI Components in Atomic Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"5 UI Components in Atomic Design"}]},{"@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\/24033","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=24033"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24033\/revisions"}],"predecessor-version":[{"id":59454,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24033\/revisions\/59454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/24034"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=24033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=24033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=24033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}