Tail React

https://github.com/wedevsofficial/tail-react
Admin
A React UI component library based on Tailwind CSS.
Tokens:19,350
Snippets:252
Trust Score:7.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://github.com/wedevsofficial/tail-react/blob/main/README.md

Start the development server using npm.

```bash
npm run dev
```

--------------------------------

### Install Dependencies for Development

Source: https://github.com/wedevsofficial/tail-react/blob/main/README.md

Install project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install Notice Component

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Install the @wedevs/tail-react package to use the Notice component. This can be done using npm or yarn.

```bash
npm install @wedevs/tail-react
# or
yarn add @wedevs/tail-react
```

--------------------------------

### Modal Sizes

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Modal/README.md

Examples showing how to set the maximum width of the modal using the maxWidth prop. Available options are 'sm', 'lg', and '2xl'.

```jsx
<Modal isOpen={isOpen} onClose={onClose} maxWidth="sm">
  {/* Small modal content */}
</Modal>

<Modal isOpen={isOpen} onClose={onClose} maxWidth="lg">
  {/* Large modal content */}
</Modal>

<Modal isOpen={isOpen} onClose={onClose} maxWidth="2xl">
  {/* Extra large modal content */}
</Modal>
```

--------------------------------

### Button Component Usage Examples

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Button/README.md

Demonstrates various ways to use the Button component, including different variants, styles, sizes, loading states, and as a link.

```jsx
import React, { useState } from 'react';
import { Button } from '@wedevs/tail-react';

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    setIsLoading(true);
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsLoading(false);
  };

  return (
    <div className="space-y-4">
      {/* Basic Button */}
      <Button onClick={() => console.log('Clicked!')}>Click Me</Button>

      {/* Different Variants */}
      <div className="space-x-2">
        <Button variant="primary">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="danger">Danger</Button>
      </div>

      {/* Different Styles */}
      <div className="space-x-2">
        <Button style="fill">Fill</Button>
        <Button style="outline">Outline</Button>
        <Button style="link">Link</Button>
      </div>

      {/* Different Sizes */}
      <div className="space-x-2">
        <Button size="small">Small</Button>
        <Button size="medium">Medium</Button>
        <Button size="large">Large</Button>
      </div>

      {/* Loading State */}
      <Button loading={isLoading} onClick={handleSubmit}>
        {isLoading ? 'Submitting...' : 'Submit Form'}
      </Button>

      {/* Link Button */}
      <Button as="a" href="https://example.com" target="_blank" rel="noopener noreferrer">
        Visit Website
      </Button>
    </div>
  );
};

export default MyComponent;
```

--------------------------------

### API-driven Pagination Example

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Pagination/README.md

Demonstrates how to use the Pagination component with API-driven data. It fetches items from an API and displays them using the Pagination component with information display enabled.

```jsx
const fetchItems = async (page = 1) => {
  const response = await fetch(`/api/items?page=${page}`);
  const data = await response.json();
  setPaginationData(data);
};

<Pagination
  data={paginationData}
  showInfo={true}
/>
```

--------------------------------

### Client-side Pagination Example

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Pagination/README.md

Illustrates client-side pagination using the Pagination component. It calculates total pages, slices items for the current page, and configures the Pagination component with custom button styling.

```jsx
const itemsPerPage = 10;
const totalPages = Math.ceil(allItems.length / itemsPerPage);
const currentItems = allItems.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
);

const paginationData = {
  data: currentItems,
  links: Array.from({ length: totalPages }, (_, i) => ({
    label: (i + 1).toString(),
    url: null, // Handle navigation in onClick
    active: i + 1 === currentPage,
    page: i + 1,
  })),
  current_page: currentPage,
  last_page: totalPages,
  next_page_url: currentPage < totalPages ? '#' : null,
  prev_page_url: currentPage > 1 ? '#' : null,
  per_page: itemsPerPage,
  total: allItems.length,
  from: (currentPage - 1) * itemsPerPage + 1,
  to: Math.min(currentPage * itemsPerPage, allItems.length),
};

<Pagination
  data={paginationData}
  paginationButtonAs="button"
/>
```

--------------------------------

### Table with Actions

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Table/README.md

Example of a table displaying user data with 'Edit' and 'Delete' action buttons in each row.

```jsx
<Table>
  <TableHeader>
    <th>Name</th>
    <th>Email</th>
    <th>Actions</th>
  </TableHeader>
  <TableBody
    items={users}
    renderRow={(user) => (
      <tr>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>
          <button onClick={() => handleEdit(user)}>Edit</button>
          <button onClick={() => handleDelete(user)}>Delete</button>
        </td>
      </tr>
    )}
  />
</Table>
```

--------------------------------

### Basic Popover Example

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Popover/README.md

A simple Popover with a trigger button and content. Ensure the Popover component is imported.

```jsx
import { Popover } from '@wedevs/tail-react';

function MyComponent() {
  return (
    <Popover trigger={<button>Click Me</button>} side="top">
      <div className="p-4">
        <h3 className="text-lg font-semibold">Popover Title</h3>
        <p>This is the popover content.</p>
      </div>
    </Popover>
  );
}
```

