React Kit US ABC 🚀

A modern, lightweight React UI components library built with TailwindCSS and TypeScript. Designed for rapid development with beautiful, consistent, and accessible components.

✨ Features

• 🎨 TailwindCSS - Utility-first CSS framework for styling
• 🔒 TypeScript - Full type safety and IntelliSense support
• ⚡ Lightweight - Minimal bundle size with tree-shaking support
• 🎯 Accessible - Built with accessibility best practices
• 🔧 Customizable - Easy to override styles and behavior
• 📱 Responsive - Mobile-first design approach

📦 Installation

npm install react-kit-us-abc

Peer Dependencies

Make sure you have React installed:

npm install react react-dom

🚀 Quick Start

import { Button } from "react-kit-us-abc";

function App() {
  return (
    <div className="space-y-4">
      {/* Basic button */}
      <Button onClick={() => alert("Hello World!")}>Click me</Button>

      {/* Button with variant and size */}
      <Button variant="success" size="lg">
        Success Button
      </Button>

      {/* Loading button */}
      <Button loading variant="primary">
        Processing...
      </Button>
    </div>
  );
}

📚 Components

Button

A versatile button component with multiple variants, sizes, and states built with TailwindCSS.

Basic Usage

import { Button } from "react-kit-us-abc";

function MyComponent() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return <Button onClick={handleClick}>Default Button</Button>;
}

Button Variants

// Primary (default)
<Button variant="primary">Primary</Button>

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

// Success
<Button variant="success">Success</Button>

// Danger
<Button variant="danger">Danger</Button>

// Warning
<Button variant="warning">Warning</Button>

// Outline
<Button variant="outline">Outline</Button>

Button Sizes

// Small
<Button size="sm">Small Button</Button>

// Medium (default)
<Button size="md">Medium Button</Button>

// Large
<Button size="lg">Large Button</Button>

Button States

// Loading state with spinner
<Button loading>Loading...</Button>

// Disabled state
<Button disabled>Disabled Button</Button>

// Combining states
<Button variant="success" size="lg" disabled>
  Large Disabled Success Button
</Button>

Custom Styling

// Override background color
<Button className="bg-red-500 hover:bg-red-600">
  Custom Red Button
</Button>

// Full width button
<Button className="w-full" variant="primary">
  Full Width Button
</Button>

// Custom outline button
<Button variant="outline" className="border-pink-500 text-pink-500 hover:bg-pink-500">
  Custom Pink Outline
</Button>

// Rounded button
<Button className="rounded-full" size="lg">
  Rounded Button
</Button>

Props

| Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------------------------- | ----------- | --------------------------------------- | | children | ReactNode | - | Button content | | variant | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'outline' | 'primary' | Button style variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | loading | boolean | false | Show loading spinner and disable button | | className | string | "" | Additional CSS classes | | onClick | function | - | Click handler | | disabled | boolean | false | Disable the button | | type | "button" \| "submit" \| "reset" | "button" | Button type | | ...props | ButtonHTMLAttributes | - | All standard button attributes |

Real-world Examples

// Login form
function LoginForm() {
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    setLoading(true);
    // API call...
    setLoading(false);
  };

  return (
    <div className="space-y-4">
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />

      <Button
        variant="primary"
        size="lg"
        loading={loading}
        onClick={handleLogin}
        className="w-full"
      >
        {loading ? "Signing in..." : "Sign In"}
      </Button>
    </div>
  );
}

// Action buttons
function ActionBar() {
  return (
    <div className="flex gap-2">
      <Button variant="success" size="sm">
        Save
      </Button>
      <Button variant="secondary" size="sm">
        Cancel
      </Button>
      <Button variant="danger" size="sm">
        Delete
      </Button>
    </div>
  );
}

🎨 Styling with TailwindCSS

This library is built with TailwindCSS. For best results, make sure your project has TailwindCSS configured:

1. Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Sửa file tailwind.config.js: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/.{js,jsx,ts,tsx}", "./node_modules/react-kit-us-abc/**/.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], }

Trong file index.css hoặc src/App.css: @tailwind base; @tailwind components; @tailwind utilities;

Trong index.tsx: import './index.css';

🛠️ Development

Local Development

# Clone the repository
git clone https://github.com/nguyenbao2004Ts/ui-kit-react.git
cd ui-kit-react

# Install dependencies
npm install

# Start development server with demo
npm run demo

# Build the library
npm run build

Project Structure

src/
├── components/
│   └── Button.tsx
├── styles/
│   └── global.css
├── index.ts
└── demo.tsx

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Nguyen Bao - [email protected]

• GitHub: @nguyenbao2004Ts

🙏 Acknowledgments

• TailwindCSS - For the amazing utility-first CSS framework
• React - For the incredible UI library
• Vite - For the lightning-fast build tool

Made with ❤️ by Nguyen Bao