ui
A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.
Learn how to integrate shadcn UI components with React Hook Form and Zod for seamless form validation. Build robust forms with our complete guide.
How the shadcn Build Process Works: Configuration, Output, and Registry GenerationExplore the shadcn build process: learn how tsup compiles code into ES modules and generates registry JSON files for component installation.
How to Use the shadcn Search Command to Find Components in the RegistryEasily 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.
How to Understand the shadcn Style System and Create Custom ComponentsMaster 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.
How shadcn/ui Supports 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.
How to Configure Multiple Registries in shadcn/ui to Pull Components from Different SourcesLearn 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.
Difference Between registry:ui, registry:lib, and registry:block in shadcn/uiUnderstand 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.
How shadcn Resolves Component Dependencies and Builds Installation TreesDiscover how shadcn resolves component dependencies and builds installation trees. Learn about recursive fetching, topological sorting, and dependency guarantees.
How to Add Custom Icon Libraries Beyond Lucide to shadcn/ui ComponentsEasily add custom icon libraries beyond Lucide to your shadcn/ui components. Learn how to configure your project and integrate any React icon set seamlessly.
How to Configure Component Aliases and Custom Output Paths for shadcn ComponentsLearn how to configure shadcn component aliases and custom output paths easily. Enhance your project setup with clear instructions and efficient customization options.
How the Component Registry Item Schema Defines Dependencies in shadcn/uiLearn how the shadcn/ui component registry item schema defines dependencies using dependencies devDependencies and registryDependencies arrays. Understand component requirements.
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.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →