UI-Kit

A customizable React component library built on Material-UI (MUI) with Storybook integration.

Features

• Built on Material-UI components
• Customizable theming system
• TypeScript support
• Storybook documentation
• Tree-shakeable
• Modern development setup with Vite

Installation

npm install ui-kit
# or
yarn add ui-kit

Usage

Basic Setup

import { ThemeProvider } from '@mui/material/styles';
import { CustomButton, defaultTheme } from 'ui-kit';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <CustomButton variant="contained" color="primary">
        Click me
      </CustomButton>
    </ThemeProvider>
  );
}

Custom Theme

import { ThemeProvider } from '@mui/material/styles';
import { createCustomTheme } from 'ui-kit';

const customTheme = createCustomTheme({
  palette: {
    primary: {
      main: '#FF0000',
    },
  },
  custom: {
    borderRadius: {
      medium: '16px',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your components */}
    </ThemeProvider>
  );
}

Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

1. Clone the repository
2. Install dependencies:

   npm install
   # or
   yarn

Available Scripts

• npm start - Start Storybook development server
• npm run build - Build the library
• npm run build:storybook - Build Storybook static site
• npm test - Run tests
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

Adding New Components

1. Create a new component in src/components
2. Create a story file with .stories.tsx extension
3. Export the component in src/index.ts
4. Document the component in Storybook

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT