Install All shadcn Components in One Command

Install All shadcn Components in One Command
August 06, 2024

Are you tired of installing shadcn components one by one? It's time-consuming and can slow down your development process. Many developers face this problem when setting up their React projects.

Installing each shadcn component separately takes a lot of time. You have to run a command for each component you want to use. This can be frustrating, especially when you're working on a big project.

I have created a simple bash script that installs all shadcn components with just one command. This script will save you time and make your development process much smoother.

How It Works

The script uses a list of all shadcn component names. It then runs a loop to install each component using the `npx` command. This automates the whole process for you.

Benefits of Using This Script

1. Save time: Install all components at once instead of one by one.

2. Reduce errors: Avoid mistakes that can happen when typing multiple commands.

3. Consistency: Ensure all components are installed in your project.

4. Convenience: Set up your project faster and start coding sooner.

Script to Install all shadcn components

#!/bin/bash


# Array of all shadcn component names
components=(
    "accordion"
    "alert"
    "alert-dialog"
    "aspect-ratio"
    "avatar"
    "badge"
    "button"
    "calendar"
    "card"
    "carousel"
    "checkbox"
    "collapsible"
    "command"
    "context-menu"
    "dialog"
    "drawer"
    "dropdown-menu"
    "form"
    "hover-card"
    "input"
    "label"
    "menubar"
    "navigation-menu"
    "popover"
    "progress"
    "radio-group"
    "scroll-area"
    "select"
    "separator"
    "sheet"
    "skeleton"
    "slider"
    "switch"
    "table"
    "tabs"
    "textarea"
    "toast"
    "toggle"
    "tooltip"
)


# Function to install a component
install_component() {
    component=$1
    echo "Installing $component..."
    npx shadcn-ui@latest add $component
}


# Main installation loop
for component in "${components[@]}"
do
    install_component $component
done


echo "All shadcn components have been installed successfully!"

How to Use the Script

1. Copy the script from this blog post.

2. Save it as a file named 'install_shadcn_components.sh'.

3. Make the file executable using the command 'chmod +x install_shadcn_components.sh'.

4. Run the script in your project folder by typing './install_shadcn_components.sh'.

Important Notes

Before using this script, make sure you've already set up shadcn in your project. Also, consider if you really need all components. Installing only what you need can keep your project smaller.

Conclusion

This simple script can greatly speed up your development process with shadcn components. Give it a try and see how much time you can save!


Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates