DOCSEARCHbyAlgolia
Submit Docs

shadcn/ui Documentation

repository·main·Indexed Apr 17, 2026

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

A collection of reusable UI components that developers copy directly into their projects. Includes a CLI tool for initializing projects, adding components, managing registries, and integrating with AI assistants via MCP. Supports Base UI and Radix variants, and provides templates for Astro, Next.js, React Router, TanStack Start, and Vite frameworks.

Tokens
286.3K
Snippets
1.3K
Records
1.4K
Agent score
100%

What's inside shadcn/ui

  2. Introduction to running your own code registry

    main

    The shadcn CLI allows you to run your own code registry to distribute custom components, hooks, pages, configurations, rules, and other files to any project. The registry is framework-agnostic and works with any project type, not limited to React.

    Key capabilities include:

    • Distributing custom components, hooks, pages, and config files
    • Securing your registry with authentication
    • Configuring registries with namespaces for organized access
    • Defining registry items using the registry.json schema
    • Using examples to guide registry item creation

    To get started, follow the setup guide to build your first registry, then explore authentication, namespaces, and examples for advanced configurations.

  3. Overview and Canary Version

    main

    This repository is a work-in-progress registry for the shadcn canary version. It provides components built with React 19 and Tailwind v4. Developers should use this registry if they need access to the latest experimental features or are preparing for the upcoming stable release, rather than the standard stable version of shadcn.

    Sources: apps/v4/README.md

  4. Initialize a React + TypeScript + Vite project with shadcn/ui

    main
    This template provides a pre-configured Vite project with React, TypeScript, and shadcn/ui. It is ready to use for building UI components with full code ownership. The project is set up with the necessary dependencies and configuration to start adding shadcn components immediately.

  5. Install and use shadcn/ui to build a component library

    main
    shadcn/ui is a collection of beautifully designed, customizable components that you can copy, paste, and extend to build your own component library. It is open source and designed to be modified to fit your specific needs. To get started, visit the official documentation at https://ui.shadcn.com/docs for installation instructions, usage guides, and API references.

  6. Understand the shadcn/ui philosophy and core principles

    main

    shadcn/ui is not a traditional NPM component library you install and import. Instead, it is a system for building your own component library by copying component code directly into your project. This approach gives you full code ownership, allowing you to modify, extend, and customize components to fit your specific design system without workarounds or wrapping.

    Key principles:

    • Open Code: You own the component code. You can edit it directly (e.g., changing a button's behavior) rather than overriding styles or wrapping components. This also makes the code transparent and AI-readable.
    • Composition: All components share a common, composable interface. This predictability helps both developers and AI models understand how to use and combine components.
    • Distribution: Components are distributed via a flat-file schema and a CLI tool, supporting cross-framework usage.
    • Beautiful Defaults: Components come with carefully chosen default styles that look good out-of-the-box and work together consistently.
    • AI-Ready: The open code and consistent API allow AI models to read, understand, and generate new components that integrate with your design system.

    Unlike traditional libraries where you might struggle to customize a component, shadcn/ui hands you the actual source code, making it straightforward to adapt to your needs.