​
Introduction

Welcome to the MyCrumbs UI Kit quickstart guide. This guide will help you set up and start using MyCrumbs UI Kit in your project.

​
Installation

First, you need to install the MyCrumbs UI Kit package. You can do this using npm or yarn.

npm install mycrumbs-uikit

or

yarn add mycrumbs-uikit

​
Setup

To use MyCrumbs UI Kit, you need to wrap your application with the MyCrumbsProvider. This ensures that all components have access to the theme and other configurations.

import React from 'react';
import ReactDOM from 'react-dom';
import { MyCrumbsProvider } from 'mycrumbs-uikit';
import App from './App';
ReactDOM.render(
<MyCrumbsProvider>
<App />
</MyCrumbsProvider>,
document.getElementById('root')
);

​
Usage

Now you can start using the components provided by MyCrumbs UI Kit. Here is an example of how to use a button component.


import React from 'react';
import { Button } from 'mycrumbs-uikit';
const MyComponent = () => (
<Button onClick={() => alert('Button clicked!')}>
Click Me
</Button>
);
export default MyComponent;

​
Customization

MyCrumbs UI Kit allows you to customize the theme to match your brand. You can do this by passing a custom theme to the MyCrumbsProvider.


import React from 'react';
import ReactDOM from 'react-dom';
import { MyCrumbsProvider, createTheme } from 'mycrumbs-uikit';
import App from './App';
const customTheme = createTheme({
colors: {
primary: '#3b82f6',
secondary: '#bfdbfe',
},
});
ReactDOM.render(
<MyCrumbsProvider theme={customTheme}>
<App />
</MyCrumbsProvider>,
document.getElementById('root')
);

​
Conclusion

You are now ready to start building your application with MyCrumbs UI Kit. For more information and advanced usage, please refer to the official documentation.

Introduction