Bulk add shadcn components

bulk-add-shadcn-components.sh

npx shadcn-ui@latest add accordion && npx shadcn-ui@latest add alert && npx shadcn-ui@latest add alert-dialog && npx shadcn-ui@latest add aspect-ratio && npx shadcn-ui@latest add avatar && npx shadcn-ui@latest add badge && npx shadcn-ui@latest add breadcrumb && npx shadcn-ui@latest add button && npx shadcn-ui@latest add calendar && npx shadcn-ui@latest add card && npx shadcn-ui@latest add carousel && npx shadcn-ui@latest add chart && npx shadcn-ui@latest add checkbox && npx shadcn-ui@latest add collapsible && npx shadcn-ui@latest add command && npx shadcn-ui@latest add context-menu && npx shadcn-ui@latest add table && npm install @tanstack/react-table && npx shadcn-ui@latest add dialog && npx shadcn-ui@latest add drawer && npx shadcn-ui@latest add dropdown-menu && npx shadcn-ui@latest add form && npx shadcn-ui@latest add hover-card && npx shadcn-ui@latest add input && npx shadcn-ui@latest add input-otp && npx shadcn-ui@latest add label && npx shadcn-ui@latest add menubar && npx shadcn-ui@latest add navigation-menu && npx shadcn-ui@latest add pagination && npx shadcn-ui@latest add popover && npx shadcn-ui@latest add progress && npx shadcn-ui@latest add radio-group && npx shadcn-ui@latest add resizable && npx shadcn-ui@latest add scroll-area && npx shadcn-ui@latest add select && npx shadcn-ui@latest add separator && npx shadcn-ui@latest add sheet && npx shadcn-ui@latest add skeleton && npx shadcn-ui@latest add slider && npx shadcn-ui@latest add sonner && npx shadcn-ui@latest add switch && npx shadcn-ui@latest add table && npx shadcn-ui@latest add tabs && npx shadcn-ui@latest add textarea && npx shadcn-ui@latest add toast && npx shadcn-ui@latest add toggle && npx shadcn-ui@latest add toggle-group && npx shadcn-ui@latest add tooltip

For soner or toast, add:

• React: main.tsx
• Next JS: layout.tsx

<Toaster/>

For chart, add this to your main CSS / SCSS file (e.g app.scss):

@layer base {
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

For OTP input, add this to tailwind.config.ts:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" },
        },
      },
      animation: {
        "caret-blink": "caret-blink 1.25s ease-out infinite",
      },
    },
  },
}