Introduction
Shadcn-ui is a collection of open-source reusable components designed for Next.js, Astro, Vite, etc. It features a variety of beautifully designed components that can be easily integrated into your applications. Thanks to its reusability, it's well-suited for production. The library is customizable to your preferences and accessible, ensuring versatility for users.
To incorporate Shadcn-ui components into our application, we can either install them through the CLI terminal or opt for manual installation. Utilizing the CLI terminal is easy and straightforward, making the installation process simpler compared to manual installation.
While attempting an installation using the CLI terminal, I encountered several errors. In this article, I'll guide you through troubleshooting and resolving those errors, should you encounter them as well.
How to Install Using the CLI Terminal
1. Create a project
Regardless of the application you're working on, begin by creating the project. Since we're using Next.js in this example, execute the following command:
npx create-next-app@latest my app
2. Run the CLI init command
Once the app has been successfully created, we'll run the shadcn-ui init
command to initiate the setup process for your project.
npx shadcn-ui@latest init
After running the command, I get this error:
To address this issue, we'll replace the latest
keyword in the init
command with the specific version we intend to install. Since the latest version at the time of installation is 0.6.0
, execute the following command:
npx shadcn-ui@0.6.0 init
3. Configure the component.json during installation
Upon executing the command, you'll be presented with various installation options. Select those that align with your project's requirements, and the installation process will commence successfully.
4. Add a component
With the installation and configuration successfully completed, we're now ready to incorporate components of our choosing, such as Card Components, Button Components, and more.
For the purposes of this article, we'll demonstrate the addition of a Button Component. To add a Button Component to your component folder, execute the following command:
npx shadcn-ui@0.6.0 add button
This command will integrate the Button Component within a dedicated UI folder within your Component folder, enabling its utilization within your project.
To utilize this component within your project, simply import the Button Component from the Components/ui folder, and it will seamlessly display within your web page.
import { Button } from "@/components/ui/button"
export default function Page() {
return (
<div className=”flex flex-col gap-4 items-center justify-center”>
<Button>Click me</Button>
</div>
)
}
On our web page, we have:
And that's it 👍🏾
Conclusion
For comprehensive guidance on leveraging other components, kindly refer to the official Shadcn-UI documentation.
With these steps, you're now equipped to effectively troubleshoot and resolve potential installation challenges that may arise with Shadcn-ui in your projects.
I sincerely hope this proves helpful.
Top comments (1)
lifesaver