--------------------------------

### Badge Component Examples

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Badge/README.md

Demonstrates various ways to use the Badge component, including different types, flat styles, custom classes, and React nodes as labels.

```jsx
import { Badge } from '@wedevs/tail-react';

function StatusIndicators() {
  return (
    <div className="space-y-4">
      {/* Basic badges with different types */}
      <div className="space-x-2">
        <Badge label="Default" />
        <Badge label="Completed" type="success" />
        <Badge label="Pending" type="warning" />
        <Badge label="Failed" type="error" />
        <Badge label="Note" type="info" />
      </div>

      {/* Flat badges (no border) */}
      <div className="space-x-2">
        <Badge label="Default" border={false} />
        <Badge label="Completed" type="success" border={false} />
        <Badge label="Pending" type="warning" border={false} />
        <Badge label="Failed" type="error" border={false} />
        <Badge label="Note" type="info" border={false} />
      </div>

      {/* With custom className */}
      <Badge label="Custom" className="px-4 py-2 text-sm" />

      {/* With React node as label */}
      <Badge
        label={
          <span className="flex items-center">
            <span className="w-2 h-2 rounded-full bg-current mr-1" />
            Active
          </span>
        }
        type="success"
      />
    </div>
  );
}
```

--------------------------------

### Basic Checkbox Examples

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Checkbox/README.md

Illustrates various ways to use the Checkbox component, including basic checkboxes, those with help text, disabled checkboxes, pre-checked options, and custom styling.

```jsx
import { Checkbox } from '@wedevs/tail-react';

function FormExample() {
  const [notifications, setNotifications] = React.useState(false);
  const [marketing, setMarketing] = React.useState(false);

  return (
    <div className="space-y-4">
      {/* Basic checkbox */}
      <Checkbox label="Enable notifications" checked={notifications} onChange={setNotifications} />

      {/* Checkbox with help text */}
      <Checkbox
        label="Receive marketing emails"
        checked={marketing}
        onChange={setMarketing}
        help="We'll send you updates about new features and special offers"
      />

      {/* Disabled checkbox */}
      <Checkbox label="Premium features" disabled help="Available only for premium users" />

      {/* Pre-checked checkbox */}
      <Checkbox
        label="Accept terms and conditions"
        checked
        onChange={(checked) => console.log('Terms accepted:', checked)}
      />

      {/* Custom styled checkbox */}
      <Checkbox
        label="Custom style"
        className="h-5 w-5 text-purple-600"
        labelClassName="text-purple-900 font-bold"
      />
    </div>
  );
}
```

--------------------------------

### RadioGroup with Custom Options

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/RadioGroup/README.md

Demonstrates how to define custom options for the RadioGroup component, allowing for flexible value and key assignments. This example shows theme selection.

```jsx
<RadioGroup
  label="Select a theme"
  options={[
    { value: 'Light', key: 'light' },
    { value: 'Dark', key: 'dark' },
    { value: 'System', key: 'system' },
  ]}
  value={selectedTheme}
  onChange={setSelectedTheme}
/>
```

--------------------------------

### ConfirmModal Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Modal/README.md

Example of how to use the ConfirmModal component for delete confirmations.

```APIDOC
## ConfirmModal Component

The `ConfirmModal` is a specialized modal for confirmation dialogs:

```jsx
import { ConfirmModal } from '@wedevs/tail-react';

function DeleteConfirmation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="danger" onClick={() => setIsOpen(true)}>
        Delete Account
      </Button>

      <ConfirmModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Delete Account"
        message="Are you sure you want to delete your account? This action cannot be undone."
        buttonVariant="danger"
        buttonLabel="Delete"
        onConfirm={async () => {
          // Handle deletion
          await deleteAccount();
          setIsOpen(false);
        }}
      />
    </>
  );
}
```

### ConfirmModal Props

- `isOpen` (boolean, required): Controls modal visibility
- `title` (string, required): Confirmation title
- `message` (string, required): Confirmation message
- `buttonVariant` ('primary' | 'secondary' | 'danger', optional): Action button style
- `buttonLabel` (string, optional): Action button text
- `onClose` (() => void, required): Close handler
- `onConfirm` (() => Promise<void> | void, required): Confirmation handler
```

--------------------------------

### Tooltip Examples with Different Positions

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Tooltip/README.md

Demonstrate the 'side' prop by rendering tooltips in all four positions: top, right, bottom, and left. This showcases the component's flexibility in placement.

```jsx
<div className="space-x-4">
  <Tooltip content="Top tooltip" side="top">
    <button>Top</button>
  </Tooltip>
  <Tooltip content="Right tooltip" side="right">
    <button>Right</button>
  </Tooltip>
  <Tooltip content="Bottom tooltip" side="bottom">
    <button>Bottom</button>
  </Tooltip>
  <Tooltip content="Left tooltip" side="left">
    <button>Left</button>
  </Tooltip>
</div>
```

