# ui | shadcn-ui | Knowledge Base | Instagit

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

GitHub Stars: 107k

Repository: https://github.com/shadcn-ui/ui

---

## Articles

### [How to Integrate shadcn UI Components with React Hook Form and Zod: A Complete Guide](/shadcn-ui/ui/how-do-i-integrate-shadcn-components-with-form-validation-libraries-like-react-hook-form-and-zod)

Learn how to integrate shadcn UI components with React Hook Form and Zod for seamless form validation. Build robust forms with our complete guide.

- Tags: how-to-guide
- Published: 2026-02-26

### [How the shadcn Build Process Works: Configuration, Output, and Registry Generation](/shadcn-ui/ui/how-is-the-build-output-configured-and-what-is-the-shadcn-build-process)

Explore the shadcn build process: learn how tsup compiles code into ES modules and generates registry JSON files for component installation.

- Tags: internals
- Published: 2026-02-26

### [How to Use the shadcn Search Command to Find Components in the Registry](/shadcn-ui/ui/how-can-i-use-the-shadcn-search-command-to-find-components-in-the-registry)

Easily find shadcn components with the search command. Query built-in or custom registries using fuzzy matching for quick CLI or API access to paginated JSON results.

- Tags: how-to-guide
- Published: 2026-02-26

### [How to Understand the shadcn Style System and Create Custom Components](/shadcn-ui/ui/how-do-i-understand-the-shadcn-style-system-and-create-my-own-custom-styles)

Master the shadcn style system with Tailwind CSS, cva, and cn. Learn to build custom, themeable components efficiently directly in your codebase. Unlock elegant UI development.

- Tags: deep-dive
- Published: 2026-02-26

### [How shadcn/ui Supports React Server Components (RSC) and Server-Side Rendering (SSR)](/shadcn-ui/ui/how-does-shadcn-support-react-server-components-rsc-and-server-side-rendering-ssr)

Discover how shadcn/ui seamlessly integrates with React Server Components and SSR using a simple rsc flag and router registration for efficient server-side rendering.

- Tags: deep-dive
- Published: 2026-02-26

### [How to Configure Multiple Registries in shadcn/ui to Pull Components from Different Sources](/shadcn-ui/ui/how-do-i-configure-multiple-registries-to-pull-components-from-different-sources)

Learn how to configure multiple registries in shadcn ui to pull components from various sources. Easily add third-party components and private APIs using your components.json file.

- Tags: how-to-guide
- Published: 2026-02-26

### [Difference Between registry:ui, registry:lib, and registry:block in shadcn/ui](/shadcn-ui/ui/what-is-the-difference-between-registry-ui-registry-lib-and-registry-block-component-types)

Understand shadcn/ui registry:ui, registry:lib, and registry:block component types. Learn how shadcn/ui organizes components, utilities, and page layouts for efficient web development.

- Tags: deep-dive
- Published: 2026-02-26

### [How shadcn Resolves Component Dependencies and Builds Installation Trees](/shadcn-ui/ui/how-does-shadcn-resolve-component-dependencies-and-their-tree-structure)

Discover how shadcn resolves component dependencies and builds installation trees. Learn about recursive fetching, topological sorting, and dependency guarantees.

- Tags: internals
- Published: 2026-02-26

### [How to Add Custom Icon Libraries Beyond Lucide to shadcn/ui Components](/shadcn-ui/ui/how-do-i-add-custom-icon-libraries-beyond-lucide-to-shadcn-components)

Easily add custom icon libraries beyond Lucide to your shadcn/ui components. Learn how to configure your project and integrate any React icon set seamlessly.

- Tags: how-to-guide
- Published: 2026-02-26

### [How to Configure Component Aliases and Custom Output Paths for shadcn Components](/shadcn-ui/ui/how-can-i-configure-component-aliases-and-custom-output-paths-for-shadcn-components)

Learn how to configure shadcn component aliases and custom output paths easily. Enhance your project setup with clear instructions and efficient customization options.

- Tags: how-to-guide
- Published: 2026-02-26

### [How the Component Registry Item Schema Defines Dependencies in shadcn/ui](/shadcn-ui/ui/how-does-the-component-registry-item-schema-define-component-dependencies)

