catalyst-design/README.md

Reusable Component library for Catalyst

# Catalyst Design System

Welcome to `catalyst-design`, a comprehensive UI library built for the CATalyst project. This design system is tailored for developers working on CAT exam preparation applications, providing robust, scalable, and aesthetically pleasing UI components.

## Features

- **Rich Component Library**: Equipped with various UI components designed specifically for CAT exam preparation interfaces.
- **React-Focused**: Components are built to leverage React's capabilities for state management and reactivity.
- **Styled with Tailwind CSS**: Utilize the utility-first classes of Tailwind CSS for rapid UI development and easy customization.
- **Optimized for Learning**: Components are designed with a focus on readability, accessibility, and user engagement to enhance the learning experience.

## Installation

To install the latest version of `catalyst-design`, run the following command in your project directory:

```bash
npm install catalyst-design
```

## Tailwind CSS Configuration

Catalyst Design System requires Tailwind CSS. Add the following to your Tailwind CSS configuration to enable styling for the components:

```javascript
module.exports = {
  content: [
    // ...
    "./node_modules/catalyst-design/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  // ... rest of your Tailwind config
}
```

## Usage

After installation, you can import and use the components in your React projects as follows:

```javascript
import { Button, TextInput } from 'catalyst-design';

function ExamPrepComponent() {
  return (
    <div>
      <Button onClick={() => console.log('Starting practice test')}>
        Start Practice Test
      </Button>
      <TextInput placeholder="Search topics" onChange={(e) => console.log(e.target.value)} />
    </div>
  );
}
```

## Available Components

Catalyst Design System includes the following components (this list may expand):

- Button
- TextInput
- Card
- Modal
- Dropdown
- ProgressBar
- Timer
- QuestionCard
- AnswerOption
- ResultSummary

For detailed documentation on each component, including props and usage examples, please refer to our official documentation site (link to be added).

## Customization

Catalyst Design System is built with customization in mind. You can easily tailor the look and feel of the components to match your specific needs using Tailwind CSS classes or by extending the base styles.

## Contributing

We welcome contributions from the community! If you have suggestions for improvements or new features that could enhance CAT exam preparation interfaces, please feel free to:

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

## License

`catalyst-design` is open source and licensed under the MIT license.

## Support

If you encounter any issues or have questions about using Catalyst Design System, please file an issue on our GitHub repository or contact our support team at support@catalyst-design.com.

---

Happy coding, and best of luck with your CAT exam preparation app!