--------------------------------

### Dropdown with Button Component

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Dropdown/README.md

Example of using the Dropdown component with a custom Button component and ChevronDownIcon for the trigger.

```jsx
<Dropdown
  button={
    <Button variant="secondary">
      Options <ChevronDownIcon className="w-5 h-5 ml-2" />
    </Button>
  }
>
  <div className="py-1">
    <DropdownItem className="px-4 py-2 text-sm">Account settings</DropdownItem>
    <DropdownItem className="px-4 py-2 text-sm">Support</DropdownItem>
    <DropdownItem className="px-4 py-2 text-sm">Sign out</DropdownItem>
  </div>
</Dropdown>
```

--------------------------------

### Popover with Form Content

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Popover/README.md

Integrates a form within the Popover content. This example demonstrates using a form for user input, with a close button enabled.

```jsx
<Popover trigger={<button>Edit Profile</button>} side="bottom" showCloseButton>
  <form className="p-4 space-y-4">
    <div>
      <label className="block text-sm font-medium">Name</label>
      <input type="text" className="mt-1 block w-full" />
    </div>
    <button type="submit" className="w-full">
      Save
    </button>
  </form>
</Popover>
```

--------------------------------

### RadioGroup with Form Integration

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/RadioGroup/README.md

Shows how to integrate the RadioGroup component within a standard HTML form. This example includes a submit button and handles form submission with the selected category.

```jsx
<form onSubmit={handleSubmit}>
  <RadioGroup
    label="Select a category"
    required
    options={categories}
    value={selectedCategory}
    onChange={setSelectedCategory}
  />
  <button type="submit">Submit</button>
</form>
```

--------------------------------

### Textarea with Custom Styling

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Textarea/README.md

Apply custom styles to the Textarea component using the 'className', 'labelClassName', and 'wrapperClassName' props. This example applies font and size classes.

```jsx
<Textarea
  label="Custom Styled"
  value={value}
  onChange={setValue}
  className="font-mono text-sm"
  labelClassName="text-purple-600"
  wrapperClassName="max-w-2xl"
/>
```

--------------------------------

### Build the Library

Source: https://github.com/wedevsofficial/tail-react/blob/main/README.md

Build the component library using npm.

```bash
npm run build
```

--------------------------------

### Textarea with Custom Rows

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Textarea/README.md

Control the visible height of the Textarea component by setting the 'rows' prop. This example sets it to 6 rows.

```jsx
<Textarea
  label="Long Description"
  value={description}
  onChange={setDescription}
  rows={6}
  help="Please provide a detailed description of your project."
/>
```

--------------------------------

### TextField with Contextual Help

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/TextField/README.md

Illustrates providing detailed contextual help content for the TextField, including requirements.

```jsx
<TextField
  label="Password"
  value={password}
  onChange={setPassword}
  type="password"
  contextualHelp={
    <>
      <h3 className="font-medium text-gray-900">Password Requirements</h3>
      <ul className="mt-2 text-sm text-gray-500">
        <li>At least 8 characters</li>
        <li>One uppercase letter</li>
        <li>One number</li>
      </ul>
    </>
  }
/>
```

--------------------------------

### Run Storybook

Source: https://github.com/wedevsofficial/tail-react/blob/main/README.md

Run Storybook to view and test components using npm.

```bash
npm run storybook
```

--------------------------------

### SwitchInput with Help Text

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SwitchInput/README.md

Shows how to add plain text help information below the SwitchInput.

```jsx
<SwitchInput
  label="Enable dark mode"
  help="Switch between light and dark theme"
  initialValue={isDarkMode}
  onChange={setIsDarkMode}
/>
```

--------------------------------

### Basic Modal Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Modal/README.md

Demonstrates how to use the Modal component with Header, Body, and Actions. Requires useState for managing modal visibility.

```jsx
import { Modal, ModalHeader, ModalBody, ModalActions } from '@wedevs/tail-react';
import { Button } from '@wedevs/tail-react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <ModalHeader>Need Help?</ModalHeader>
        <ModalBody>
          <p className="text-sm text-gray-500">
            If you're having trouble accessing your account, contact our customer support team for
            help.
          </p>
        </ModalBody>
        <ModalActions>
          <Button variant="primary" onClick={() => setIsOpen(false)}>
            Contact Support
          </Button>
          <Button variant="secondary" onClick={() => setIsOpen(false)}>
            Close
          </Button>
        </ModalActions>
      </Modal>
    </>
  );
}
```

--------------------------------

### Feature Explanation with ContextualHelp

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/ContextualHelp/README.md

Integrate this snippet to provide detailed explanations for features, using lists to outline benefits or functionalities.

```jsx
// Feature explanation
<div className="feature-card">
  <h3>Advanced Analytics
    <ContextualHelp>
      <div className="space-y-2">
        <p className="text-sm">
          Advanced Analytics provides deeper insights into your data:
        </p>
        <ul className="list-disc pl-4 text-sm">
          <li>Custom report generation</li>
          <li>Real-time data tracking</li>
          <li>Predictive analysis</li>
        </ul>
      </div>
    </ContextualHelp>
  </h3>
</div>
```