Learn how the shadcn/ui component registry item schema defines dependencies using dependencies devDependencies and registryDependencies arrays. Understand component requirements.

- Tags: internals
- Published: 2026-02-26

### [What Does the shadcn init Command Do and How Does It Configure Project Paths?](/shadcn-ui/ui/what-does-the-shadcn-init-command-do-and-how-does-it-configure-project-paths)

Discover what the shadcn init command does. Learn how it bootstraps your project, resolves paths, and configures components.json for shadcn/ui.

- Tags: how-to-guide
- Published: 2026-02-26

### [How to Set Up shadcn/ui with Different JavaScript Frameworks: Next.js, Vite, and Remix](/shadcn-ui/ui/how-do-i-set-up-shadcn-with-different-javascript-frameworks-like-next-js-app-router-vite-or-remix)

Learn to set up shadcn/ui with Nextjs Vite and Remix using the shadcn CLI. This guide simplifies configuration for your JavaScript framework projects.

- Tags: how-to-guide
- Published: 2026-02-26

### [Understanding the components.json Configuration File in shadcn-ui: Schema, Purpose, and Examples](/shadcn-ui/ui/what-is-the-purpose-and-schema-of-the-components-json-configuration-file-in-shadcn)

Learn about the purpose and schema of shadcn-ui's components.json. This config file guides CLI operations for component installation and customization.

- Tags: deep-dive
- Published: 2026-02-26

### [How to Migrate from Deprecated shadcn/ui Toast Components to Sonner](/shadcn-ui/ui/how-do-i-migrate-from-deprecated-shadcn-components-like-toast-and-toaster-to-sonner)

Easily migrate from deprecated shadcnui toast components to Sonner. Learn the simple steps to update your imports and integrate Sonner for a seamless transition in your project.

- Tags: migration-guide
- Published: 2026-02-26

### [How to Create Custom Components that Integrate with shadcn's Registry System](/shadcn-ui/ui/how-do-i-create-custom-components-that-integrate-with-shadcn-s-registry-system)

Learn how to create custom components that integrate seamlessly with shadcn's registry system. Follow simple steps to declare and build your own components.

- Tags: how-to-guide
- Published: 2026-02-26

### [How to Configure Tailwind CSS v4 with shadcn Components and the new-york-v4 Style](/shadcn-ui/ui/how-do-i-configure-tailwind-css-v4-with-shadcn-components-and-the-new-york-v4-style)

Learn to configure Tailwind CSS v4 with shadcn components and the new-york-v4 style. Get automatic detection and default styling for a smooth setup. Explore the shadcn/ui registry for seamless integration.

- Tags: how-to-guide
- Published: 2026-02-26

### [How the shadcn Component Registry Resolution and Fetching System Works](/shadcn-ui/ui/how-does-the-shadcn-component-registry-resolution-and-fetching-system-operate)

Understand the shadcn component registry resolution and fetching system. Discover its three-stage pipeline for mapping names to files, resolving entries, and fetching source files with import rewriting.

- Tags: internals
- Published: 2026-02-26

### [Core shadcn CLI Commands and Internal Architecture: Implementation Guide](/shadcn-ui/ui/what-are-the-core-commands-in-the-shadcn-cli-and-how-do-they-work-internally)

Explore core shadcn CLI commands like init add and create. Understand their internal architecture including Zod validation and registry resolution for efficient UI component management.

- Tags: internals
- Published: 2026-02-26

### [How to Configure Custom Component Registries for Internal Company Components](/shadcn-ui/ui/how-can-i-configure-custom-component-registries-for-internal-company-components)

Learn to configure custom component registries for internal company components. Easily add and install your own UI elements using shadcn-ui with this simple guide.

- Tags: how-to-guide
- Published: 2026-02-26

### [How shadcn/ui's Copy-Paste Component Architecture Differs from Traditional npm Libraries](/shadcn-ui/ui/how-does-shadcn-s-copy-paste-component-architecture-differ-from-traditional-npm-install-libraries)

Discover how shadcn/ui's copy-paste architecture differs from npm libraries. Gain control over code and eliminate dependencies bypassing node_modules.

- Tags: deep-dive
- Published: 2026-02-26