UI Library

A reusable React component library built with TypeScript, Storybook, and TailwindCSS. This library provides a collection of atomic components designed for easy integration into your projects.

Features

-	🚀 Reusable Components: Pre-built, customizable atomic components for faster development.
-	🛠️ TypeScript Support: Fully typed components for type-safe usage.
-	🎨 TailwindCSS Integration: Styled with TailwindCSS for easy theme customization.
-	📚 Storybook: Includes a Storybook for interactive component demos.
-	🌟 Lightweight: Built to optimize performance and reduce bundle size.

Installation

To use the components in your project, first install the library via npm or yarn:

# Install with npm
npm install is-core-ui

# Install with yarn
yarn add is-core-ui

Usage

Import and use components in your project: Example: Using the Button Component

import React from 'react';
import { Button, ButtonType, ButtonSize } from 'ui-library';

const App = () => {
  return (
    <Button
      type={ButtonType.Primary}
      size={ButtonSize.base}
      text="Click Me"
      onClick={() => alert('Button Clicked!')}
    />
  );
};

export default App;

TailwindCSS Configuration

Ensure your project has TailwindCSS installed and configured. If you’re not using TailwindCSS, you can override styles using the provided class names.

Components

Atoms

1.	Button
-	Props:
-	text: Text displayed on the button.
-	type: Button style, e.g., primary, secondary.
-	size: Button size, e.g., sm, lg.
-	icon: Optional icon to display.
-	onClick: Click event handler.

Example:

<Button
  type={ButtonType.Primary}
  text="Submit"
  onClick={() => alert('Submitted!')}
/>

Storybook

Explore interactive demos of all components in the library using Storybook:

npm run storybook