Installation Guide for react js

1. Create a New Next.js Project

If you don’t have a Next.js project set up yet, you can create one using the following commands:

2. Install Tailwind CSS

Tailwind CSS is required to style our components. To install Tailwind CSS, follow these steps:

a. Install Tailwind CSS and its dependencies:

b. Initialize Tailwind CSS:

Generate the tailwind.config.js and postcss.config.js files using:

c. Configure Tailwind CSS

In your tailwind.config.js file, update the content array to include paths to all your template files:

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
 './pages/**/*.{js,ts,jsx,tsx}',
 './components/**/*.{js,ts,jsx,tsx}',
 './node_modules/@your-namespace/your-ui-library/**/*.{js,ts,jsx,tsx}',
 ],
 theme: {
     extend: {},
 },
 plugins: [],
}
         

d. Add Tailwind Directives to Your CSS:

In your styles/globals.css file, add the following Tailwind directives to import Tailwind’s base styles:

3. Start Using Component

Now you’re all set to start using our UI components! Here’s a basic example of how to use one of our components in a Next.js page:

export default function Home() {
  return (
 <div className="flex items-center justify-center h-screen bg-gray-100">
 <Button>Click Me</Button>
 </div>
 );
}

4. Additional Resources

For more information on using our components and customizing them, refer to the Your UI Component Library Documentation. If you encounter any issues or have questions, don’t hesitate to reach out to our support team or open an issue on our GitHub repository.