--------------------------------

### Basic Table Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Table/README.md

Demonstrates how to use the Table, TableHeader, and TableBody components to display basic tabular data.

```jsx
import { Table, TableHeader, TableBody } from '@wedevs/tail-react';

function MyComponent() {
  const data = [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 28 },
  ];

  return (
    <Table>
      <TableHeader>
        <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">ID</th>
        <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Name</th>
        <th className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Age</th>
      </TableHeader>
      <TableBody
        items={data}
        renderRow={(item) => (
          <tr>
            <td className="px-3 py-4 text-sm text-gray-500">{item.id}</td>
            <td className="px-3 py-4 text-sm text-gray-500">{item.name}</td>
            <td className="px-3 py-4 text-sm text-gray-500">{item.age}</td>
          </tr>
        )}
      />
    </Table>
  );
}
```

--------------------------------

### TextField with Addons

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/TextField/README.md

Illustrates using the TextField component with prefix and suffix addons.

```jsx
<TextField
  label="Website"
  value={website}
  onChange={setWebsite}
  addon={<span className="text-gray-500">https://</span>}
  trailingAddon={<span className="text-gray-500">.com</span>}
/>
```

--------------------------------

### Basic TextField Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/TextField/README.md

Demonstrates the basic usage of the TextField component with a label, value, and onChange handler.

```jsx
import { TextField } from '@wedevs/tail-react';

function MyComponent() {
  const [value, setValue] = useState('');

  return (
    <TextField
      label="First Name"
      value={value}
      onChange={setValue}
      placeholder="Enter your first name"
    />
  );
}
```

--------------------------------

### Safelist Dynamic Color Classes in Tailwind CSS v3

Source: https://github.com/wedevsofficial/tail-react/blob/main/README.md

To prevent dynamic color classes from being purged in production with Tailwind CSS v3, safelist them in your tailwind.config.js using patterns. This example shows safelisting for background, text, and ring utilities.

```js
// tailwind.config.js
module.exports = {
  // ... your existing config
  safelist: [
    // Safelist color variants that you plan to use dynamically
    {
      pattern: /bg-(red|blue|green|purple|indigo|etc)-(500|600|700)/,
    },
    {
      pattern: /text-(red|blue|green|purple|indigo|etc)-(500|600)/,
    },
    {
      pattern: /ring-(red|blue|green|purple|indigo|etc)-(400|500|600)/,
    },
    // Add other patterns based on which color utilities you use
  ],
  // ... rest of your config
};
```

--------------------------------

### Basic Pagination Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Pagination/README.md

Demonstrates the basic implementation of the Pagination component by passing the required pagination data. This is the simplest way to integrate the component into your application.

```jsx
import React from 'react';
import { Pagination } from '@wedevs/tail-react';

const MyComponent = () => {
  // Example pagination data (typically from an API)
  const paginationData = {
    data: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      // ... more items
    ],
    links: [
      { label: '1', url: '/api/items?page=1', active: true, page: 1 },
      { label: '2', url: '/api/items?page=2', active: false, page: 2 },
      { label: '3', url: '/api/items?page=3', active: false, page: 3 },
    ],
    current_page: 1,
    last_page: 3,
    first_page_url: '/api/items?page=1',
    last_page_url: '/api/items?page=3',
    next_page_url: '/api/items?page=2',
    prev_page_url: null,
    path: '/api/items',
    per_page: 10,
    total: 25,
    from: 1,
    to: 10,
  };

  return (
    <div className="space-y-4">
      {/* Basic Pagination */}
      <Pagination data={paginationData} />

      {/* Pagination with Info */}
      <Pagination
        data={paginationData}
        showInfo={true}
      />

      {/* Centered Pagination with Outline Buttons */}
      <Pagination
        data={paginationData}
        align="center"
        buttonStyle="outline"
      />

      {/* Pagination using button elements instead of links */}
      <Pagination
        data={paginationData}
        paginationButtonAs="button"
      />
    </div>
  );
};

export default MyComponent;
```

--------------------------------

### Basic SwitchInput Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SwitchInput/README.md

Demonstrates the basic usage of the SwitchInput component with a label and state management.

```jsx
import { SwitchInput } from '@wedevs/tail-react';

function MyComponent() {
  const [enabled, setEnabled] = useState(false);

  return <SwitchInput label="Enable notifications" initialValue={enabled} onChange={setEnabled} />;
}
```

--------------------------------

### SwitchInput with HTML Help Text

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SwitchInput/README.md

Enables rendering of HTML content within the help text for the SwitchInput.

```jsx
<SwitchInput
  label="Enable advanced features"
  help="<strong>Warning:</strong> This will enable experimental features that may be unstable."
  html
  initialValue={isAdvanced}
  onChange={setIsAdvanced}
/>
```

--------------------------------

### Basic Textarea Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Textarea/README.md

Demonstrates the basic usage of the Textarea component with a label, value, and onChange handler. Ensure you import Textarea and useState.

