kp-components

KP Components Library

KP Components Library is a customizable library that provides context and components, allowing users to access and use Material-UI components and custom components with ease.

Installation

To install the library, you can use npm or yarn:

npm install kp-components
# or
yarn add kp-components

Peer Dependencies

Ensure you have the following peer dependencies installed in your project:

"peerDependencies": {
  "@emotion/react": "^11.12.0",
  "@emotion/styled": "^11.12.0",
  "@mui/material": "^5.16.4",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

You can install them using npm or yarn:

npm install @emotion/react@^11.12.0 @emotion/styled@^11.12.0 @mui/material@^5.16.4 react@^18.3.1 react-dom@^18.3.1
# or
yarn add @emotion/react@^11.12.0 @emotion/styled@^11.12.0 @mui/material@^5.16.4 react@^18.3.1 react-dom@^18.3.1

Usage

Here's how you can use the KP Components Library in your project:

Theme Provider

The library provides a ThemeProvider component that you can use to wrap your application and provide the custom theme context.

import { ThemeProvider } from 'kp-components';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Custom Button

The library includes a custom Button component that you can use in your application.

import { Button } from 'kp-components';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Custom Button
      </Button>
    </div>
  );
}

export default App;

Use Theme

You can use the useTheme hook to access the theme within your components.

import { useTheme } from 'kp-components';

function ThemedComponent() {
  const theme = useTheme();

  return (
    <div style={{ background: theme.palette.background.default }}>
      Themed Component
    </div>
  );
}

export default ThemedComponent;

Contributing

We welcome contributions to improve the KP Components Library. If you have any ideas, suggestions, or issues, please create a pull request or an issue on our GitHub repository.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

For any questions or support, please contact us at [e-mail].