Tailwind CSS UI Library

This is a starter kit for a Tailwind CSS UI library using React components.

Setup

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Build for production:

   npm run build

Usage

Import components from the src/components directory:

import { Button } from './components/core/Button';

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

See individual component files for more detailed usage instructions.

Customization

Modify the tailwind.config.js file to customize your theme. Adjust global styles in src/styles/globals.css.

Contributing

🚀 Contributing to Ares UI

Thank you for considering contributing! This project welcomes improvements, bug fixes, new components, documentation updates, and ideas.

📌 Before You Start

Make sure you have Node.js and npm installed.

Fork the repository.

Create a new branch:

git checkout -b feature/your-feature-name

🛠️ Development Setup

Install dependencies:

npm install

Start the dev server:

npm run dev

📁 Project Structure

src/ components/ → Reusable UI components styles/ → Global styles & Tailwind setup utils/ → Helper utilities (if any) index.ts → Component exports for library build

✨ Contribution Types ✔ Add a new UI component

Follow these rules:

Use TypeScript.

Follow Tailwind utility-first best practices.

Keep components flexible with className and ...props.

Write examples if needed.

✔ Fix a bug

Describe the issue clearly in your PR.

Add reproduction steps if possible.

✔ Improve documentation

Update README or write component usage examples.

✔ Optimize performance or file structure

Ensure backward compatibility unless discussed first.

🔍 Code Style & Linting

Before submitting a PR, run:

