Install shadcn complete

install-shadcn.sh

#!/bin/bash

# Create directories and files
mkdir -p ./components/ui
mkdir -p ./lib
touch ./lib/utils.ts

# Prompt to move globals.css
echo "Would you like to move globals.css to styles/globals.css? (y/n)"
read -r -p "[Y/n]: " move_response
move_response=${move_response:-n}

if [[ "$move_response" =~ ^([yY][eE][sS]|[yY])+$ ]]; then
    mkdir -p ./styles
    if [ -f "app/globals.css" ]; then
        mv app/globals.css ./styles/globals.css
        echo "Moved globals.css to ./styles/globals.css. Remember to use styles/globals.css for styles when prompted!"
    else
        touch ./styles/globals.css
        echo "Created new globals.css in ./styles."
    fi
else
    echo "Keeping globals.css in its current location."
fi

# Run shadcn-ui init command (user interaction required)
echo "Init shadcn? (y/n)"
read -r -p "[Y/n]: " response
response=${response:-y}
if [[ "$response" =~ ^([yY][eE][sS]|[yY])+$ ]]; then
    echo "Running 'npx shadcn-ui@latest init'..."
    echo "Please complete the interactive setup."
    if [[ "$move_response" =~ ^([yY][eE][sS]|[yY])+$ ]]; then
        echo "Make sure to use styles/globals.css for the styles when prompted!"
    fi
    npx shadcn-ui@latest init

    # Confirmation message
    read -p "Press enter once the interactive setup is complete..."
else 
    echo "Skipping shadcn-ui init..."
fi

# Install shadcn-ui components
echo "Would you like to install all shadcn components @latest? (y/n)"
read -r -p "[Y/n]: " response
response=${response:-y}
if [[ "$response" =~ ^([yY][eE][sS]|[yY])+$ ]]
then
components=(
    "accordion" "alert" "alert-dialog" "aspect-ratio" "avatar" "badge"
    "button" "calendar" "card" "checkbox" "collapsible" "combobox"
    "command" "context-menu" "data-table" "date-picker" "dialog" "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" "toggle-group" "tooltip" "carousel" "drawer" "pagination"
    "resizable" "sonner" 
)

for component in "${components[@]}"; do
    echo "Installing $component..."
    yes | npx shadcn-ui@latest add "$component"
echo "Shad components installed successfully!"
done
else 
    echo "Skipping shadcn-ui component installation..."
fi

# Create index file if the user wants to
echo "Would you like to create an index file for your components? (y/n)"
read -r -p "[Y/n]: " response
response=${response:-y}
if [[ "$response" =~ ^([yY][eE][sS]|[yY])+$ ]]
then
# Install ts-node if not already installed
    if ! command -v ts-node &> /dev/null
    then
        echo "Installing ts-node..."
        npm install ts-node
    fi

    # Download the TypeScript file from the Gist
    echo "Downloading the setup-index.ts script..."
    curl -o setup-index.mjs "https://gist.githubusercontent.com/turnercore/37b3b634e9e401bcf96414daa14b7453/raw/2a6baadffb97b8f89d03f51e665e4ca497343942/generateIndex.ts"

    # Run the script with ts-node
    echo "Running the setup-index.mjs script..."
    npx ts-node setup-index.mjs

    # Delete the setup-index.ts file after running
    echo "Deleting the setup-index.ts script..."
    rm setup-index.mjs

    echo "Index file creation complete."
else 
    echo "Skipping index.ts generation..."
fi

echo "Shadcn install complete!"

Instructions

1. Create install-shadcn.sh in your source directory.

• This should be the directory one level above /components
• Copy and Paste or curl -O https://gist.githubusercontent.com/turnercore/6e90604412d7cf84e5c059c436d6f790/raw/49e13a4b363f19b6987e82a5753ef75faa6d353a/install-shadcn.sh

3. sudo ./install-shadcn.sh to run the script
4. Follow the terminal prompts
5. Enjoy your shadcn installation with all the latest components

Assumes @ is the root of your project
Assumes you want to use @/components/ui for your ui installs

This script installs the following components.

Components

Accordion
Alert
Alert Dialog
Aspect Ratio
Avatar
Badge
Button
Calendar
Card
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
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
Toggle Group
Tooltip
Sonner
Carousel
Drawer
Pagination
Resizable
Sonner

If there are additional ones added they will need to be added to the 'components' variable within the script.

Updated for ShadCN December 2023 Update

Note that if you want to create an index file for the components, then the script relies on this typescript file and ts-node (and the reference needs to be updated if that .ts gist is updated).

However, this can safely be skipped.

https://gist.githubusercontent.com/turnercore/37b3b634e9e401bcf96414daa14b7453/raw/2a6baadffb97b8f89d03f51e665e4ca497343942/generateIndex.ts