builtin-ui-react

This library provides some built-in React Components with pre-defined styles which helps to create layout of a Web Application faster and easier.

Each Component is easily customizable so you can give different Tailwind CSS styles to it of your choice.

Currently Available Built-in Components :

Button Input Box

Code Example :

<Button /> Component :

text : This Prop takes the Name for the Button. image: This Prop takes the Image for the Button. click: This Prop takes the On Click method for the Button. style: This Prop takes the Custom Tailwind CSS Classes for the Button. All above Props are Optional, if we doesn't passed any props, it will create empty button for us.

import { Button } from "builtin-ui-react";
import { GiClick } from "react-icons/gi";

const Home = () => {
    return(
        <Button
            text="Click Me"
            image={<GiClick />}
            click={() => alert("Hello World")}
            style="bg-black text-white"
        />;
    );
};

export default Home;

Output :

<Input /> Component :

inputType : This Prop takes the type of Input field only for these input types (text, email, password). inputRef: This Prop takes the ref of useRef Hook. inputPlaceholder: This Prop takes the placeholder for the input field. inputValue: This Prop takes the value for the input field helpful for useState Hook. onInputChange: This Prop takes the method for change in input value. inputStyle: This Prop takes the Custom Tailwind CSS Classes for the Input Field. icon: This Prop takes the Custom Icon for the Input Field. iconStyle: This Prop takes the Custom Icon Tailwind CSS for the Input Field. All above Props are Optional, if we doesn't passed any props, it will create empty input field for us.

import { Input } from "builtin-ui-react";
import { FaUser } from "react-icons/fa";

const Home = () => {
  return (
    <Input
      inputType="text"
      inputRef={userRef}
      inputPlaceholder="Name"
      inputValue={userVal}
      onInputChange={inputChange}
      inputStyle="bg-black text-white"
      icon={<FaUser />}
      iconStyle="bg-black text-white"
    />
  );
};

export default Home;

Output :