Tillu UI

Tillu UI is a simple UI components library built using Tailwind CSS. Currently, it includes a customizable button component, and more UI components will be added in future updates.

Installation

To install the Tillu UI library, use the following npm command in your Next.js project:

npm install tillu-ui

Button Component

Overview

The Button component provides a flexible way to create buttons with customizable styles and colors.

Usage Steps

Follow these steps to use the Button component in your project:

1. Import the Button Component:

   Start by importing the Button component from the tillu-ui library:

   import React from "react";
   import { Button } from "tillu-ui";

2. Add the Button to Your Component:

   Use the Button component in your JSX code like this:

   const MyComponent = () => {
     return (
       <div>
         <Button
           design="solid" // Design style: 'solid' or 'outlined'
           color="blue" // Button color options: 'blue', 'black', etc.
           onClick={() => alert("Button clicked!")} // Click event handler
         >
           Click Me
         </Button>
       </div>
     );
   };
   
   export default MyComponent;

3. Customize the Button:

   You can customize the Button component by passing different props:

   • design: Set this prop to either "solid" or "outlined" to choose the button style.
   • color: Choose a color for the button from available options such as "blue", "black", "red", "green", etc.
   • style: Add any additional CSS styles as a string.
   • onClick: Provide a function to handle click events.
   • type: Specify the button type as "button", "submit", or "reset".
   • borderRadius: Pass true or false to apply or remove border radius.

Example:

Here’s a more comprehensive example demonstrating the use of different props:

const ExampleComponent = () => {
  return (
    <div>
      <Button
        design="outlined"
        color="green"
        onClick={() => console.log("Outlined Green Button Clicked!")}
        style="mt-4" // Additional margin-top style
      >
        Outlined Green
      </Button>
      <Button
        design="solid"
        color="red"
        onClick={() => console.log("Solid Red Button Clicked!")}
        borderRadius={false} // No border radius
      >
        Solid Red
      </Button>
    </div>
  );
};

export default ExampleComponent;

License

This project is licensed under the ISC License.