Simple UI Package

A collection of reusable React components built with Tailwind CSS.

Installation

npm install simple-ui-package-dilshad

Quick Setup

For Projects with Tailwind CSS

import React from "react";
import { Button, Card, ChangeColor } from "simple-ui-package-dilshad";
import "simple-ui-package-dilshad/style.css"; // ⚠️ IMPORTANT: Import styles

function App() {
  return (
    <div className="p-4">
      <Card title="Welcome" subtitle="This is a sample card">
        <ChangeColor text="Hello World!" />
        <div className="mt-4 space-x-2">
          <Button variant="primary">Primary Button</Button>
          <Button variant="secondary">Secondary Button</Button>
        </div>
      </Card>
    </div>
  );
}

For Projects without Tailwind CSS

1. Install Tailwind CSS:

npm install tailwindcss @tailwindcss/vite

2. Create tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/simple-ui-package-dilshad/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Import styles in your CSS:

@import "tailwindcss";
@import "simple-ui-package-dilshad/style.css";

Components

ChangeColor

A simple component that displays text with a red background.

Props:

• text (string): The text to display

Example:

<ChangeColor text="This is some text" />

Button

A customizable button component with multiple variants and sizes.

Props:

• children (ReactNode): Button content
• variant (string): Button style variant - "primary", "secondary", "success", "danger", "outline" (default: "primary")
• size (string): Button size - "small", "medium", "large" (default: "medium")
• onClick (function): Click handler
• disabled (boolean): Disable the button (default: false)
• className (string): Additional CSS classes

Example:

<Button variant="primary" size="large" onClick={() => alert("Clicked!")}>
  Click Me
</Button>

Card

A flexible card component for displaying content with optional title and subtitle.

Props:

• children (ReactNode): Card content
• title (string): Card title (optional)
• subtitle (string): Card subtitle (optional)
• padding (string): Padding size - "none", "small", "medium", "large" (default: "medium")
• shadow (string): Shadow size - "none", "small", "medium", "large", "xl" (default: "medium")
• className (string): Additional CSS classes

Example:

<Card title="User Profile" subtitle="John Doe" padding="large" shadow="xl">
  <p>This is the card content.</p>
</Card>

⚠️ Important Notes

Tailwind CSS Requirements

This package uses Tailwind CSS v4 and requires proper setup:

1. Always import the CSS: import 'simple-ui-package-dilshad/style.css'
2. Include package in Tailwind config: Add "./node_modules/simple-ui-package-dilshad/**/*.{js,jsx,ts,tsx}" to your content array
3. Use compatible Tailwind version: The package is built with Tailwind CSS v4

Troubleshooting

If styles aren't working:

1. Check that you've imported the CSS file
2. Ensure your Tailwind config includes the package
3. Verify Tailwind CSS is properly installed and configured

For detailed setup instructions, see TAILWIND_SETUP_GUIDE.md

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build:lib

# Lint code
npm run lint

Publishing

# Build and publish to npm
npm publish

License

MIT