@shubhammohite753/react-ui-library

Reusable React UI components built with React, TypeScript, Tailwind CSS, and Vite.

Installation

Install the package:

npm install @shubhammohite753/react-ui-library

Install peer dependencies if needed:

npm install react react-dom

Import Styles

Import the library stylesheet once in your app:

import "@shubhammohite753/react-ui-library/styles.css";

Quick Start

import { useState } from "react";
import {
  Button,
  Input,
  Modal,
  Card,
} from "@shubhammohite753/react-ui-library";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <Card>
      <Input
        label="Email"
        placeholder="[email protected]"
      />

      <Button onClick={() => setOpen(true)}>
        Open Modal
      </Button>

      <Modal
        open={open}
        onOpenChange={setOpen}
        title="Welcome"
      >
        Your library is working.
      </Modal>
    </Card>
  );
}

Available Components

Button

Features

• Variants
• Sizes
• Loading state
• Disabled state
• Icon support

Variants

• primary
• secondary
• outline
• ghost
• danger

Input

Features

• Labels
• Helper text
• Error state
• Prefix and suffix icons
• Disabled state

Modal

Features

• Controlled open/close
• Overlay
• Escape key close
• Focus trap
• Scroll lock
• Footer actions

Card

Features

• Header support
• Footer support
• Hover effects
• Shadow variants

Development

Run Locally

npm install
npm run dev

Build Library

npm run build

Build output is generated inside:

dist/

Run Storybook

npm run storybook

Project Structure

src/
├── components/
├── hooks/
├── styles/
├── utils/
├── App.tsx
├── index.ts
└── main.tsx

dist/
├── components/
├── hooks/
├── utils/
├── index.js
├── index.cjs
├── index.d.ts
└── style.css

Notes

• Do not manually edit dist/
• Rebuild after source code changes
• Publish only generated build output

Tech Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• class-variance-authority
• Storybook

License