My Awesome Components

A collection of beautiful React components built with Tailwind CSS.

Installation

npm install my-awesome-components-dilshad

Prerequisites

This package requires the following peer dependencies to be installed in your project:

npm install react react-dom tailwindcss

Usage

Setup Tailwind CSS

Make sure you have Tailwind CSS configured in your project. The components use Tailwind classes and require Tailwind CSS to be available.

Import and Use Components

import { Button } from "my-awesome-components-dilshad";

function App() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">My App</h1>

      <Button variant="primary" size="medium">
        Primary Button
      </Button>

      <Button variant="secondary" size="large">
        Secondary Button
      </Button>

      <Button variant="danger" size="small">
        Danger Button
      </Button>
    </div>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

Props

• variant: "primary" | "secondary" | "danger" (default: "primary")
• size: "small" | "medium" | "large" (default: "medium")
• disabled: boolean (default: false)
• className: string - Additional CSS classes
• All standard button HTML attributes

Examples

// Primary button
<Button variant="primary">Click me</Button>

// Secondary button with custom size
<Button variant="secondary" size="large">Large Button</Button>

// Disabled danger button
<Button variant="danger" disabled>Cannot Click</Button>

// With custom classes
<Button className="mt-4 w-full">Full Width Button</Button>

Development

# Install dependencies
npm install

# Start development mode
npm run dev

# Build for production
npm run build

# Type checking
npm run typecheck

License

MIT