quick-ui-components v1.0.7

Installation

npm install quick-ui-components

⚠️ IMPORTANT: You need to install Tailwind CSS to use the components.

Configure Tailwind

To ensure Tailwind CSS recognizes the styles from Quick UI Components, follow the instructions based on the version of Tailwind you are using.

For both cases, make sure the path to the Quick UI Components files is correct.

Tailwind v4

Add the following to the CSS file where you import Tailwind:

@import "tailwindcss";
@source "../node_modules/quick-ui-components/dist";

Tailwind v3

Add the following to the tailwind.config.js file in the content property:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./node_modules/quick-ui-components/dist/*.js"],
};

Usage

For now, only the Button, Card Product, and Spinner components are made, but more components will be added in the future.

To use the Button component, simply import it and use it in your project.

Button

This Button component renders a custom button with dynamic styling options.

Properties

If we wanted to add an icon with text, we could combine the use of icon and children to achieve it. Similarly, if we wanted to add an icon without text, we simply set icon and do not pass anything to children.

Example

import { Button } from "quick-ui-components";

const App = () => {
  return (
    <Button
      colorBg="#ff6347"
      size="md"
      radius="md"
      className="my-custom-class"
      pointer={true}
      pulse={true}
      colorText="#ffffff"
      ripple={true}
      hoverColor="#ff7a28"
      hoverDarken={30}
      btnType="primary"
      icon={<Icon />}
      children="Click me"
      style={{ margin: "10px" }}
    >
      Click me
    </Button>
  );
};

Hover Effect

The darkening hover effect on the button was efficiently implemented using CSS. When the component loads, the initial background color is set, and the hover color is calculated only once. This is achieved through custom CSS variables (--bg-color and --hover-color), ensuring a smooth and optimized transition when interacting with the button.

.hover\:bg-hover-custom:hover {
  background-color: var(--hover-color);
}

This approach minimizes the use of JavaScript by keeping the button's dynamic styling exclusively with CSS, improving the overall performance of the application.

CardProduct

This CardProduct component renders a custom card to display products.

To use it, simply use the quick-ui CLI and add the component to your project.

npx quick-ui-cli add card-product

import { CardProduct } from "quick-ui-components";

The component will be copied to the following path in your project:

src
└── components
    └── ui
        └── card-product
            └── CardProduct.tsx

Properties

Spinner

Renders a custom spinner with dynamic styling options.

To use it, import it and use it in your project.

import { Spinner } from "quick-ui-components";

Properties