Mart-ui NPM | npm.io

Mart UI

Mart-UI is a web interface library created using the 'mart-dl' tool. It offers a wide variety of components and features designed to enhance the user experience in web applications related to Mart.

Documentation

On the official Mart-UI website, you will find extensive documentation that covers the use of its components, hooks, and configurations in detail. You can also explore the repository on GitHub to access more related information and resources.

Documentation (in development): Mart-UI

Facility

To start using Mart-UI in your project, follow these simple installation steps using npm or pnpm:

1. Installation with npm

Run the following command in your terminal to install Mart-UI with npm:

npm i mart-ui

2. Installation with pnpm

If you prefer to use pnpm, you can install Mart-UI as follows:

npm i mart-ui

With any of these options, you'll be ready to take advantage of Mart-UI's capabilities in your project.

Theme and Hooks Settings

To take full advantage of the capabilities of 'Mart-UI', it is essential to carry out a previous configuration that will allow you to use the theme changing functionalities and the provided hooks.

React: Imports 'Mart-UI' and extracts its Context component, which is responsible for managing the theme change for all components. Then wrap your entire application with this Context.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { Context } from "mart-ui";

ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Context>
       <App />
     </Context>
   </React.StrictMode>
);

note:If you do not do this prior configuration, please note that you will not be able to take advantage of the theme changing functionalities or the hooks provided by 'Mart-UI'. Make sure you follow these steps to get the most out of this library.

Using Mart-UI Components

To use Mart-UI components in your app, simply import the component you want as follows:

import { ButtonPrimary } from "mart-ui";

export default function App() {
  return <ButtonPrimary />;
}

In this example, we have used the ButtonPrimary component. However, Mart-UI offers a wide variety of components that you can explore and use in your application according to your needs.

Feel free to explore the range of components available to create an attractive and functional user interface in your project.

Dark and Light Theme Change

To switch between Dark and Light themes in Mart-UI, you can import the ButtonSwitchTheme component, which is a preconfigured button to perform this action. Here is an example of how to use it:

import { ButtonPrimary, ButtonSwitchTheme } from "mart-ui";

export default function App() {
  return (
    <div>
      <ButtonSwitchTheme />
      <ButtonPrimary />
    </div>
  );
}

Additionally, you can use the 'switchTheme' function provided by the useTheme hook to change the theme on any other custom button. Follow these steps:

Import useTheme and run it inside your component.
Extract the switchTheme function and assign it to the desired button, as shown below:

import { ButtonPrimary, useTheme } from "mart-ui";

export default function App() {
  const { switchTheme } = useTheme();

  return (
    <div>
      <button
        onClick={(e) => {
          switchTheme(e);
        }}
      >
        Switch Theme
      </button>

      <ButtonPrimary />
    </div>
  );
}

With these options, you can easily change the theme of your application and customize it according to your preferences.

Connect with us

We appreciate your interest in Mart-UI and your contribution to the project is invaluable. Keeping this project running is an ongoing effort, and your help is essential. Here are several ways to connect with us:

Contribute to the Project

If you want to contribute to the Mart-UI project, you can visit our GitHub repository and fork the project. Your collaboration is welcome and can make a difference in the continued development of Mart-UI.

GitHub: Mart-UI on GitHub

Find us on Npm

You can find Mart-UI on Npm, where you can install the latest version and keep your project up to date with the latest improvements and features.

Npm: Mart-UI in Npm

Documentation in Development

We are working diligently on the Mart-UI documentation to provide you with detailed and useful resources. In the meantime, feel free to explore what's already available in our GitHub repository.

Documentation (in development): Mart-UI Documentation