Installation & Usage

Step 1: Choose and Copy Your Component

Copy the source code of the component you want to use from the library.

Step 2: Create a New .tsx File

Inside your project, create a new .tsx file, e.g., MyCustomComponent.tsx.

Step 3: Paste the Copied Component Code

Paste the copied code into the new .tsx file and modify it according to your needs.

Example:

// MyCustomComponent.tsx

interface DefaultButtonProps {
  label: string;
  onClick?: () => void;
}

const DefaultButton: React.FC<DefaultButtonProps> = ({ label, onClick }) => {
  return (
    <button
      onClick={onClick}
      className={`bg-yellow-300 text-black hover:bg-yellow-400 transition-all ease-in w-fit px-6 py-2 rounded-md`}
    >
      {label}
    </button>
  );
};

export default DefaultButton;

Step 4: Import and Use the Component

Import and use the newly created component anywhere in your project.

Example Usage:

import DefaultButton from './MyCustomComponent';

const App = () => {
  return (
    <div>
      <DefaultButton label="Click Me" />
    </div>
  );
};

export default App;