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!

#shadcn