```jsx
import { Textarea } from '@wedevs/tail-react';

function MyComponent() {
  const [value, setValue] = useState('');

  return (
    <Textarea
      label="About"
      value={value}
      onChange={setValue}
      placeholder="Tell us about yourself"
    />
  );
}
```

--------------------------------

### Using ConfirmModal for Account Deletion

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Modal/README.md

Demonstrates how to integrate the ConfirmModal for a user confirmation before performing a destructive action like account deletion. It manages the modal's open state and handles the confirmation logic.

```jsx
import { ConfirmModal } from '@wedevs/tail-react';

function DeleteConfirmation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="danger" onClick={() => setIsOpen(true)}>
        Delete Account
      </Button>

      <ConfirmModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Delete Account"
        message="Are you sure you want to delete your account? This action cannot be undone."
        buttonVariant="danger"
        buttonLabel="Delete"
        onConfirm={async () => {
          // Handle deletion
          await deleteAccount();
          setIsOpen(false);
        }}
      />
    </>
  );
}
```

--------------------------------

### Tag the release

Source: https://github.com/wedevsofficial/tail-react/blob/main/RELEASE.md

Create an annotated Git tag for the new release version. Replace X.X.X with the actual version number.

```shell
git tag -a vX.X.X -m "Release vX.X.X"
```

--------------------------------

### Basic Notice Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Render a basic success notice with a label. Ensure the Notice component is imported from @wedevs/tail-react.

```jsx
import { Notice } from '@wedevs/tail-react';

function MyComponent() {
  return <Notice label="Order completed" type="success" />;
}
```

--------------------------------

### SelectInput with Help Text

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectInput/README.md

Shows how to add help text to the SelectInput component to provide additional guidance to the user. The help text appears below the input.

```jsx
<SelectInput
  label="Select a category"
  help="Please choose the most appropriate category for your content"
  options={categories}
  selectedKey={selectedCategory}
  onChange={setSelectedCategory}
/>
```

--------------------------------

### Basic Usage of ContextualHelp

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/ContextualHelp/README.md

Import and use the ContextualHelp component in your React application. It wraps content that will be displayed in a tooltip when the question mark icon is clicked.

```jsx
import { ContextualHelp } from '@wedevs/tail-react';

function MyComponent() {
  return (
    <div className="flex items-center gap-2">
      <span>Account Status</span>
      <ContextualHelp>
        <h3 className="mb-2 font-medium text-gray-900">Account Status Help</h3>
        <p className="text-sm text-gray-500">
          Your account status indicates whether your account is active, pending, or requires
          verification. A verified account has full access to all features.
        </p>
      </ContextualHelp>
    </div>
  );
}
```

--------------------------------

### Basic Dropdown Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Dropdown/README.md

Import and use the Dropdown and DropdownItem components to create a basic dropdown menu. The 'button' prop defines the trigger, and 'children' contain the menu items.

```jsx
import { Dropdown, DropdownItem } from '@wedevs/tail-react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';

function MyComponent() {
  return (
    <Dropdown
      button={
        <button className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
          Options
          <ChevronDownIcon className="ml-2 -mr-1 h-5 w-5" aria-hidden="true" />
        </button>
      }
    >
      <div className="absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">
        <DropdownItem className="block px-4 py-2 text-sm text-gray-700">Edit</DropdownItem>
        <DropdownItem className="block px-4 py-2 text-sm text-gray-700">Duplicate</DropdownItem>
        <DropdownItem className="block px-4 py-2 text-sm text-gray-700">Delete</DropdownItem>
      </div>
    </Dropdown>
  );
}
```

--------------------------------

### Dropdown with Header and Dividers

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Dropdown/README.md

Demonstrates a Dropdown with a header section, main menu items, and a footer section, separated by dividers.

```jsx
<Dropdown
  button={
    <Button variant="secondary">
      Settings <ChevronDownIcon className="w-5 h-5 ml-2" />
    </Button>
  }
>
  <div className="divide-y divide-gray-100">
    {/* Header section */}
    <div className="px-4 py-3">
      <p className="text-sm">Signed in as</p>
      <p className="text-sm font-medium text-gray-900">tom@example.com</p>
    </div>

    {/* Main menu items */}
    <div className="py-1">
      <DropdownItem className="px-4 py-2 text-sm">Your Profile</DropdownItem>
      <DropdownItem className="px-4 py-2 text-sm">Settings</DropdownItem>
    </div>

    {/* Footer section */}
    <div className="py-1">
      <DropdownItem className="px-4 py-2 text-sm text-red-700">Sign out</DropdownItem>
    </div>
  </div>
</Dropdown>
```

--------------------------------

### Custom Modal Styling

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Modal/README.md

Demonstrates how to apply custom styling to ModalHeader, ModalBody, and ModalActions using the className prop.