```npm run lint``````

Fix any linting issues.

🧪 Testing Your Changes

Open the example playground:

npm run dev

Test UI components visually in the browser.

📬 Submitting a Pull Request

Push your branch:

git push origin feature/your-feature-name

Open a PR with:

A descriptive title

What you changed

Why you changed it

Screenshots if UI-related

We will review your PR soon!

Carousel

A responsive image carousel component with navigation controls.

Import

import Carousel from './src/navigation/Carousel';

Props

| Prop | Type | Default | Description | | :----------- | :------- | :---------- | :---------------------------------------------- | | items | Array | Required | An array of React nodes to display in the carousel.| | width | string | 'max-w-lg'| Tailwind CSS width class (e.g., 'w-full', 'max-w-xl'). | | autoplay | boolean| false | If true, the carousel will automatically advance slides.| | indicators | boolean| false | If true, displays navigation indicators (dots).|

Examples

import React from 'react';
import Carousel from './src/navigation/Carousel'; // Adjust path as needed

const CarouselExample = () => {
  const carouselItems = [
    <div className="flex items-center justify-center h-64 bg-blue-500 text-white text-3xl">Slide 1</div>,
    <div className="flex items-center justify-center h-64 bg-green-500 text-white text-3xl">Slide 2</div>,
    <div className="flex items-center justify-center h-64 bg-red-500 text-white text-3xl">Slide 3</div>,
  ];

  return (
    <div className="p-4">
      <h2 className="text-2xl font-bold mb-4">Carousel Examples</h2>
      <div className="mb-8">
        <h3 className="text-xl font-semibold mb-2">Basic Carousel</h3>
        <Carousel items={carouselItems} />
      </div>
      <div className="mb-8">
        <h3 className="text-xl font-semibold mb-2">Carousel with Custom Width</h3>
        <Carousel items={carouselItems} width="max-w-2xl" />
      </div>
    </div>
  );
};

export default CarouselExample;

Alert

A component to display contextual feedback messages for the user.

Import

import { Alert } from './src/components/core/Alert';

Props

| Prop | Type | Default | Description | | :-------- | :---------------------------------- | :--------- | :------------------------------------------------ | | type | 'success' | 'error' | 'warning' | 'info' | 'info' | The type of alert, determining its visual style. | | message | string | Required | The message content to display within the alert. | | onClose | function | undefined| Callback fired when the close button is clicked (if provided). |

Examples

import React, { useState } from 'react';
import { Alert } from './src/components/core/Alert'; // Adjust path as needed

const AlertExample = () => {
  const [showSuccessAlert, setShowSuccessAlert] = useState(true);
  const [showErrorAlert, setShowErrorAlert] = useState(true);

  return (
    <div className="flex flex-col space-y-4 p-4">
      <h2 className="text-2xl font-bold mb-4">Alert Examples</h2>

      {showSuccessAlert && (
        <Alert
          type="success"
          message="Your operation was completed successfully!"
          onClose={() => setShowSuccessAlert(false)}
        />
      )}

      {showErrorAlert && (
        <Alert
          type="error"
          message="There was an error processing your request."
          onClose={() => setShowErrorAlert(false)}
        />
      )}

      <Alert type="warning" message="This is a warning message that requires your attention." />
      <Alert type="info" message="This is an informational message." />
    </div>
  );
};

export default AlertExample;

Input

A basic text input field.

Import

import { Input } from './src/components/core/Input';

Props

| Prop | Type | Default | Description | | :------------ | :-------------------- | :---------- | :---------------------------------------------- | | type | 'text' \| 'password' \| 'search' | 'text' | The type of the input field. | | placeholder | string | undefined | Placeholder text for the input. | | value | string | undefined | The current value of the input. | | onChange | function | undefined | Callback fired when the input value changes. | | className | string | '' | Additional CSS classes to apply to the input. | | ...props | HTMLInputAttributes | | Any other standard HTML input attributes. |

Examples

import React, { useState } from 'react';
import { Input } from './src/components/core/Input'; // Adjust path as needed

const InputExample = () => {
  const [textValue, setTextValue] = useState('');
  const [passwordValue, setPasswordValue] = useState('');

  return (
    <div className="flex flex-col space-y-4 p-4">
      <h2 className="text-2xl font-bold mb-4">Input Examples</h2>

      <div>
        <label htmlFor="textInput" className="block text-gray-700 text-sm font-bold mb-2">Text Input:</label>
        <Input
          id="textInput"
          type="text"
          placeholder="Enter text"
          value={textValue}
          onChange={(e) => setTextValue(e.target.value)}
        />
        <p className="text-sm text-gray-600 mt-1">Current Value: {textValue}</p>
      </div>

      <div>
        <label htmlFor="passwordInput" className="block text-gray-700 text-sm font-bold mb-2">Password Input:</label>
        <Input
          id="passwordInput"
          type="password"
          placeholder="Enter password"
          value={passwordValue}
          onChange={(e) => setPasswordValue(e.target.value)}
        />
      </div>

      <div>
        <label htmlFor="searchInput" className="block text-gray-700 text-sm font-bold mb-2">Search Input:</label>
        <Input
          id="searchInput"
          type="search"
          placeholder="Search..."
        />
      </div>
    </div>
  );
};

export default InputExample;

Textarea

A multi-line text input field.

Import

import { Textarea } from './src/components/core/Input'; // Textarea is exported from Input.jsx

Props

| Prop | Type | Default | Description | | :------------ | :---------------------- | :---------- | :---------------------------------------------- | | placeholder | string | undefined | Placeholder text for the textarea. | | value | string | undefined | The current value of the textarea. | | onChange | function | undefined | Callback fired when the textarea value changes. | | rows | number | 4 | The number of visible text lines. | | className | string | '' | Additional CSS classes to apply to the textarea.| | ...props | HTMLTextareaAttributes| | Any other standard HTML textarea attributes. |

Examples

import React, { useState } from 'react';
import { Textarea } from './src/components/core/Input'; // Adjust path as needed

const TextareaExample = () => {
  const [textareaValue, setTextareaValue] = useState('');

  return (
    <div className="flex flex-col space-y-4 p-4">
      <h2 className="text-2xl font-bold mb-4">Textarea Example</h2>

      <div>
        <label htmlFor="textareaInput" className="block text-gray-700 text-sm font-bold mb-2">Message:</label>
        <Textarea
          id="textareaInput"
          placeholder="Enter your message"
          value={textareaValue}
          onChange={(e) => setTextareaValue(e.target.value)}
          rows={6}
        />
        <p className="text-sm text-gray-600 mt-1">Current Value: {textareaValue}</p>
      </div>
    </div>
  );
};

export default TextareaExample;

Checkbox

A single checkbox component.

Import

import { Checkbox } from './src/components/core/Checkbox';

Props

| Prop | Type | Default | Description | | :---------- | :---------- | :---------- | :---------------------------------------------- | | label | string | undefined | The label displayed next to the checkbox. | | checked | boolean | undefined | Whether the checkbox is checked. | | onChange | function | undefined | Callback fired when the checkbox state changes. | | className | string | '' | Additional CSS classes to apply to the checkbox. | | ...props | HTMLInputAttributes | | Any other standard HTML input attributes. |

Examples

import React, { useState } from 'react';
import { Checkbox } from './src/components/core/Checkbox'; // Adjust path as needed

const CheckboxExample = () => {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div className="p-4">
      <h2 className="text-2xl font-bold mb-4">Checkbox Example</h2>

      <Checkbox
        label="Subscribe to newsletter"
        checked={isChecked}
        onChange={(e) => setIsChecked(e.target.checked)}
      />
      <p className="mt-2 text-sm text-gray-600">Checkbox is {isChecked ? 'checked' : 'unchecked'}.</p>
    </div>
  );
};

export default CheckboxExample;

CheckboxGroup

A group of checkboxes, managing their state collectively.

Import

import { CheckboxGroup } from './src/components/core/Checkbox'; // CheckboxGroup is exported from Checkbox.jsx

Props

| Prop | Type | Default | Description | | :---------- | :---------- | :---------- | :---------------------------------------------- | | options | string[] | Required | An array of strings representing the checkbox labels/values. | | values | string[] | Required | An array of currently selected checkbox values. | | onChange | function | Required | Callback fired when the selection changes, receiving the new values array. |

Examples

import React, { useState } from 'react';
import { CheckboxGroup } from './src/components/core/Checkbox'; // Adjust path as needed

const CheckboxGroupExample = () => {
  const [selectedFruits, setSelectedFruits] = useState(['Apple']);
  const fruitOptions = ['Apple', 'Banana', 'Orange', 'Grape'];

  return (
    <div className="p-4">
      <h2 className="text-2xl font-bold mb-4">Checkbox Group Example</h2>

      <p className="block text-gray-700 text-sm font-bold mb-2">Select your favorite fruits:</p>
      <CheckboxGroup
        options={fruitOptions}
        values={selectedFruits}
        onChange={setSelectedFruits}
      />
      <p className="mt-2 text-sm text-gray-600">Selected fruits: {selectedFruits.join(', ') || 'None'}.</p>
    </div>
  );
};

export default CheckboxGroupExample;