Drophp

Drophp UI is a comprehensive UI library tailored for React applications, aiming to simplify the creation of visually appealing user interfaces. With an emphasis on simplicity and adaptability, Drophp UI offers a plethora of components and styles to elevate your web development workflow.

Installation

• To start utilizing Drophp UI, follow these simple installation steps:

npm install drophp-ui
# or
yarn add drophp-ui

• Next, import the CSS file from Drophp to apply the color theme:

import "drophp/lib/styles/theme.css";

• add this string in tailwind.config.js in content

"./node_modules/drophp/**/*.{html,js, jsx,ts,tsx}";

• Add the following color theme configuration to your Tailwind CSS configuration file:

 colors: {
      Primary: "var(--color-Primary)",
      secondary: "var(--color-secondary)",
      success: "var(--color-success)",
      warning: "var(--color-warning)",
      danger: "var(--color-danger)",
      black: "var(--color-black)",
      "black-light": "var(--color-black-light)",
      blue: "var(--color-blue)",
      "blue-light": "var(--color-blue-light)",
      "blue-prime": "var(--color-blue-prime)",
      "blue-dark": "var(--color-blue-dark)",
      purple: "var(--color-purple)",
      tableGray: "var(--color-tableGray)",
      disable: "var(--color-disable)",
      loaderBg: "var(--color-loaderBg)",
      loader: "var(--color-loader)",
      amber: "var(--color-amber)",
      white: "var(--color-white)",
      gray: "var(--color-gray)",
      "gray-dark": "var(--color-gray-dark)",
      "grey-light": "var(--color-grey-light)",
      red: "var(--color-red)",
      texts: "var(--color-texts)",
      loading: "var(--color-loading)",
    },
    screens: {
      xxs: "400px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    }

• use release-it for auto publishing package

  npx release-it