```jsx
<Modal isOpen={isOpen} onClose={onClose}>
  <ModalHeader className="bg-gray-50">Custom Header</ModalHeader>
  <ModalBody className="bg-white">
    <div className="custom-content">{/* Custom content */}</div>
  </ModalBody>
  <ModalActions className="bg-gray-50">{/* Custom actions */}</ModalActions>
</Modal>
```

--------------------------------

### Basic SelectInput Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectInput/README.md

Demonstrates the basic usage of the SelectInput component with a label and a list of options. It uses React's useState hook to manage the selected option.

```jsx
import { SelectInput } from '@wedevs/tail-react';

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectInput
      label="Select an option"
      options={[
        { value: 'Option 1', key: 'option1' },
        { value: 'Option 2', key: 'option2' },
        { value: 'Option 3', key: 'option3' },
      ]}
      selectedKey={selectedOption?.key}
      onChange={setSelectedOption}
    />
  );
}
```

--------------------------------

### Form Field Explanation with ContextualHelp

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/ContextualHelp/README.md

Use this snippet to add contextual help to form fields, explaining the purpose or requirements of an input.

```jsx
// Form field explanation
<div className="form-group">
  <label>API Key</label>
  <ContextualHelp>
    <h4 className="font-medium">About API Keys</h4>
    <p className="text-sm text-gray-600">
      API keys are used to authenticate your requests.
      Keep them secure and never share them publicly.
    </p>
  </ContextualHelp>
  <input type="text" />
</div>
```

--------------------------------

### Import and Use Checkbox Component

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Checkbox/README.md

Demonstrates how to import and use the Checkbox component in a React application. It shows basic usage with a label, checked state management, and help text.

```jsx
import { Checkbox } from '@wedevs/tail-react';

function MyForm() {
  const [isChecked, setIsChecked] = React.useState(false);

  return (
    <Checkbox
      label="Subscribe to newsletter"
      checked={isChecked}
      onChange={setIsChecked}
      help="Receive updates about our latest products and offers"
    />
  );
}
```

--------------------------------

### Notice with Description

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Display a notice with a main label and additional descriptive content passed as children. This is useful for providing more context.

```jsx
<Notice label="Order completed" type="success">
  Your order has been successfully processed and will be shipped within 2-3 business days.
</Notice>
```

--------------------------------

### Table with Status Indicators

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Table/README.md

Demonstrates how to display order status using colored badges within a table.

```jsx
<Table>
  <TableHeader>
    <th>Order ID</th>
    <th>Status</th>
    <th>Amount</th>
  </TableHeader>
  <TableBody
    items={orders}
    renderRow={(order) => (
      <tr>
        <td>{order.id}</td>
        <td>
          <span
            className={`px-2 py-1 rounded-full text-xs ${order.status === 'completed' ? 'bg-green-100 text-green-800' : order.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}`}
          >
            {order.status}
          </span>
        </td>
        <td>${order.amount}</td>
      </tr>
    )}
  />
</Table>
```

--------------------------------

### Basic SelectCard Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectCard/README.md

Demonstrates the basic usage of the SelectCard component with a label and a list of options. It manages the selected option state using useState.

```jsx
import { SelectCard } from '@wedevs/tail-react';

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectCard
      label="Select an option"
      options={[
        { value: 'Option 1', key: 'option1' },
        { value: 'Option 2', key: 'option2' },
        { value: 'Option 3', key: 'option3' },
      ]}
      selectedKey={selectedOption?.key}
      onChange={setSelectedOption}
      renderItem={(item) => item.value}
    />
  );
}
```

--------------------------------

### TextField with Keyboard Shortcut Addon

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/TextField/README.md

Shows how to use a keyboard shortcut indicator as a trailing addon for the TextField.

```jsx
<TextField
  label="Search"
  value={search}
  onChange={setSearch}
  trailingAddon={
    <kbd className="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">
      ⌘K
    </kbd>
  }
/>
```

--------------------------------

### SelectCard with Custom Content Rendering

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectCard/README.md

Shows how to use the renderItem prop to display custom content for each option, including icons and titles, for a more visually rich selection.

```jsx
<SelectCard
  label="Select a cloud provider"
  options={[
    {
      key: 'aws',
      title: 'AWS',
      icon: <AWSIcon />,
    },
    {
      key: 'gcp',
      title: 'Google Cloud',
      icon: <GCPIcon />,
    },
  ]}
  renderItem={(item) => (
    <div className="flex flex-col items-center gap-2">
      <div className="w-12">{item.icon}</div>
      <span>{item.title}</span>
    </div>
  )}
/>
```

--------------------------------

### TextField with Icon Addon

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/TextField/README.md

Demonstrates adding an icon as a prefix addon to the TextField component.

```jsx
import { UserIcon } from '@heroicons/react/24/outline';

<TextField
  label="Username"
  value={username}
  onChange={setUsername}
  addon={
    <span className="text-gray-500">
      <UserIcon className="h-5 w-5" />
    </span>
  }
/>;
```

--------------------------------

### Basic Tooltip Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Tooltip/README.md

Implement a basic tooltip by wrapping an element with the Tooltip component and providing a string for the 'content' prop. The 'children' prop is the element that triggers the tooltip on hover or focus.

