### Install Project Dependencies Source: https://github.com/badtzx0/badtz-ui/blob/main/CONTRIBUTING.md Installs all necessary Node.js dependencies for the BadtzUI project using npm. ```bash npm install ``` -------------------------------- ### Install Dock via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/dock.mdx Installs the Dock component using the shadcn-ui CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/dock.json ``` -------------------------------- ### Install Like Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/like-button.mdx Installs the Like Button component using the shadcn-ui CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/like-button.json ``` -------------------------------- ### Install Star Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/star-button.mdx Installs the StarButton component using the shadcn-ui CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/star-button.json ``` -------------------------------- ### Install Blur Reveal via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/text-effects/blur-reveal.mdx Installs the Blur Reveal component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/blur-reveal.json ``` -------------------------------- ### Install Image Trail via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/image-trail.mdx Installs the Image Trail component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/image-trail.json ``` -------------------------------- ### Install 3D Wrapper via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/3d-wrapper.mdx Installs the 3D Wrapper component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/3d-wrapper.json ``` -------------------------------- ### Install Flipping Card via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/flipping-card.mdx Installs the Flipping Card component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/flipping-card.json ``` -------------------------------- ### Install Shuffle Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/shuffle-button.mdx Installs the Shuffle Button component using the shadcn CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/shuffle-button.json ``` -------------------------------- ### Install Particles via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/particles.mdx Installs the particles component using the shadcn-ui CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/particles.json ``` -------------------------------- ### Install Animated List via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/animated-list.tsx.mdx Installs the animated list component using the shadcn-ui CLI by fetching configuration from a JSON file. ```bash npx shadcn@latest add https://badtz-ui.com/r/animated-list.json ``` -------------------------------- ### Install Swipe Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/swipe-button.mdx Installs the Swipe Button component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/swipe-button.json ``` -------------------------------- ### Install Dock Dependencies Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/dock.mdx Manually installs the necessary npm dependencies for the Dock component: clsx, tailwind-merge, and motion. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Cursor Cards via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/cursor-card.mdx Installs the Cursor Cards component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/cursor-cards.json ``` -------------------------------- ### Install Marquee Component via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/marquee.mdx Installs the Marquee component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/marquee.json ``` -------------------------------- ### Install Shuffle Button Dependencies Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/shuffle-button.mdx Manually installs the necessary npm dependencies for the Shuffle Button component, which are `clsx` and `tailwind-merge`. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Animated Card 1 via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/animated-cards/animated-card-1.mdx Installs the Animated Card 1 component using the shadcn-ui CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/animated-card-1.json ``` -------------------------------- ### Install Mouse Wave via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/shaders/mouse-wave.mdx Installs the Mouse Wave component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/mouse-wave.json ``` -------------------------------- ### Install Dependencies for Star Button Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/star-button.mdx Installs necessary npm packages, `clsx` and `tailwind-merge`, which are required for the StarButton's utility functions. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Dependencies for Expandable Card Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/expandable-card.mdx Manually installs the necessary npm dependencies for the Expandable Card component: clsx, tailwind-merge, and motion. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Dependencies for Animated Card 2 Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/animated-cards/animated-card-2.mdx Install necessary npm packages, clsx and tailwind-merge, for the Animated Card 2 component. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Dependencies for 3D Wrapper Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/3d-wrapper.mdx Installs necessary npm packages for the 3D Wrapper component, including `clsx`, `tailwind-merge`, and `motion` for utility and animation. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Fade Up Word via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/text-effects/fade-up-word.mdx Installs the Fade Up Word component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/fade-up-word.json ``` -------------------------------- ### Install Dependencies for Like Button Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/like-button.mdx Installs the necessary npm packages for the Like Button component: clsx for class manipulation and tailwind-merge for Tailwind CSS class merging. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Animated Keyboard via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/animated-keyboard.mdx Installs the animated keyboard component using the shadcn CLI. This is a quick way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/animated-keyboard.json ``` -------------------------------- ### Install Dependencies for Animated List Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/animated-list.tsx.mdx Installs necessary npm packages including clsx, tailwind-merge, and motion for the animated list component. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Infinite Ribbon via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/infinite-ribbon.mdx Installs the Infinite Ribbon component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/infinite-ribbon.json ``` -------------------------------- ### Install Border Beam via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/border-beam.mdx Installs the Border Beam component using the shadcn-ui CLI. This is a quick way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/border-beam.json ``` -------------------------------- ### Install Cloud Orbit via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/cloud-orbit.mdx Installs the Cloud Orbit component using the shadcn-ui CLI. This is the recommended method for quick integration. ```bash npx shadcn@latest add https://badtz-ui.com/r/cloud-orbit.json ``` -------------------------------- ### Install Pulse Shader via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/shaders/pulse-shader.mdx Installs the Pulse Shader component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/pulse-shader.json ``` -------------------------------- ### Install Glowing Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/glowing-button.mdx Installs the Glowing Button component using the shadcn-ui CLI by providing a JSON configuration URL. ```bash npx shadcn@latest add https://badtz-ui.com/r/glowing-button.json ``` -------------------------------- ### Install Image Split via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/image-split.mdx Installs the Image Split component using the Badtz UI CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/image-split.json ``` -------------------------------- ### Install Pixel Distortion via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/shaders/pixel-distorsion.mdx Installs the Pixel Distortion component using the shadcn-ui CLI by referencing a JSON manifest file. ```bash npx shadcn@latest add https://badtz-ui.com/r/pixel-distorsion.json ``` -------------------------------- ### Install Hyperspace Background via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/backgrounds/hyperspace-background.mdx Installs the Hyperspace Background component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/hyperspace-background.json ``` -------------------------------- ### Install Expandable Card via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/expandable-card.mdx Installs the Expandable Card component using the Badtz UI CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/expandable-card.json ``` -------------------------------- ### Install Stagger Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/stagger-button.mdx Installs the Stagger Button component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/stagger-button.json ``` -------------------------------- ### Install Cloud Orbit Dependencies Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/cloud-orbit.mdx Manually installs the necessary npm packages for the Cloud Orbit component: `clsx`, `tailwind-merge`, and `motion`. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Dependencies for Animated Keyboard Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/animated-keyboard.mdx Manually installs the necessary npm dependencies for the animated keyboard component, including clsx, tailwind-merge, framer-motion, and class-variance-authority. ```bash npm install clsx tailwind-merge framer-motion class-variance-authority ``` -------------------------------- ### Install Stripe Animated Gradient via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/backgrounds/stripe-animated-gradient.mdx Installs the Stripe Animated Gradient component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/stripe-animated-gradient.json ``` -------------------------------- ### Install Confetti Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/confetti-button.mdx Installs the confetti button component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/confetti-button.json ``` -------------------------------- ### Install Dependencies for Flipping Card Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/flipping-card.mdx Installs necessary npm dependencies, `clsx` and `tailwind-merge`, required for the Flipping Card component's styling and utility functions. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Dependencies for Pulse Shader Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/shaders/pulse-shader.mdx Installs the necessary npm packages required for the Pulse Shader component, including styling utilities and React Three libraries. ```bash npm install clsx tailwind-merge @react-three/fiber @react-three/drei three ``` -------------------------------- ### Install Dependencies for Stripe Animated Gradient Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/backgrounds/stripe-animated-gradient.mdx Manually installs the necessary npm dependencies, `clsx` and `tailwind-merge`, required for the Stripe Animated Gradient component. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Dependencies for Blur Reveal Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/text-effects/blur-reveal.mdx Installs necessary npm packages, `clsx` for conditional class names and `tailwind-merge` for merging Tailwind CSS classes. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Mouse Wave Dependencies Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/shaders/mouse-wave.mdx Manually installs the necessary npm packages for the Mouse Wave component, including utility libraries and React Three Fiber dependencies. ```bash npm install clsx tailwind-merge @react-three/fiber @react-three/drei three ``` -------------------------------- ### Install Dependencies for Image Split Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/image-split.mdx Manually installs the necessary npm dependencies for the Image Split component, including clsx, tailwind-merge, and motion. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Dependencies for Infinite Ribbon Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/infinite-ribbon.mdx Installs necessary npm packages, `clsx` and `tailwind-merge`, required for the Infinite Ribbon component's utility functions. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Dependencies for Animated Card 3 Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/animated-cards/animated-card-3.mdx Manually installs the necessary npm dependencies, `clsx` and `tailwind-merge`, required for the Animated Card 3 component. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Dependencies for Image Trail Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/image-trail.mdx Installs necessary npm packages: `clsx` for conditional class names, `tailwind-merge` for Tailwind CSS class merging, and `gsap` for animation. ```bash npm install clsx tailwind-merge gsap ``` -------------------------------- ### Install Gradient Slide Button via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/gradient-slide.mdx Installs the Gradient Slide Button component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/gradient-slide-button.json ``` -------------------------------- ### Install Dependencies for Glowing Button Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/glowing-button.mdx Installs necessary npm packages, `clsx` and `tailwind-merge`, required for the Glowing Button component's styling utilities. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Mouse Wave Dependencies for Older Next.js Versions (bash) Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/shaders/mouse-wave.mdx Installs specific versions of React Three Fiber and Drei, along with GSAP, for compatibility with Next.js versions 14 or earlier. This ensures proper functionality on older project setups. ```bash npm install @react-three/fiber@8.18.0 @react-three/drei@9.122.0 gsap three ``` -------------------------------- ### Install Dependencies for Social Proof Avatars Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/social-proof-avatars.mdx Manually installs the necessary npm dependencies (`clsx` and `tailwind-merge`) required for the Social Proof Avatars component. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Install Stagger Blur Effect via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/text-effects/stagger-blur-effect.mdx Installs the Stagger Blur Effect component using the shadcn-ui CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/stagger-blur-effect.json ``` -------------------------------- ### Install remix-themes Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/dark-mode/remix.mdx This command installs the remix-themes package using npm, which is required for managing themes in a Remix application. ```bash npm install remix-themes ``` -------------------------------- ### Install Dependencies for Marquee Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/marquee.mdx Installs necessary npm packages, `clsx` and `tailwind-merge`, required for the Marquee component's functionality. ```bash npm install clsx tailwind-merge ``` -------------------------------- ### Run BadtzUI Locally Source: https://github.com/badtzx0/badtz-ui/blob/main/CONTRIBUTING.md Starts the BadtzUI project in development mode, allowing you to see changes in real-time. ```bash npm run dev ``` -------------------------------- ### Install next-themes Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/dark-mode/next.mdx Installs the 'next-themes' package using npm. This package is a dependency for managing theme switching in Next.js applications. ```bash npm install next-themes ``` -------------------------------- ### Usage Example of Stagger Blur Effect Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/text-effects/stagger-blur-effect.mdx Shows a basic example of how to use the `StaggerBlurEffect` component with text content. ```tsx I <3 Vercel ``` -------------------------------- ### FAQ Accordion with Premium Block Explanation (HTML/JSX) Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/(root)/pro-plan.mdx This snippet demonstrates an accordion component used to explain the difference between Badtz UI's free components and Premium Blocks. It highlights that Premium Blocks offer complete, conversion-optimized sections for landing pages, incorporating marketing expertise. ```html How are Premium Blocks different from the free components? Our free library gives you individual components like buttons, forms, and navigation. Premium Blocks give you complete, conversion-optimized sections specifically designed for landing pages and marketing sites.
Every block includes optimized copy structure, psychological design principles, and layouts proven to convert visitors into customers. You're not just getting code—you're getting marketing expertise. ``` -------------------------------- ### Install Particles Dependencies Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/particles.mdx Manually installs the necessary npm dependencies for the particles component, including clsx, tailwind-merge, and tsparticles packages. ```bash npm install clsx tailwind-merge @tsparticles/react @tsparticles/slim ``` -------------------------------- ### Animated Keyboard Usage Example Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/animated-keyboard.mdx Demonstrates how to import and use the Keyboard, Keycap, and KeyRow components to build an animated keyboard layout. Shows basic structure and props. ```tsx import { Keyboard, Keycap, KeyRow, } from "@/components/ui/animated-keyboard"; ``` ```tsx ``` -------------------------------- ### Install Social Proof Avatars via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/components/social-proof-avatars.mdx Installs the Social Proof Avatars component using the `shadcn-ui` CLI. This is the quickest way to add the component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/social-proof-avatars.json ``` -------------------------------- ### Install Dependencies for Stagger Button Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/buttons/stagger-button.mdx Installs the necessary npm packages required for the Stagger Button component, including clsx, tailwind-merge, and motion. ```bash npm install clsx tailwind-merge motion ``` -------------------------------- ### Install Animated Card 2 via CLI Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/animated-cards/animated-card-2.mdx Use the npx command to add the Animated Card 2 component to your project. ```bash npx shadcn@latest add https://badtz-ui.com/r/animated-card-2.json ``` -------------------------------- ### Install Dependencies for Fade Up Word Source: https://github.com/badtzx0/badtz-ui/blob/main/content/docs/text-effects/fade-up-word.mdx Installs necessary npm packages, clsx and tailwind-merge, required for the Fade Up Word component's functionality. ```bash npm install clsx tailwind-merge ```