--- title: The anatomy of shadcn/ui | daily.dev description: shadcn/ui is a UI library that allows users to declare a design system as code. It distributes components through a CLI instead of an npm package, giving users... canonical: https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The anatomy of shadcn/ui | daily.dev og:description: shadcn/ui is a UI library that allows users to declare a design system as code. It distributes components through a CLI instead of an npm package, giving users... og:url: https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7 og:image: https://api.daily.dev/og/posts/xBEO1Nzp7.png og:image:alt: The anatomy of shadcn/ui og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The anatomy of shadcn/ui **[Community Picks](https://daily.dev/sources/community)** · 14 min read · 29 upvotes · 1 comments ## Summary shadcn/ui is a UI library that allows users to declare a design system as code. It distributes components through a CLI instead of an npm package, giving users ownership and control over the code. The library follows a two-layered architecture, separating structure and behavior from style. It utilizes headless UI libraries like Radix UI and React Hook Form for complex behaviors. The components are styled using TailwindCSS and Class Variance Authority, promoting consistent and reusable styles. Some key components include Badge, Switch, Calendar, Table, and Form. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@alhaqh** · 0 upvotes > I love Shadcn!!! --- Tags: [#architecture](https://daily.dev/tags/architecture), [#javascript](https://daily.dev/tags/javascript), [#ui-design](https://daily.dev/tags/ui-design), [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7) ```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":"The anatomy of shadcn/ui","url":"https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7"},"datePublished":"2023-12-14T07:52:22.739Z","dateModified":"2026-10-14T02:27:12.236Z","description":"shadcn/ui is a UI library that allows users to declare a design system as code. It distributes components through a CLI instead of an npm package, giving users...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c95e17c9f33d06a2fe68890501eea04c?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c95e17c9f33d06a2fe68890501eea04c?_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":1,"discussionUrl":"https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":29},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"architecture,javascript,ui-design,webdev","timeRequired":"PT14M"} {"@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":"The anatomy of shadcn/ui"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-anatomy-of-shadcn-ui-xbeo1nzp7","comment":[{"@type":"Comment","text":"I love Shadcn!!!","datePublished":"2023-12-18T15:26:13.093Z","url":"https://daily.dev/posts/xBEO1Nzp7#c-DNTbIcdDi","author":{"@type":"Person","name":"Al Haqq","url":"https://daily.dev/alhaqh","image":"https://media.daily.dev/image/upload/s--Z6-kVopI--/f_auto,q_auto/v1699142922/avatars/avatar_gL1yUy65Avz4TGMfwt7bv"}}]} ```