{"id":17573653,"url":"https://github.com/nur-it/react-tailwind-template","last_synced_at":"2026-02-10T17:38:08.185Z","repository":{"id":258183844,"uuid":"839181580","full_name":"nur-it/react-tailwind-template","owner":"nur-it","description":"React Tailwind Starter Boilerplate - 2024","archived":false,"fork":false,"pushed_at":"2025-02-03T06:53:05.000Z","size":1085,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T20:11:19.941Z","etag":null,"topics":["boilerplate","boilerplate-template","documentation","dynamic","frontend","modern-ui","prettier","react","react-hooks","react-query","reactjs","tailwind","tailwindcss","tailwindui","tanstack-react-query","template","well-documented"],"latest_commit_sha":null,"homepage":"https://react-tailwind-boilerplate-ten.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nur-it.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-07T05:48:35.000Z","updated_at":"2024-10-17T04:57:53.000Z","dependencies_parsed_at":"2024-10-17T23:45:48.352Z","dependency_job_id":"6d8735b9-9df9-4c25-90da-3b11f88432a9","html_url":"https://github.com/nur-it/react-tailwind-template","commit_stats":null,"previous_names":["nur-it/react-tailwind-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/nur-it/react-tailwind-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nur-it%2Freact-tailwind-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nur-it%2Freact-tailwind-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nur-it%2Freact-tailwind-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nur-it%2Freact-tailwind-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nur-it","download_url":"https://codeload.github.com/nur-it/react-tailwind-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nur-it%2Freact-tailwind-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29309593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T16:09:25.305Z","status":"ssl_error","status_checked_at":"2026-02-10T16:08:52.170Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","boilerplate-template","documentation","dynamic","frontend","modern-ui","prettier","react","react-hooks","react-query","reactjs","tailwind","tailwindcss","tailwindui","tanstack-react-query","template","well-documented"],"created_at":"2024-10-21T21:04:08.024Z","updated_at":"2026-02-10T17:38:08.146Z","avatar_url":"https://github.com/nur-it.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tailwind Starter\n\nA starter template for building React applications with Tailwind CSS, Vite, and essential libraries. This project is pre-configured to provide a solid foundation for developing modern web applications.\n\n## Table of Contents\n\n- [Project Structure](#project-structure)\n- [Scripts](#scripts)\n- [Dependencies](#dependencies)\n- [DevDependencies](#devdependencies)\n- [Getting Started](#getting-started)\n- [Customization](#customization)\n- [Components](#components)\n  - [Alert](#alert)\n  - [Button](#button)\n  - [Badge](#badge)\n  - [Breadcrumb](#breadcrumb)\n  - [Checkbox](#checkbox)\n  - [DatePicker](#datePicker)\n  - [InputText](#inputText)\n  - [InputTextWithIcon](#inputTextWithIcon)\n  - [TextArea](#textAreaInput)\n  - [TextAreaWithIcon](#textAreaInputWithIcon)\n  - [ImageUpload](#singleImageUpload)\n  - [MultipleImageUpload](#multipleImageUpload)\n  - [SelectOption](#singleSelectOption)\n  - [MultiSelectOption](#multiSelectOption)\n  - [Pagination](#pagination)\n  - [RadioButton](#radioButton)\n  - [Table](#table)\n  - [ToggleButton](#toggleButton)\n- [License](#license)\n\n## Project Structure\n\nThe project is structured as follows:\n\n```\nreact-tailwind-starter/\n├── public/\n├── src/\n│   ├── assets/\n│   │   ├── fonts/\n│   │   ├── icons/\n│   │   └── images/\n│   ├── components/\n│   │   ├── screens/\n│   │   ├── shared/\n│   │   └── ui/\n│   ├── contexts/\n│   │   └── provider/\n│   ├── hooks/\n│   ├── layouts/\n│   ├── lib/\n│   ├── pages/\n│   ├── routes/\n│   ├── services/\n│   │   └── httpService/\n│   ├── styles/\n│   │   └── global.css\n│   └── main.jsx\n├── .eslintrc.cjs\n├── .gitignore\n├── index.html\n├── package.json\n├── postcss.config.js\n├── tailwind.config.js\n├── vite.config.js\n└── README.md\n```\n\n## Scripts\n\n- **`dev`**: Runs the development server and opens it in your default browser.\n- **`build`**: Builds the project for production.\n- **`lint`**: Runs ESLint to check for code quality issues.\n- **`preview`**: Previews the production build locally.\n\n## Dependencies\n\n### Core Libraries\n\n- **`react`**: Core library for building user interfaces.\n- **`react-dom`**: Entry point to the DOM for React.\n- **`react-router-dom`**: Declarative routing for React apps.\n\n### Styling \u0026 UI\n\n- **`tailwindcss`**: A utility-first CSS framework for rapid UI development.\n- **`clsx`**: A utility for conditionally joining class names together.\n- **`tailwind-merge`**: A tool to merge Tailwind CSS classes intelligently.\n- **`flatpickr`**: A lightweight and powerful datetime picker.\n- **`react-flatpickr`**: React wrapper for Flatpickr.\n\n### State Management \u0026 Data Fetching\n\n- **`@tanstack/react-query`**: Powerful data fetching and caching for React.\n- **`@tanstack/react-query-devtools`**: Devtools for React Query.\n- **`axios`**: Promise-based HTTP client for the browser and Node.js.\n\n### Forms \u0026 Validation\n\n- **`react-hook-form`**: Performant, flexible, and extensible forms with easy-to-use validation.\n\n### Utility Libraries\n\n- **`js-cookie`**: A simple, lightweight JavaScript API for handling cookies.\n- **`class-variance-authority`**: A library to manage Tailwind CSS variants.\n\n### SEO \u0026 Meta Management\n\n- **`react-helmet`**: A document head manager for React.\n\n## DevDependencies\n\n- **`vite`**: Next-generation frontend tooling.\n- **`@vitejs/plugin-react`**: Vite plugin for React support.\n- **`tailwindcss`**: Utility-first CSS framework.\n- **`postcss`**: A tool for transforming CSS with JavaScript plugins.\n- **`autoprefixer`**: A PostCSS plugin to parse CSS and add vendor prefixes.\n- **`eslint`**: A pluggable linting utility for JavaScript and JSX.\n- **`prettier`**: An opinionated code formatter.\n- **`prettier-plugin-tailwindcss`**: A Prettier plugin to format Tailwind CSS classes.\n- **`eslint-plugin-react`**: React-specific linting rules for ESLint.\n- **`eslint-plugin-react-hooks`**: Enforces the Rules of Hooks.\n- **`eslint-plugin-react-refresh`**: Enables React Fast Refresh.\n- **`globals`**: A list of global variables in JavaScript.\n\n## Getting Started\n\n### Clone the repository:\n\n```\ngit clone https://github.com/nur-it/react-tailwind-boilerplate.git\n```\n\n### Install dependencies:\n\n```\nnpm install\n```\n\n### Run the development server:\n\n```\nnpm run dev\n```\n\n### Build for production:\n\n```\nnpm run build\n```\n\n## Customization\n\nFeel free to customize this starter template according to your project's needs. You can add more dependencies, adjust the Tailwind CSS configuration, or modify the Vite setup.\n\n## Components\n\n### Alert\n\nThe Alert component is a versatile and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants. It displays a message with an optional icon and close button, making it suitable for notifications and alerts.\n\n#### Usage\n\n```jsx\nimport Alert from \"./components/ui/Alert\";\nimport { MdCheckCircle } from \"react-icons/md\";\n\nfunction App() {\n  return (\n    \u003cAlert type=\"success\" size=\"large\" closable\u003e\n      This is a success alert!\n    \u003c/Alert\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name   | Type      | Default     | Description                                                                   | Required |\n| ----------- | --------- | ----------- | ----------------------------------------------------------------------------- | -------- |\n| `type`      | string    | `\"primary\"` | The alert type. Options: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"danger\"`. | No       |\n| `size`      | string    | `\"medium\"`  | The alert size. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                    | No       |\n| `closable`  | boolean   | `false`     | If true, a close button will be displayed to dismiss the alert.               | No       |\n| `children`  | ReactNode | `null`      | The content inside the alert.                                                 | Yes      |\n| `className` | string    | `\"\"`        | Additional custom classes for the alert.                                      | No       |\n\n### Example\n\n```jsx\n\u003cAlert type=\"success\" size=\"large\" closable\u003e\n  \u003cMdCheckCircle className=\"h-5 w-5 text-green-700\" /\u003e\n  This is a success alert with an icon and close button!\n\u003c/Alert\u003e\n```\n\nThis will render a large success alert with an icon and a close button.\n\n### Button\n\nThe Button component is a versatile and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants.\n\n#### Usage\n\n```jsx\nimport Button from \"./components/ui/Button\";\n\nfunction App() {\n  return (\n    \u003cButton variant=\"primary\" size=\"medium\"\u003e\n      Click Me\n    \u003c/Button\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name   | Type      | Default     | Description                                                                         | Required |\n| ----------- | --------- | ----------- | ----------------------------------------------------------------------------------- | -------- |\n| `children`  | ReactNode | `null`      | The content inside the button.                                                      | Yes      |\n| `className` | string    | `\"\"`        | Additional custom classes for the button.                                           | No       |\n| `variant`   | string    | `\"primary\"` | The button variant. Options: `\"primary\"`, `\"secondary\"`, `\"danger\"`.                | No       |\n| `size`      | string    | `\"medium\"`  | The button size. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                         | No       |\n| `fullWidth` | boolean   | `false`     | If true, the button will take up the full width of its container.                   | No       |\n| `disabled`  | boolean   | `false`     | If true, the button will be disabled.                                               | No       |\n| `loading`   | boolean   | `false`     | If true, the button will show a loading spinner and be disabled.                    | No       |\n| `icon`      | object    | `null`      | An object containing an Icon component and float direction (`\"left\"` or `\"right\"`). | No       |\n| `type`      | string    | `\"button\"`  | The button type attribute (`\"button\"`, `\"submit\"`, `\"reset\"`).                      | No       |\n\n### Example\n\n```jsx\n\u003cButton\n  variant=\"secondary\"\n  size=\"large\"\n  icon={{ Icon: MyIconComponent, float: \"right\" }}\n  loading={true}\n\u003e\n  Save Changes\n\u003c/Button\u003e\n```\n\nThis will render a large secondary button with an icon on the right side and a loading spinner.\n\n### Badge\n\nThe Badge component is a versatile and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants. It is used to display labels or notifications in various styles.\n\n#### Usage\n\n```jsx\nimport Badge from \"./components/ui/Badge\";\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cBadge color=\"success\" size=\"large\"\u003e\n        Success\n      \u003c/Badge\u003e\n      \u003cBadge color=\"danger\" size=\"small\"\u003e\n        Danger\n      \u003c/Badge\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name   | Type      | Default     | Description                                                                                        | Required |\n| ----------- | --------- | ----------- | -------------------------------------------------------------------------------------------------- | -------- |\n| `color`     | string    | `\"primary\"` | The badge color. Options: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"warn\"`, `\"danger\"`, `\"info\"`. | No       |\n| `size`      | string    | `\"medium\"`  | The badge size. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                                         | No       |\n| `children`  | ReactNode | `null`      | The content inside the badge.                                                                      | Yes      |\n| `className` | string    | `\"\"`        | Additional custom classes for the badge.                                                           | No       |\n\n### Example\n\n```jsx\n\u003cBadge color=\"success\" size=\"large\"\u003e\n  Success\n\u003c/Badge\u003e\n\u003cBadge color=\"danger\" size=\"small\"\u003e\n  Danger\n\u003c/Badge\u003e\n```\n\nThis will render a large success badge and a small danger badge with the specified styles.\n\n### Breadcrumb\n\nThe Breadcrumb component provides a navigation trail for users to see their current location within a hierarchical structure.\n\n#### Usage\n\n```jsx\nimport Breadcrumb from \"./components/ui/Breadcrumb\";\nimport { Link } from \"react-router-dom\";\n\nfunction App() {\n  const breadcrumbLinks = [\n    { label: \"Home\", href: \"/\", active: false, title: \"Go to Home\" },\n    {\n      label: \"Products\",\n      href: \"/products\",\n      active: false,\n      title: \"View Products\",\n    },\n    {\n      label: \"Details\",\n      href: \"/products/details\",\n      active: true,\n      title: \"Product Details\",\n    },\n  ];\n\n  return \u003cBreadcrumb links={breadcrumbLinks} /\u003e;\n}\n```\n\n### Props\n\n| Prop Name   | Type   | Default | Description                                                                                                            | Required |\n| ----------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- | -------- |\n| `links`     | array  | `[]`    | An array of objects representing breadcrumb links. Each object should include: `label`, `href`, `active`, and `title`. | Yes      |\n| `className` | string | `\"\"`    | Additional custom classes for the breadcrumb container.                                                                | No       |\n\n### Example\n\n```jsx\n\u003cBreadcrumb\n  links={[\n    { label: \"Home\", href: \"/\", title: \"Go to homepage\" },\n    { label: \"Category\", href: \"/category\", title: \"View category\" },\n    {\n      label: \"Subcategory\",\n      href: \"/category/subcategory\",\n      title: \"View subcategory\",\n      active: true,\n    },\n  ]}\n  className=\"my-custom-class\"\n\u003e\u003c/Breadcrumb\u003e\n```\n\nThis will render a breadcrumb trail with links for \"Home\", \"Category\", and \"Subcategory\", with \"Subcategory\" marked as active and styled accordingly.\n\n### Checkbox\n\nThe Checkbox component is a versatile and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants.\n\n#### Usage\n\n```jsx\nimport Checkbox from \"./components/ui/Checkbox\";\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cCheckbox size=\"large\" variant=\"checked\" /\u003e\n      \u003cCheckbox size=\"small\" variant=\"default\" disabled /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name  | Type    | Default     | Description                                                             | Required |\n| ---------- | ------- | ----------- | ----------------------------------------------------------------------- | -------- |\n| `checked`  | boolean | `false`     | If true, the checkbox will be checked.                                  | No       |\n| `size`     | string  | `\"medium\"`  | The size of the checkbox. Options: `\"small\"`, `\"medium\"`, `\"large\"`.    | No       |\n| `variant`  | string  | `\"default\"` | The checkbox variant. Options: `\"default\"`, `\"checked\"`, `\"disabled\"`.  | No       |\n| `disabled` | boolean | `false`     | If true, the checkbox will be disabled and appear with reduced opacity. | No       |\n| `...props` | object  | -           | Additional props to pass to the checkbox input element.                 | No       |\n\n### Example\n\n```jsx\n\u003cCheckbox size=\"small\" variant=\"default\"\u003e\n  Small Default Checkbox\n\u003c/Checkbox\u003e\n\n\u003cCheckbox size=\"medium\" variant=\"checked\" checked={true}\u003e\n  Medium Checked Checkbox\n\u003c/Checkbox\u003e\n\n\u003cCheckbox size=\"large\" variant=\"disabled\" disabled={true}\u003e\n  Large Disabled Checkbox\n\u003c/Checkbox\u003e\n```\n\nThis will render checkboxes of different sizes and states with the specified styles. The first checkbox is small and default, the second is medium and checked, and the third is large and disabled.\n\n### DatePicker\n\nThe DatePicker component is a versatile and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants and sizes. It utilizes the `react-flatpickr` library for date selection.\n\n#### Usage\n\n```jsx\nimport React, { useState } from \"react\";\nimport DatePicker from \"./components/ui/DatePicker\";\n\nfunction App() {\n  const [date, setDate] = useState(null);\n\n  return (\n    \u003cDatePicker\n      size=\"small\"\n      variant=\"default\"\n      placeholder=\"Select a date\"\n      date={date}\n      setDate={setDate}\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name     | Type     | Default           | Description                                                                                                    | Required |\n| ------------- | -------- | ----------------- | -------------------------------------------------------------------------------------------------------------- | -------- |\n| `id`          | string   | `\"datepicker\"`    | The ID attribute of the date picker input.                                                                     | No       |\n| `placeholder` | string   | `\"Select a date\"` | The placeholder text for the date picker input.                                                                | No       |\n| `size`        | string   | `\"medium\"`        | The size of the date picker. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                                        | No       |\n| `variant`     | string   | `\"default\"`       | The style variant of the date picker. Options: `\"default\"`, `\"primary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`. | No       |\n| `date`        | Date     | `null`            | The currently selected date.                                                                                   | No       |\n| `setDate`     | function | -                 | A function to handle date changes. Receives the selected date as an argument.                                  | Yes      |\n| `...props`    | object   | -                 | Additional props to pass to the `Flatpickr` component.                                                         | No       |\n\n### Example\n\n```jsx\nimport React, { useState } from \"react\";\nimport DatePicker from \"./components/ui/DatePicker\";\n\nfunction App() {\n  const [date, setDate] = useState(null);\n\n  return (\n    \u003cdiv\u003e\n      \u003cDatePicker\n        size=\"small\"\n        variant=\"default\"\n        placeholder=\"Select a date\"\n        date={date}\n        setDate={setDate}\n      /\u003e\n      \u003cDatePicker\n        size=\"medium\"\n        variant=\"primary\"\n        placeholder=\"Pick a date\"\n        date={date}\n        setDate={setDate}\n      /\u003e\n      \u003cDatePicker\n        size=\"large\"\n        variant=\"success\"\n        placeholder=\"Choose a date\"\n        date={date}\n        setDate={setDate}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThis will render three DatePicker components with different sizes and styles. The first is small with the default style, the second is medium with the primary style, and the third is large with the success style.\n\n### InputText\n\nThe InputText component is a versatile and reusable form input element built using React and Tailwind CSS. It is designed to handle various types of validation, including required fields, minimum and maximum length, and pattern matching.\n\n### Usage\n\n```jsx\nimport InputText from \"./components/ui/InputText\";\nimport { useForm } from \"react-hook-form\";\n\nfunction App() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n\n  const onSubmit = (data) =\u003e {\n    console.log(data);\n  };\n\n  return (\n    \u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n      \u003cInputText\n        id=\"email\"\n        name=\"email\"\n        type=\"email\"\n        label=\"Email Address\"\n        placeholder=\"Enter your email\"\n        register={register}\n        required\n        pattern={/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i}\n        errors={errors}\n      /\u003e\n      \u003cInputText\n        id=\"password\"\n        name=\"password\"\n        type=\"password\"\n        label=\"Password\"\n        placeholder=\"Enter your password\"\n        register={register}\n        required\n        minLength={8}\n        pattern={\n          /^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[@$!%*?\u0026])[A-Za-z\\d@$!%*?\u0026]{8,}$/\n        }\n        errors={errors}\n      /\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name     | Type       | Default  | Description                                                                                      | Required |\n| ------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------ | -------- |\n| `id`          | `string`   | `\"\"`     | The unique identifier for the input element.                                                     | Yes      |\n| `type`        | `string`   | `\"text\"` | The type of input element.                                                                       | No       |\n| `name`        | `string`   | `\"\"`     | The name attribute for the input element, used for form data submission.                         | Yes      |\n| `label`       | `string`   | `\"\"`     | The label text displayed above the input element.                                                | Yes      |\n| `errors`      | `object`   | `{}`     | An object containing validation errors returned by React Hook Form.                              | Yes      |\n| `pattern`     | `RegExp`   | `null`   | A regular expression pattern for validating the input value.                                     | No       |\n| `register`    | `function` | `null`   | The `register` function from React Hook Form, used to register the input element for validation. | Yes      |\n| `required`    | `boolean`  | `false`  | If true, the input field will be required.                                                       | No       |\n| `maxLength`   | `number`   | `null`   | The maximum length of the input value.                                                           | No       |\n| `minLength`   | `number`   | `null`   | The minimum length of the input value.                                                           | No       |\n| `placeholder` | `string`   | `\"\"`     | The placeholder text for the input element.                                                      | No       |\n\n### Example\n\n```jsx\n\u003cInputText\n  id=\"username\"\n  name=\"username\"\n  type=\"text\"\n  label=\"Username\"\n  placeholder=\"Enter your username\"\n  register={register}\n  required\n  minLength={3}\n  maxLength={15}\n  errors={errors}\n/\u003e\n```\n\nThis example will render a text input field for the username with validation for required, minimum length, and maximum length. If any validation fails, appropriate error messages will be displayed.\n\n### InputTextWithIcon\n\nThe InputTextWithIcon component is a versatile and reusable form input element built using React and Tailwind CSS. It includes support for displaying icons within the input field, handling password visibility toggling, and performing various types of validation, including required fields, minimum and maximum length, and pattern matching.\n\n### Usage\n\n```jsx\nimport InputTextWithIcon from \"./components/ui/InputTextWithIcon\";\nimport { FiUser, FiLock } from \"react-icons/fi\";\nimport { useForm } from \"react-hook-form\";\n\nfunction App() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n\n  const onSubmit = (data) =\u003e {\n    console.log(data);\n  };\n\n  return (\n    \u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n      \u003cInputTextWithIcon\n        id=\"username\"\n        name=\"username\"\n        type=\"text\"\n        label=\"Username\"\n        icon={\u003cFiUser /\u003e}\n        placeholder=\"Enter your username\"\n        register={register}\n        required\n        minLength={3}\n        maxLength={15}\n        errors={errors}\n      /\u003e\n      \u003cInputTextWithIcon\n        id=\"password\"\n        name=\"password\"\n        type=\"password\"\n        label=\"Password\"\n        icon={\u003cFiLock /\u003e}\n        placeholder=\"Enter your password\"\n        register={register}\n        required\n        minLength={8}\n        pattern={\n          /^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[@$!%*?\u0026])[A-Za-z\\d@$!%*?\u0026]{8,}$/\n        }\n        errors={errors}\n      /\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name     | Type        | Default  | Description                                                                                      | Required |\n| ------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------ | -------- |\n| `id`          | `string`    | `\"\"`     | The unique identifier for the input element.                                                     | Yes      |\n| `icon`        | `ReactNode` | `null`   | The icon element to be displayed inside the input field.                                         | No       |\n| `label`       | `string`    | `\"\"`     | The label text displayed above the input element.                                                | Yes      |\n| `name`        | `string`    | `\"\"`     | The name attribute for the input element, used for form data submission.                         | Yes      |\n| `type`        | `string`    | `\"text\"` | The type of input element (e.g., `text`, `password`, `email`).                                   | No       |\n| `errors`      | `object`    | `{}`     | An object containing validation errors returned by React Hook Form.                              | Yes      |\n| `pattern`     | `RegExp`    | `null`   | A regular expression pattern for validating the input value.                                     | No       |\n| `required`    | `boolean`   | `false`  | If true, the input field will be required.                                                       | No       |\n| `register`    | `function`  | `null`   | The `register` function from React Hook Form, used to register the input element for validation. | Yes      |\n| `minLength`   | `number`    | `null`   | The minimum length of the input value.                                                           | No       |\n| `maxLength`   | `number`    | `null`   | The maximum length of the input value.                                                           | No       |\n| `placeholder` | `string`    | `\"\"`     | The placeholder text for the input element.                                                      | No       |\n\n### Example\n\n```jsx\n\u003cInputTextWithIcon\n  id=\"email\"\n  name=\"email\"\n  type=\"email\"\n  label=\"Email Address\"\n  icon={\u003cFiMail /\u003e}\n  placeholder=\"Enter your email\"\n  register={register}\n  required\n  pattern={/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i}\n  errors={errors}\n/\u003e\n```\n\nThis example will render a text input field for an email address with validation for required, pattern matching, and other optional constraints. An icon will appear inside the input field, and errors will be displayed if validation fails.\n\n### TextAreaInput\n\nThe LongTextInput component is a customizable textarea input field built using React and Tailwind CSS. It is designed to handle long text inputs with a flexible number of rows.\n\n### Usage\n\n```jsx\nimport LongTextInput from \"./components/ui/LongTextInput\";\n\nfunction App() {\n  const [text, setText] = useState(\"\");\n\n  const handleChange = (e) =\u003e {\n    setText(e.target.value);\n  };\n\n  return (\n    \u003cform\u003e\n      \u003cLongTextInput\n        id=\"description\"\n        name=\"description\"\n        value={text}\n        label=\"Description\"\n        textRow={5}\n        placeholder=\"Enter your description here\"\n        handleChange={handleChange}\n      /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name      | Type       | Default | Description                                                                 | Required |\n| -------------- | ---------- | ------- | --------------------------------------------------------------------------- | -------- |\n| `id`           | `string`   | `\"\"`    | The unique identifier for the textarea element.                             | Yes      |\n| `name`         | `string`   | `\"\"`    | The name attribute for the textarea element, used for form data submission. | Yes      |\n| `value`        | `string`   | `\"\"`    | The current value of the textarea input.                                    | Yes      |\n| `label`        | `string`   | `\"\"`    | The label text displayed above the textarea element.                        | Yes      |\n| `textRow`      | `number`   | `3`     | The number of rows for the textarea element.                                | No       |\n| `placeholder`  | `string`   | `\"\"`    | The placeholder text for the textarea element.                              | No       |\n| `handleChange` | `function` | `null`  | The function to handle the change event of the textarea input.              | Yes      |\n\n### Example\n\n```jsx\n\u003cLongTextInput\n  id=\"comment\"\n  name=\"comment\"\n  value={commentValue}\n  label=\"Comment\"\n  textRow={6}\n  placeholder=\"Write your comment here...\"\n  handleChange={handleCommentChange}\n/\u003e\n```\n\nThis example will render a textarea input field for comments with a custom number of rows. The handleChange function will update the state as the user types in the textarea.\n\n## TextAreaInputWithIcon\n\nThe `LongTextInputWithIcon` component is a versatile and reusable textarea element built using React and Tailwind CSS. It supports displaying an icon inside the textarea container and handles user input changes.\n\n### Usage\n\n```jsx\nconst LongTextInputWithIcon = ({\n  id,\n  name,\n  icon,\n  value,\n  label,\n  textRow,\n  placeholder,\n  handleChange,\n}) =\u003e {\n  return (\n    \u003cdiv className=\"w-full\"\u003e\n      \u003clabel className=\"mb-3 block text-sm font-medium text-black\" htmlFor={id}\u003e\n        {label}\n      \u003c/label\u003e\n\n      \u003cdiv className=\"relative\"\u003e\n        \u003cspan className=\"absolute left-4 top-4\"\u003e{icon}\u003c/span\u003e\n\n        \u003ctextarea\n          id={id}\n          name={name}\n          rows={textRow}\n          value={value}\n          onChange={handleChange}\n          placeholder={placeholder}\n          className=\"border-stroke w-full rounded border bg-gray-100 py-3 pl-12 pr-4 font-medium text-black focus:border-primary focus-visible:outline-none\"\n        \u003e\u003c/textarea\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default LongTextInputWithIcon;\n```\n\n### Props\n\n| Prop Name      | Type        | Default | Description                                                                 | Required |\n| -------------- | ----------- | ------- | --------------------------------------------------------------------------- | -------- |\n| `id`           | `string`    | `\"\"`    | The unique identifier for the textarea element.                             | Yes      |\n| `name`         | `string`    | `\"\"`    | The name attribute for the textarea element, used for form data submission. | Yes      |\n| `icon`         | `ReactNode` | `null`  | The icon to be displayed inside the textarea container.                     | No       |\n| `value`        | `string`    | `\"\"`    | The current value of the textarea input.                                    | Yes      |\n| `label`        | `string`    | `\"\"`    | The label text displayed above the textarea element.                        | Yes      |\n| `textRow`      | `number`    | `3`     | The number of rows for the textarea element.                                | No       |\n| `placeholder`  | `string`    | `\"\"`    | The placeholder text for the textarea element.                              | No       |\n| `handleChange` | `function`  | `null`  | The function to handle the change event of the textarea input.              | Yes      |\n\n### Example\n\n```jsx\nimport LongTextInputWithIcon from \"./components/ui/LongTextInputWithIcon\";\nimport { FaComment } from \"react-icons/fa\";\n\nfunction App() {\n  const handleChange = (event) =\u003e {\n    console.log(event.target.value);\n  };\n\n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003cLongTextInputWithIcon\n        id=\"message\"\n        name=\"message\"\n        icon={\u003cFaComment /\u003e}\n        value=\"This is a sample message.\"\n        label=\"Message\"\n        textRow={5}\n        placeholder=\"Enter your message here\"\n        handleChange={handleChange}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThis documentation provides a complete overview of the LongTextInputWithIcon component, including its props, an example usage, and the component code itself.\n\n### SingleImageUpload\n\nThe SingleImageUpload component is a reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants. It provides a drag-and-drop area or browse option for uploading a single image and displays a preview of the uploaded image with an option to remove it.\n\n#### Usage\n\n```jsx\nimport SingleImageUpload from \"./components/ui/SingleImageUpload\";\n\nfunction App() {\n  return (\n    \u003cSingleImageUpload\n      id=\"profile-pic\"\n      className=\"custom-class\"\n      // ...other props\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name        | Type       | Default      | Description                                              | Required |\n| ---------------- | ---------- | ------------ | -------------------------------------------------------- | -------- |\n| `id`             | `string`   | `\"dropzone\"` | The unique identifier for the dropzone element.          | No       |\n| `className`      | `string`   | `\"\"`         | Additional custom classes for the dropzone container.    | No       |\n| `onImagesChange` | `function` | `null`       | The function to handle changes when images are uploaded. | Yes      |\n| `...props`       | `object`   | `null`       | Additional props to be passed to the dropzone container. | No       |\n\n### Example\n\n```jsx\n\u003cSingleImageUpload\n  id=\"profile-pic\"\n  className=\"border-2 border-dashed border-gray-300\"\n/\u003e\n```\n\nThis example renders a single image upload component with custom border styles. It allows users to drag and drop or browse to upload an image and shows a preview with an option to remove the uploaded image.\n\n### MultipleImageUpload\n\nThe `MultipleImageUpload` component is a versatile and reusable UI element built using React, Tailwind CSS, and `class-variance-authority (cva)` for managing styles. It allows users to upload multiple images with drag-and-drop support and provides a preview of the uploaded images.\n\n#### Usage\n\n```jsx\nimport MultipleImageUpload from \"./components/ui/MultipleImageUpload\";\n\nfunction App() {\n  const handleImagesChange = (images) =\u003e {\n    console.log(\"Uploaded images:\", images);\n  };\n\n  return (\n    \u003cMultipleImageUpload\n      id=\"image-upload\"\n      className=\"my-custom-class\"\n      onImagesChange={handleImagesChange}\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name        | Type       | Default      | Description                                              | Required |\n| ---------------- | ---------- | ------------ | -------------------------------------------------------- | -------- |\n| `id`             | `string`   | `\"dropzone\"` | The unique identifier for the dropzone element.          | No       |\n| `className`      | `string`   | `\"\"`         | Additional custom classes for the dropzone container.    | No       |\n| `onImagesChange` | `function` | `null`       | The function to handle changes when images are uploaded. | Yes      |\n| `...props`       | `object`   | `null`       | Additional props to be passed to the dropzone container. | No       |\n\n### Example\n\n```jsx\nimport MultipleImageUpload from \"./components/ui/MultipleImageUpload\";\nimport { useState } from \"react\";\n\nfunction App() {\n  const [images, setImages] = useState([]);\n\n  const handleImagesChange = (newImages) =\u003e {\n    setImages(newImages);\n  };\n\n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003cMultipleImageUpload\n        id=\"image-upload\"\n        onImagesChange={handleImagesChange}\n      /\u003e\n      \u003cdiv className=\"mt-4\"\u003e\n        {images.map((src, index) =\u003e (\n          \u003cimg\n            key={index}\n            src={src}\n            alt={`Uploaded preview ${index + 1}`}\n            className=\"h-20 w-20 rounded-lg\"\n          /\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThis will render a dropzone for uploading multiple images, and the uploaded images will be displayed as previews below the dropzone.\n\n### SingleSelectOption\n\nThe SingleSelectOption component is a versatile and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants. It provides a dropdown menu for selecting a single option from a list.\n\n#### Usage\n\n```jsx\nimport SingleSelectOption from \"./components/ui/SingleSelectOption\";\n\nfunction App() {\n  const handleOptionChange = (option) =\u003e {\n    console.log(\"Selected option:\", option);\n  };\n\n  const options = [\n    { value: \"option1\", label: \"Option 1\" },\n    { value: \"option2\", label: \"Option 2\" },\n  ];\n\n  return (\n    \u003cSingleSelectOption\n      id=\"select\"\n      name=\"select\"\n      options={options}\n      selectedOption={options[0]}\n      onChange={handleOptionChange}\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name        | Type       | Default      | Description                                                                                          | Required |\n| ---------------- | ---------- | ------------ | ---------------------------------------------------------------------------------------------------- | -------- |\n| `id`             | `string`   | `\"dropzone\"` | The unique identifier for the select component.                                                      | No       |\n| `name`           | `string`   | `\"\"`         | The name attribute for the select component.                                                         | No       |\n| `options`        | `Array`    | `[]`         | An array of options for the select menu. Each option should have `value` and `label` properties.     | No       |\n| `selectedOption` | `object`   | `null`       | The currently selected option. Must have `value` and `label` properties.                             | No       |\n| `onChange`       | `function` | `null`       | Callback function triggered when an option is selected. Receives the selected option as an argument. | No       |\n| `className`      | `string`   | `\"\"`         | Additional custom classes for the select container.                                                  | No       |\n| `size`           | `string`   | `\"medium\"`   | The size of the select component. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                         | No       |\n| `variant`        | `string`   | `\"primary\"`  | The variant style of the select component. Options: `\"primary\"`, `\"secondary\"`, `\"danger\"`.          | No       |\n| `status`         | `string`   | `\"closed\"`   | The status of the select component. Options: `\"open\"`, `\"closed\"`.                                   | No       |\n| `...props`       | `object`   | `null`       | Additional props to be passed to the select container.                                               | No       |\n\n### Example\n\n```jsx\n\u003cSingleSelectOption\n  id=\"select\"\n  name=\"select\"\n  options={[\n    { value: \"option1\", label: \"Option 1\" },\n    { value: \"option2\", label: \"Option 2\" },\n  ]}\n  selectedOption={{ value: \"option1\", label: \"Option 1\" }}\n  onChange={(option) =\u003e console.log(\"Selected option:\", option)}\n  size=\"large\"\n  variant=\"secondary\"\n  status=\"open\"\n/\u003e\n```\n\nThis will render a large secondary select component with the menu open, allowing users to select an option from the provided list.\n\n### MultiSelectOption\n\nThe MultiSelectOption component is a versatile UI element built using React and Tailwind CSS, with class-variance-authority (cva) for managing variants. It allows users to select multiple options from a dropdown menu.\n\n### Usage\n\n```jsx\nimport MultiSelectOption from \"./components/ui/MultiSelectOption\";\n\nconst options = [\n  { value: \"option1\", label: \"Option 1\" },\n  { value: \"option2\", label: \"Option 2\" },\n  { value: \"option3\", label: \"Option 3\" },\n];\n\nfunction App() {\n  const handleChange = (selectedOptions) =\u003e {\n    console.log(selectedOptions);\n  };\n\n  return (\n    \u003cMultiSelectOption\n      id=\"multi-select\"\n      name=\"example\"\n      options={options}\n      selectedOptions={[]}\n      onChange={handleChange}\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name         | Type       | Default     | Description                                                                                                          | Required |\n| ----------------- | ---------- | ----------- | -------------------------------------------------------------------------------------------------------------------- | -------- |\n| `id`              | `string`   | `null`      | The unique identifier for the select component.                                                                      | No       |\n| `name`            | `string`   | `\"\"`        | The name attribute for the select component.                                                                         | No       |\n| `options`         | `Array`    | `[]`        | An array of options for the select menu. Each option should have `value` and `label` properties.                     | No       |\n| `selectedOptions` | `Array`    | `[]`        | An array of currently selected options. Each option should have `value` and `label` properties.                      | No       |\n| `onChange`        | `function` | `null`      | Callback function triggered when options are selected or deselected. Receives the updated selections as an argument. | No       |\n| `className`       | `string`   | `\"\"`        | Additional custom classes for the select component.                                                                  | No       |\n| `size`            | `string`   | `\"medium\"`  | The size of the select component. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                                         | No       |\n| `variant`         | `string`   | `\"primary\"` | The style variant of the select component. Options: `\"primary\"`, `\"secondary\"`, `\"danger\"`.                          | No       |\n| `status`          | `string`   | `\"closed\"`  | The open/closed status of the select component. Options: `\"open\"`, `\"closed\"`.                                       | No       |\n\n### Example\n\n```jsx\n\u003cMultiSelectOption\n  id=\"multi-select\"\n  name=\"example\"\n  options={[\n    { value: \"option1\", label: \"Option 1\" },\n    { value: \"option2\", label: \"Option 2\" },\n    { value: \"option3\", label: \"Option 3\" },\n  ]}\n  selectedOptions={[{ value: \"option1\", label: \"Option 1\" }]}\n  onChange={(selectedOptions) =\u003e console.log(selectedOptions)}\n  size=\"large\"\n  variant=\"secondary\"\n/\u003e\n```\n\nThis will render a large, secondary-styled multi-select dropdown where users can select multiple options.\n\n### Pagination\n\nThe Pagination component is a flexible and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants. It provides navigation for paginated content, allowing users to navigate between different pages.\n\n#### Usage\n\n```jsx\nimport Pagination from \"./components/ui/Pagination\";\n\nfunction App() {\n  const handlePageChange = (pageNumber) =\u003e {\n    console.log(\"Current Page:\", pageNumber);\n  };\n\n  return (\n    \u003cPagination\n      totalPages={20}\n      currentPage={5}\n      onPageChange={handlePageChange}\n      variant=\"primary\"\n      size=\"medium\"\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name      | Type       | Default     | Description                                                                                           | Required |\n| -------------- | ---------- | ----------- | ----------------------------------------------------------------------------------------------------- | -------- |\n| `totalPages`   | `number`   | `10`        | The total number of pages.                                                                            | No       |\n| `currentPage`  | `number`   | `1`         | The currently active page.                                                                            | No       |\n| `onPageChange` | `function` | `null`      | Callback function triggered when a page is selected. Receives the new page number as an argument.     | Yes      |\n| `variant`      | `string`   | `\"primary\"` | The variant for the pagination buttons. Options: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"danger\"`. | No       |\n| `size`         | `string`   | `\"medium\"`  | The size of the pagination buttons. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                        | No       |\n| `siblingCount` | `number`   | `1`         | The number of sibling pages to display on either side of the current page.                            | No       |\n\n### Example\n\n```jsx\n\u003cPagination\n  totalPages={15}\n  currentPage={3}\n  onPageChange={(page) =\u003e console.log(\"Selected Page:\", page)}\n  variant=\"secondary\"\n  size=\"large\"\n/\u003e\n```\n\nThis will render a large secondary pagination component that navigates between 15 pages, with the 3rd page initially selected.\n\n### RadioButton\n\nThe `RadioButton` component is a customizable and reusable UI element built using React and Tailwind CSS, with `class-variance-authority (cva)` for managing variants.\n\n#### Usage\n\n```jsx\nimport RadioButton from \"./components/ui/RadioButton\";\n\nfunction App() {\n  return (\n    \u003cRadioButton\n      id=\"radio1\"\n      name=\"example\"\n      value=\"1\"\n      checked={true}\n      onChange={() =\u003e console.log(\"Radio button clicked!\")}\n      label=\"Option 1\"\n      variant=\"primary\"\n      size=\"medium\"\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name   | Type       | Default     | Description                                                                                          | Required |\n| ----------- | ---------- | ----------- | ---------------------------------------------------------------------------------------------------- | -------- |\n| `id`        | `string`   | `null`      | The unique identifier for the radio button.                                                          | Yes      |\n| `name`      | `string`   | `null`      | The name attribute for the radio button, used to group radio buttons together.                       | Yes      |\n| `value`     | `string`   | `null`      | The value of the radio button, which will be submitted with the form if the radio button is checked. | Yes      |\n| `checked`   | `boolean`  | `false`     | Determines if the radio button is checked.                                                           | Yes      |\n| `onChange`  | `function` | `null`      | Callback function triggered when the radio button's state changes.                                   | Yes      |\n| `className` | `string`   | `\"\"`        | Additional custom classes for the radio button.                                                      | No       |\n| `variant`   | `string`   | `\"primary\"` | The variant for the radio button. Options: `\"primary\"`, `\"secondary\"`, `\"danger\"`.                   | No       |\n| `size`      | `string`   | `\"medium\"`  | The size of the radio button. Options: `\"small\"`, `\"medium\"`, `\"large\"`.                             | No       |\n| `disabled`  | `boolean`  | `false`     | If true, the radio button will be disabled.                                                          | No       |\n| `label`     | `string`   | `null`      | Text label displayed next to the radio button.                                                       | No       |\n| `custom`    | `boolean`  | `false`     | If true, custom styles will be applied to the radio button.                                          | No       |\n\n### Example\n\n```jsx\n\u003cRadioButton\n  id=\"radio2\"\n  name=\"example\"\n  value=\"2\"\n  checked={false}\n  onChange={() =\u003e console.log(\"Radio button clicked!\")}\n  label=\"Option 2\"\n  variant=\"secondary\"\n  size=\"large\"\n  custom={true}\n/\u003e\n```\n\nThis will render a large secondary radio button with a custom style and label \"Option 2\". When clicked, it will trigger the onChange function.\n\n### Table\n\nThe `Table` components provide a flexible and customizable way to create tables using React, Tailwind CSS, and `class-variance-authority (cva)` for managing styles and variants.\n\n## Usage\n\n```jsx\nimport {\n  TableContainer,\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableFooter,\n} from \"./components/ui/Table\";\n\nfunction App() {\n  return (\n    \u003cTableContainer\u003e\n      \u003cTable striped={true}\u003e\n        \u003cTableHeader\u003e\n          \u003cTableRow\u003e\n            \u003cTableCell\u003eHeader 1\u003c/TableCell\u003e\n            \u003cTableCell\u003eHeader 2\u003c/TableCell\u003e\n            \u003cTableCell\u003eHeader 3\u003c/TableCell\u003e\n          \u003c/TableRow\u003e\n        \u003c/TableHeader\u003e\n        \u003cTableBody\u003e\n          \u003cTableRow\u003e\n            \u003cTableCell\u003eData 1\u003c/TableCell\u003e\n            \u003cTableCell\u003eData 2\u003c/TableCell\u003e\n            \u003cTableCell\u003eData 3\u003c/TableCell\u003e\n          \u003c/TableRow\u003e\n          \u003cTableRow\u003e\n            \u003cTableCell\u003eData 4\u003c/TableCell\u003e\n            \u003cTableCell\u003eData 5\u003c/TableCell\u003e\n            \u003cTableCell\u003eData 6\u003c/TableCell\u003e\n          \u003c/TableRow\u003e\n        \u003c/TableBody\u003e\n        \u003cTableFooter\u003e\n          \u003cspan\u003eTable Footer\u003c/span\u003e\n        \u003c/TableFooter\u003e\n      \u003c/Table\u003e\n    \u003c/TableContainer\u003e\n  );\n}\n```\n\n### TableContainer\n\nThe TableContainer component is a wrapper for the table, providing overflow handling for large tables.\n\n### Props\n\n| Prop Name   | Type        | Default | Description                                        | Required |\n| ----------- | ----------- | ------- | -------------------------------------------------- | -------- |\n| `children`  | `ReactNode` | `null`  | The content inside the table container.            | Yes      |\n| `className` | `string`    | `\"\"`    | Additional custom classes for the table container. | No       |\n\n### TableBody\n\nThe TableBody component is used for creating the body section of the table.\n\n### Props\n\n| Prop Name   | Type        | Default | Description                                   | Required |\n| ----------- | ----------- | ------- | --------------------------------------------- | -------- |\n| `children`  | `ReactNode` | `null`  | The content inside the table body.            | Yes      |\n| `className` | `string`    | `\"\"`    | Additional custom classes for the table body. | No       |\n\n### TableRow\n\nThe TableRow component is used for creating rows in the table.\n\n### Props\n\n| Prop Name   | Type        | Default | Description                                  | Required |\n| ----------- | ----------- | ------- | -------------------------------------------- | -------- |\n| `children`  | `ReactNode` | `null`  | The content inside the table row.            | Yes      |\n| `className` | `string`    | `\"\"`    | Additional custom classes for the table row. | No       |\n\n### TableCell\n\nThe TableCell component is used for creating cells in the table.\n\n### Props\n\n| Prop Name   | Type        | Default | Description                                   | Required |\n| ----------- | ----------- | ------- | --------------------------------------------- | -------- |\n| `children`  | `ReactNode` | `null`  | The content inside the table cell.            | Yes      |\n| `className` | `string`    | `\"\"`    | Additional custom classes for the table cell. | No       |\n\n### TableFooter\n\nThe TableFooter component is used for creating the footer section of the table.\n\n### Props\n\n| Prop Name   | Type        | Default | Description                                     | Required |\n| ----------- | ----------- | ------- | ----------------------------------------------- | -------- |\n| `children`  | `ReactNode` | `null`  | The content inside the table footer.            | Yes      |\n| `className` | `string`    | `\"\"`    | Additional custom classes for the table footer. | No       |\n\n### Example\n\n```jsx\n\u003cTableContainer className=\"my-6\"\u003e\n  \u003cTable striped={false}\u003e\n    \u003cTableHeader\u003e\n      \u003cTableRow\u003e\n        \u003cTableCell\u003eHeader 1\u003c/TableCell\u003e\n        \u003cTableCell\u003eHeader 2\u003c/TableCell\u003e\n        \u003cTableCell\u003eHeader 3\u003c/TableCell\u003e\n      \u003c/TableRow\u003e\n    \u003c/TableHeader\u003e\n    \u003cTableBody\u003e\n      \u003cTableRow\u003e\n        \u003cTableCell\u003eData 1\u003c/TableCell\u003e\n        \u003cTableCell\u003eData 2\u003c/TableCell\u003e\n        \u003cTableCell\u003eData 3\u003c/TableCell\u003e\n      \u003c/TableRow\u003e\n      \u003cTableRow\u003e\n        \u003cTableCell\u003eData 4\u003c/TableCell\u003e\n        \u003cTableCell\u003eData 5\u003c/TableCell\u003e\n        \u003cTableCell\u003eData 6\u003c/TableCell\u003e\n      \u003c/TableRow\u003e\n    \u003c/TableBody\u003e\n    \u003cTableFooter\u003e\n      \u003cspan\u003eTable Footer\u003c/span\u003e\n    \u003c/TableFooter\u003e\n  \u003c/Table\u003e\n\u003c/TableContainer\u003e\n```\n\nThis example renders a basic table with headers, rows, and a footer inside a scrollable container.\n\n### ToggleButton\n\nThe ToggleButton component is a customizable and reusable UI element built using React. It features a toggle switch that can be used to represent an on/off state, with additional customization options like size and disabled state.\n\n#### Usage\n\n```jsx\nimport ToggleButton from \"./components/ui/ToggleButton\";\n\nfunction App() {\n  const handleToggleChange = () =\u003e {\n    console.log(\"Toggle state changed\");\n  };\n\n  return (\n    \u003cToggleButton\n      id=\"toggle1\"\n      name=\"exampleToggle\"\n      checked={true}\n      onChange={handleToggleChange}\n      size=\"medium\"\n      disabled={false}\n    /\u003e\n  );\n}\n```\n\n### Props\n\n| Prop Name   | Type       | Default   | Description                                                               | Required |\n| ----------- | ---------- | --------- | ------------------------------------------------------------------------- | -------- |\n| `id`        | `string`   | `null`    | The unique identifier for the toggle button.                              | Yes      |\n| `name`      | `string`   | `null`    | The name attribute for the toggle button input.                           | Yes      |\n| `checked`   | `boolean`  | `false`   | The initial checked state of the toggle button.                           | No       |\n| `onChange`  | `function` | `null`    | The callback function triggered when the toggle state changes.            | No       |\n| `className` | `string`   | `\"\"`      | Additional custom classes for the toggle button.                          | No       |\n| `disabled`  | `boolean`  | `false`   | If true, the toggle button will be disabled and non-interactive.          | No       |\n| `size`      | `string`   | `\"small\"` | The size of the toggle button. Options: `\"small\"`, `\"medium\"`, `\"large\"`. | No       |\n| `...props`  | `object`   | `null`    | Additional props are spread onto the root element.                        | No       |\n\n### Example\n\n```jsx\n\u003cToggleButton\n  id=\"toggle2\"\n  name=\"exampleToggle\"\n  checked={false}\n  onChange={() =\u003e console.log(\"Toggled!\")}\n  size=\"large\"\n  disabled={false}\n/\u003e\n```\n\nThis will render a large toggle button that is initially off (unchecked) and logs \"Toggled!\" to the console when clicked.\n\n\n  ### Accordion\n  \n  The Accordion component is a versatile and reusable UI element built using React and Tailwind CSS, with \\`class-variance-authority (cva)\\` for managing variants. It supports dynamic rendering, custom icons, and customizable classes.\n  \n  #### Usage\n  \n  ```jsx\n  import Accordion from \"./components/ui/Accordion\";\n  \n  function App() {\n    return (\n      \u003cdiv\u003e\n        \u003cAccordion \n          question=\"What is React?\" \n          answer=\"React is a JavaScript library for building user interfaces.\"\n          size=\"medium\"\n          variant=\"default\"\n          customIcon={true}\n          Icon={MyIconComponent}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n  ```\n  \n  ### Dynamic Mode Example\n  \n  ```jsx\n  import Accordion from \"./components/ui/Accordion\";\n  \n  function App() {\n    const data = [\n      { id: '1', question: 'What is React?', answer: 'React is a JavaScript library for building user interfaces.' },\n      { id: '2', question: 'What is Next.js?', answer: 'Next.js is a React framework for server-side rendering.' }\n    ];\n  \n    return (\n      \u003cdiv\u003e\n        \u003cAccordion \n          dynamic={true} \n          data={data}\n          size=\"large\"\n          variant=\"default\"\n          enableIndex={true}\n          customIcon={false}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n  ```\n  \n  ### Props\n  \n  | Prop Name            | Type                   | Default      | Description                                                                  | Required |\n  | -------------------- | ---------------------- | ------------ | ---------------------------------------------------------------------------- | -------- |\n  | `question`          | `string`               | -            | The question text for the static accordion mode.                             | No       |\n  | `answer`            | `string`               | -            | The answer text for the static accordion mode.                               | No       |\n  | `dynamic`           | `boolean`              | `false`     | If true, enables dynamic mode for rendering multiple accordion items.         | No       |\n  | `data`              | `array`                | -            | Array of objects for dynamic mode with `id`, `question`, and `answer`.   | Yes, if dynamic |\n  | `size`              | `string`               | `\"medium\"`  | The size of the accordion. Options: `\"small\"`, `\"medium\"`, `\"large\"`.    | No       |\n  | `variant`           | `string`               | `\"default\"` | The accordion variant. Options: `\"default\"`, `\"secondary\"`, `\"disabled\"`. | No       |\n  | `disabled`          | `boolean`              | `false`     | If true, disables the accordion and applies appropriate styles.               | No       |\n  | `className`         | `string`               | -            | Custom class name to override or extend accordion styles.                     | No       |\n  | `questionClassName` | `string`               | -            | Custom class name for styling the question text.                              | No       |\n  | `ansClassName`      | `string`               | -            | Custom class name for styling the answer text.                                | No       |\n  | `listClassName`     | `string`               | -            | Custom class name for styling the list wrapper in dynamic mode.               | No       |\n  | `enableIndex`       | `boolean`              | `true`      | Whether to display index numbers before each question in dynamic mode.        | No       |\n  | `customIcon`        | `boolean`              | `false`     | Whether to use a custom icon or the default one (FaAngleDown).                | No       |\n  | `Icon`              | `React.ComponentType`  | -            | A React component used as an icon next to the question (if `customIcon` is true). | No       |\n  | `...props`          | `object`               | -            | Additional props to pass to the accordion `\u003cli\u003e` element.                   | No       |\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/nur-it/react-tailwind-boilerplate?tab=MIT-1-ov-file).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnur-it%2Freact-tailwind-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnur-it%2Freact-tailwind-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnur-it%2Freact-tailwind-template/lists"}