Test NPM Package

A React component library with bundled Tailwind CSS styles.

Installation

npm install test-npm-dilshadkt-2

Usage

Basic Import

import { Button } from "test-npm-dilshadkt-2";
import "test-npm-dilshadkt-2/styles"; // Import the bundled CSS

function App() {
  return (
    <Button variant="primary" size="lg">
      Click me
    </Button>
  );
}

Available Button Variants

• primary - Blue background
• secondary - Gray background
• success - Green background
• danger - Red background
• warning - Yellow background
• outline - Transparent with blue border
• ghost - Transparent with blue text

Available Button Sizes

• sm - Small
• md - Medium (default)
• lg - Large
• xl - Extra Large

CSS Integration

This package includes bundled Tailwind CSS styles, so you don't need to install Tailwind CSS separately!

Simple Setup

Just import the styles and use the components:

import { Button } from "test-npm-dilshadkt-2";
import "test-npm-dilshadkt-2/styles";

function App() {
  return <Button variant="primary">Click me</Button>;
}

If Your Project Already Uses Tailwind CSS

The bundled styles will work alongside your existing Tailwind setup without conflicts.

Development

npm run dev
npm run build
npm run preview

Package Structure

test-npm/
├── src/
│   ├── components/
│   │   ├── Button.jsx
│   │   └── index.js
│   └── styles.css
├── dist/
│   ├── test-npm.es.js
│   ├── test-npm.umd.js
│   └── test-npm-dilshadkt-2.css
├── package.json
├── vite.config.js
└── tailwind.config.js

Bundle Information

• JavaScript Bundle: ~10.4 kB (ES) / ~7.7 kB (UMD)
• CSS Bundle: ~12.6 kB (includes all Tailwind utilities used)
• Total Size: ~23 kB (very lightweight!)
• No External Dependencies: Everything is bundled