How we work
<h1><strong>Introduction</strong></h1><p>shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.</p><p><strong>This is not a component library. It is how you build your component library.</strong></p><p>You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.</p><p>This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. <strong>Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.</strong></p><p>This is what shadcn/ui aims to solve. It is built around the following principles:</p><ul><li><p><strong>Open Code:</strong> The top layer of your component code is open for modification.</p></li><li><p><strong>Composition:</strong> Every component uses a common, composable interface, making them predictable.</p></li><li><p><strong>Distribution:</strong> A flat-file schema and command-line tool make it easy to distribute components.</p></li><li><p><strong>Beautiful Defaults:</strong> Carefully chosen default styles, so you get great design out-of-the-box.</p></li><li><p><strong>AI-Ready:</strong> Open code for LLMs to read, understand, and improve.</p></li></ul>