```jsx
import { Tooltip } from '@wedevs/tail-react';

function MyComponent() {
  return (
    <Tooltip content="Click to edit">
      <button className="p-2 border rounded">Edit</button>
    </Tooltip>
  );
}
```

--------------------------------

### SelectCard with Help Text and Error State

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectCard/README.md

Illustrates how to provide help text and display an error message for the SelectCard component, along with marking it as required.

```jsx
<SelectCard
  label="Select an option"
  help="Please choose one of the available options"
  error="This field is required"
  required
  options={options}
  renderItem={(item) => item.value}
/>
```

--------------------------------

### SelectInput with Custom Styling

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectInput/README.md

Demonstrates how to apply custom styling to the SelectInput component using the `className` and `wrapperClassName` props. This allows for visual customization to match your application's theme.

```jsx
<SelectInput
  label="Select a theme"
  options={themes}
  className="bg-gray-100 dark:bg-gray-800"
  wrapperClassName="max-w-md"
  selectedKey={selectedTheme}
  onChange={setSelectedTheme}
/>
```

--------------------------------

### Notice with List Content

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Include a list within the notice's children to present multiple items or details, such as error messages or steps. Ensure list items are properly formatted.

```jsx
<Notice type="error" label="There were errors with your submission">
  <ul className="list-disc list-inside">
    <li>Email is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</Notice>
```

--------------------------------

### ContextualHelp with Rich Content

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/ContextualHelp/README.md

The ContextualHelp component accepts any valid React node as children, enabling the display of rich content like lists and links within the tooltip.

```jsx
function RichHelpExample() {
  return (
    <ContextualHelp>
      <div className="space-y-4">
        <h3 className="font-medium text-gray-900">Payment Methods</h3>
        <ul className="list-disc pl-4 text-sm text-gray-500 space-y-1">
          <li>Credit/Debit Cards</li>
          <li>PayPal</li>
          <li>Bank Transfer</li>
        </ul>
        <a href="/payment-help" className="text-sm text-indigo-600 hover:text-indigo-500">
          Learn more about payment options →
        </a>
      </div>
    </ContextualHelp>
  );
}
```

--------------------------------

### Notice with Links

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Embed links within the notice label to provide direct actions or further information. This is useful for calls to action, like renewing a subscription.

```jsx
<Notice
  type="warning"
  label={
    <span>
      Your subscription will expire soon. {' '}
      <a href="#" className="font-medium text-yellow-700 underline hover:text-yellow-600">
        Renew now
      </a>
    </span>
  }
/>
```

--------------------------------

### Different Notice Types

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Render notices of various types (success, warning, error, info) to convey different kinds of feedback. Each type has distinct styling and icons.

```jsx
<Notice type="success" label="Operation successful" />
<Notice type="warning" label="Please review your changes" />
<Notice type="error" label="An error occurred" />
<Notice type="info" label="New update available" />
```

--------------------------------

### Textarea with Help Text

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Textarea/README.md

Add helpful guidance to the Textarea component using the 'help' prop. This text appears below the textarea.

```jsx
<Textarea
  label="Comments"
  value={comments}
  onChange={setComments}
  help="Please provide detailed feedback about your experience."
/>
```

--------------------------------

### Badge Component Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Badge/README.md

Import and use the Badge component with different types. This demonstrates basic integration into a React component.

```jsx
import { Badge } from '@wedevs/tail-react';

function MyComponent() {
  return (
    <div className="space-x-2">
      <Badge label="New" />
      <Badge label="Success" type="success" />
      <Badge label="Warning" type="warning" />
      <Badge label="Error" type="error" />
      <Badge label="Info" type="info" />
    </div>
  );
}
```

--------------------------------

### Commit package.json changes

Source: https://github.com/wedevsofficial/tail-react/blob/main/RELEASE.md

Stage and commit the updated package.json file to version control.

```shell
git add package.json
git commit -m "Bump version to vX.X.X"
```

--------------------------------

### SelectCard with Custom Styling

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectCard/README.md

Shows how to apply custom styling to the SelectCard component using the 'className' prop for the container and a custom 'renderItem' function for card content.

```jsx
<SelectCard
  label="Select a theme"
  options={themes}
  className="grid grid-cols-3 gap-4"
  renderItem={(item) => (
    <div className="p-4 rounded-lg border-2">
      <div className="w-full h-24" style={{ backgroundColor: item.color }} />
      <span className="mt-2 block text-center">{item.name}</span>
    </div>
  )}
/>
```

--------------------------------

### RadioGroup with Help Text

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/RadioGroup/README.md

Shows how to add descriptive help text below the label for the RadioGroup component. This is useful for providing additional context or instructions to the user.

```jsx
<RadioGroup
  label="Select a plan"
  help="Choose the plan that best fits your needs"
  options={plans}
  value={selectedPlan}
  onChange={setSelectedPlan}
/>
```

--------------------------------

### Basic RadioGroup Usage

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/RadioGroup/README.md

