Introduction - Landing Page UI

Landing Page UI is a React component library that provides a set of React components for building landing pages. Discover our Landing Page UI Kit, a seamless blend of React and Tailwind CSS components, perfect for effortlessly creating captivating landing pages.

Vite Installation

Step 1: Create React Project using Vite

bash
npm create vite@latest my-project -- --template react 
cd my-project

Step 2: Install Landing Page UI

bash
npm i landing-page-ui

Step 3: Install Tailwind CSS

bash
npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p

Step 4: Configure Tailwind CSS

js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Add Tailwind CSS in ./src/index.css

css
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 6: Run the React Project

bash
npm run dev

Step 7: Start using Landing Page UI in your project

jsx
import { Text } from "landing-page-ui";
  const App=()=>{
    return (
      <Text 
      tagName="h2"
      styles="text-3xl !font-bold text-blue-500">
        Hello From Landing Page UI
      </Text>
    )
  }
export default App;

Next.JS Installation

Step 1: Create React Project using Next.JS

bash
npx create-next-app@latest

Step 2: Install Landing Page UI

bash
npm i landing-page-ui

Step 3: Run the React Project

bash
npm run dev

Step 4: Start using Landing Page UI in your project

jsx
import { Text } from "landing-page-ui";
  const App=()=>{
    return (
      <Text 
      tagName="h2"
      styles="text-3xl !font-bold text-blue-500">
        Hello From Landing Page UI
      </Text>
    )
  }
export default App;