Plug-N-Play-Ui-Kit

Plug-N-Play-Ui-Kit is a design system built with Storybook, Vite, React, TypeScript, and styled-components. It provides a powerful and customizable UI kit for your web applications.

Getting Started

To get started with Plug-N-Play-Ui-Kit, follow these steps:

1. Installation

You can install the library using npm:

npm install plug-n-play-ui-kit

2. Usage

Theming:

To avoid theming issues on components, make sure to wrap your entire application with the PlugNPlayContainer component at the root element level. This will provide the correct theme to all components within your app.

Example:

import React from 'react';
import { PlugNPlayContainer, darkTheme } from 'plug-n-play-ui-kit';
import App from './App'; // Replace with your root component
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PlugNPlayContainer theme={darkTheme}>
      <App />
    </PlugNPlayContainer>
  </React.StrictMode>
);

TypeScript Configuration:

To ensure TypeScript can correctly find the declaration files for Plug-N-Play-Ui-Kit, add the following paths to your tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "plug-n-play-ui-kit": ["./node_modules/plug-n-play-ui-kit/dist/index.d.ts"]
    }
  }
}

Troubleshooting

If you encounter issues like "Could not find a declaration file for module 'plug-n-play-ui-kit,'" make sure to follow the above instructions carefully. If the issue persists, consider the following:

• Ensure Vite or your build tool correctly handles TypeScript declaration files and module resolution.
• Make sure you're using the latest version of Plug-N-Play-Ui-Kit.
• If you need any assistance kindly create an issue in Git Issues

License

This project is licensed under the MIT License.

This README provides clear instructions and guidance for users and potential contributors. Make sure to include the actual code examples and create the corresponding files (like `CONTRIBUTING.md` and `LICENSE`) in your repository to support these sections. This can help attract more users and contributors to your project.