Generate and export Tailwind color patterns.
A comprehensive guide to installing and integrating PixelBlockUI components using the pixelblock-cli tool in your React or Next.js projects.
Welcome to the PixelBlockUI installation guide! This comprehensive guide will walk you through installing pixelblock-cli, a CLI tool designed to streamline the integration of PixelBlockUI components into your React or Next.js projects.
Before installing pixelblock-cli, ensure your development environment meets the following prerequisites:
Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
Follow the Tailwind CSS installation instructions to get started.
Add the following dependencies to your project:
npm install clsx tailwind-merge
Installing pixelblock-cli globally allows you to access it from any directory on your system. To install globally, run:
npm install -g pixelblock-cli
After installation, verify the installation by checking the version:
pixelblock-cli --version
For project-specific usage, install pixelblock-cli locally within your project directory:
npm install pixelblock-cli
After installation, you can run pixelblock-cli using npm scripts:
"scripts": {
"pixelblock": "pixelblock-cli"
}
Run the CLI using:
npm run pixelblock add <component>
If you prefer not to install pixelblock-cli, you can use npx to run it directly:
npx pixelblock-cli add <component>
Replace <component> with the name of the PixelBlockUI component you want to install.
Once pixelblock-cli is installed, you can easily add PixelBlockUI components to your project:
pixelblock-cli add <component>
This command installs the specified <component> into your project’s components/PixelBlock directory. It also manages dependencies required for each component, such as clsx and tailwind-merge.
PixelBlockUI components rely on TailwindCSS for styling. If you haven’t already set up TailwindCSS in your project, follow these steps:
Install TailwindCSS using npm:
npm install tailwindcss
Initialize TailwindCSS by creating a configuration file:
npx tailwindcss init
Ensure your project uses TailwindCSS by including it in your CSS:
/* src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Import this CSS file into your project’s main entry file (e.g., src/index.js or src/index.tsx):
import "./styles/tailwind.css";
Verify that PixelBlockUI and TailwindCSS are correctly set up by adding a component and checking for successful installation and styling.
pixelblock-cli add Button
Check the components/PixelBlock directory for the added Button component and ensure TailwindCSS styles are applied as expected.
You are now ready to integrate and customize PixelBlockUI components into your React or Next.js projects. For detailed usage instructions and component documentation, refer to the PixelBlockUI Documentation.