Setup
How to install and set up custom shadcn io components from our community registry
Installing components from our custom shadcn/ui registry is straightforward and uses the standard shadcn/ui CLI with a custom registry URL.
This guide will walk you through the prerequisites and the installation steps, complete with example commands. By the end, you'll have our custom components ready to use in your project.
Prerequisites
Before installing components from our registry, make sure your environment meets the following requirements:
- Node.js, version 18 or later
- A React project, version 18 or later
- shadcn/ui already initialized in your project (run
npx shadcn@latest initif you haven't)
Make sure you have Tailwind CSS set up in your project. shadcn/ui uses Tailwind CSS for styling and the CSS Variables mode for theming.
Installing Components
You can install our custom components using the standard shadcn/ui CLI by specifying our registry URL. This adds the selected component's code and any needed dependencies to your project. For example, to install the Gantt Chart component, you would run:
npx shadcn@latest add https://www.shadcn.io/r/ganttAfter running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
⚡ Fast Installation: The installation is very fast – typically taking only a few seconds. You don't need to leave your editor or manually copy-paste any code. After the command finishes, everything is ready to go.