NEXTUI component

[odd nova]

Is it possible to create our own component in NEXTUI ?

[chilly igloo]

@odd nova not sure what you mean by this

can you create your own component that uses nextUI components? yes

create a new JS file

call it whatever you want

for example, if i want to make a preset nextUI button

i could call it SpecialButton.js

then import button in there from nextUI

heres an examle of one i made called ButtonComponent

import { Button } from "@nextui-org/react";
import { useNavigate } from "react-router-dom";

const ButtonComponent = (props) => {
  return (
    <Button
      onClick={props.click}
      size={props.size}
      //onClick={move("scroll-me")}
      ref={props.ref}
      css={{
        background: "$gradientBlurple",
        backgroundPosition: "right",
        backgroundSize: "300%",
        marginTop: "30px",
        boxShadow: "0 5px 15px rgba(6, 93, 255, 0.4)",

        "&:hover": {
          backgroundPosition: "right",
          transform: "scale(1.05)",
          transition: "0.5s",
          boxShadow: "0 5px 15px rgba(6, 122, 255, 0.7)",
        },
      }}
    >
      {props.name}
    </Button>
  );
};

export default ButtonComponent;

the last line as you can see is export default ButtonComponent

i then import and use it in my index.js as "<ButtonComponent> </ButtonComponent>"

[odd nova]

@chilly igloo Ok I get it thanks