Installation & Usage

Step 1: Choose and Copy Your Component

Follow the Installation instructions and 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., Button.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:

1// Button.tsx
2
3interface ButtonProps {
4  label: string;
5  onClick?: () => void;
6}
7
8const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
9  return (
10    <button
11      onClick={onClick}
12      className={`bg-yellow-300 text-black hover:bg-yellow-400 transition-all ease-in w-fit px-6 py-2 rounded-md`}
13    >
14      {label}
15    </button>
16  );
17};
18
19export default Button;

Step 4: Import and Use the Component

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

Example Usage:

1import Button from './Button';
2
3const App = () => {
4  return (
5    <div>
6      <Button label="Click Me" />
7    </div>
8  );
9};
10
11export default App;