Demonstrates the basic implementation of the RadioGroup component with a label and a list of options. It uses React's useState hook to manage the selected option.

```jsx
import { RadioGroup } from '@wedevs/tail-react';

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState('option1');

  return (
    <RadioGroup
      label="Select an option"
      options={[
        { value: 'Option 1', key: 'option1' },
        { value: 'Option 2', key: 'option2' },
        { value: 'Option 3', key: 'option3' },
      ]}
      value={selectedOption}
      onChange={setSelectedOption}
    />
  );
}
```

--------------------------------

### Table with Custom Styling

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Table/README.md

Shows how to apply custom styling to the Table, TableHeader, and TableBody components using Tailwind CSS classes.

```jsx
<Table className="border border-gray-200">
  <TableHeader className="bg-gray-100">{/* Header content */}</TableHeader>
  <TableBody
    className="bg-white"
    items={data}
    renderRow={(item) => <tr className="hover:bg-gray-50">{/* Row content */}</tr>}
  />
</Table>
```

--------------------------------

### Tooltip with Custom Content

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Tooltip/README.md

Provide rich content for the tooltip by passing a React node (e.g., a div with custom styling) to the 'content' prop. This allows for complex information display within the tooltip.

```jsx
<Tooltip
  content={
    <div className="p-4 bg-gray-900 text-white rounded-md shadow-lg">
      <h3 className="text-lg font-semibold">Important Information</h3>
      <p className="text-sm">This is a custom tooltip with rich content.</p>
    </div>
  }
>
  <button>Hover me</button>
</Tooltip>
```

--------------------------------

### Push changes and tag to GitHub

Source: https://github.com/wedevsofficial/tail-react/blob/main/RELEASE.md

Push the committed changes and the new Git tag to the main branch on GitHub.

```shell
git push origin main
git push origin vX.X.X
```

--------------------------------

### TextField with Validation

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/TextField/README.md

Shows how to use the TextField component with validation props like 'required', 'error', and 'type'.

```jsx
<TextField
  label="Email"
  value={email}
  onChange={setEmail}
  type="email"
  required
  error={emailError}
  help="We will never share your email with anyone else."
/>
```

--------------------------------

### SwitchInput with Custom Styling

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SwitchInput/README.md

Applies custom Tailwind CSS classes to the SwitchInput container for unique styling.

```jsx
<SwitchInput
  label="Custom styled switch"
  className="bg-gray-100 p-4 rounded-lg"
  initialValue={isEnabled}
  onChange={setIsEnabled}
/>
```

--------------------------------

### SelectCard with Disabled Options

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/SelectCard/README.md

Demonstrates how to disable specific options within the SelectCard component by setting the 'disabled' property to true on an option.

```jsx
<SelectCard
  label="Select a plan"
  options={[
    { key: 'basic', title: 'Basic', disabled: false },
    { key: 'pro', title: 'Pro', disabled: true },
    { key: 'enterprise', title: 'Enterprise', disabled: false },
  ]}
  renderItem={(item) => item.title}
/>
```

--------------------------------

### Modal Component

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Modal/README.md

The main wrapper component that handles the modal functionality. It controls the visibility and behavior of the modal dialog.

```APIDOC
## Modal Component

### Description
The main wrapper component that handles the modal functionality.

### Props
- **isOpen** (boolean) - Required - Controls the visibility of the modal.
- **onClose** (() => void) - Required - Callback function called when the modal should close.
- **maxWidth** ('sm' | 'md' | 'lg' | 'xl' | '2xl') - Optional, default: 'lg' - Controls the maximum width of the modal content.
```

--------------------------------

### Tail-React CSS Styles

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/stories/Configure.mdx

Contains base CSS styles for Tail-React components, including layout, positioning, and background properties. These styles are applied to elements like the addon container and its text content.

```css
  align-self: flex-start;
  }

  .sb-addon {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #EEF3F8;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #EEF3F8;
    height: 180px;
    margin-bottom: 48px;
    overflow: hidden;
  }

  .sb-addon-text {
    padding-left: 48px;
    max-width: 240px;
  }

  .sb-addon-text h4 {
    padding-top: 0px;
  }

  .sb-addon-img {
    position: absolute;
    left: 345px;
    top: 0;
    height: 100%;
    width: 200%;
    overflow: hidden;
  }

  .sb-addon-img img {
    width: 650px;
    transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -72px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
    backface-visibility: hidden;
  }

  @media screen and (max-width: 800px) {
    .sb-addon-img {
      left: 300px;
    }
  }

  @media screen and (max-width: 600px) {
    .sb-section {
      flex-direction: column;
    }

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }
  }
  
```

--------------------------------

### Dismissible Notice

Source: https://github.com/wedevsofficial/tail-react/blob/main/src/Components/Notice/README.md

Enable the dismissible prop to allow users to close the notice. This is suitable for non-critical, temporary information.

```jsx
<Notice label="New feature available" type="info" dismissible>
  Check out our new dashboard layout with improved navigation.
</Notice>
```
Tokens:
Raw