{"id":34014037,"url":"https://github.com/muhsenmaqsudi/laratify","last_synced_at":"2025-12-13T13:52:21.647Z","repository":{"id":49074313,"uuid":"257972567","full_name":"muhsenmaqsudi/laratify","owner":"muhsenmaqsudi","description":"Laravel UI Components using TailwindCSS \u0026 AlpineJS","archived":false,"fork":false,"pushed_at":"2023-02-01T19:39:31.000Z","size":508,"stargazers_count":15,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-13T00:01:19.879Z","etag":null,"topics":["laravel","laravel-components","laravel-package","laravel-ui","php","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://muhsenmaqsudi.github.io/laratify","language":"HTML","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/muhsenmaqsudi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-22T17:29:32.000Z","updated_at":"2023-08-05T16:13:16.000Z","dependencies_parsed_at":"2023-02-17T10:05:16.792Z","dependency_job_id":null,"html_url":"https://github.com/muhsenmaqsudi/laratify","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/muhsenmaqsudi/laratify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhsenmaqsudi%2Flaratify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhsenmaqsudi%2Flaratify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhsenmaqsudi%2Flaratify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhsenmaqsudi%2Flaratify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muhsenmaqsudi","download_url":"https://codeload.github.com/muhsenmaqsudi/laratify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhsenmaqsudi%2Flaratify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27706650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-13T02:00:09.769Z","response_time":147,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["laravel","laravel-components","laravel-package","laravel-ui","php","ui","ui-components"],"created_at":"2025-12-13T13:52:21.059Z","updated_at":"2025-12-13T13:52:21.635Z","avatar_url":"https://github.com/muhsenmaqsudi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laratify\n\nLaratify is a Laravel 7 package which includes essential components to make creating forms, table and custom ui's for your laravel blade base application a breeze. \\\n**This package requires Node.js to be installed in order to run npm commands and It Uses TailwindCSS as It's UI CSS styles, and it's backed with AlpineJS as it's javascript reactive power.**\n\nUseful links:\n\n-   Support: [GitHub Issues](https://github.com/muhsenmaqsudi/laratify/issues)\n-   Contribute: [GitHub Pulls](https://github.com/muhsenmaqsudi/laratify/pulls)\n\n## Installation\n\nRequire Laratify:\n\n    composer require muhsenmaqsudi/laratify\n\nPublishing Vendor Assets\n\n    php artisan vendor:publish --tag=\"laratify-config\"\n    php artisan vendor:publish --tag=\"laratify-views\"\n\n\nAdd TailwindCSS \u0026 AlpineJS UI Preset Scaffolding\n\n    php artisan laratify:ui\n\nWith Authentication Scaffolding\n\n    php artisan laratify:ui --auth\n\nInstalling TailwindCSS \u0026 AlpineJS and compiling them\n\n    npm install \u0026\u0026 npm run dev\n\n## Laratify Components\n\nLaratify offers useful components to make building your app ui fast \u0026 easy. See below examples of each component.\n\nAvailable Colors:\n\nAll of the default TailwindCSS color pallets are available for all the components where color matters.\n\n`Black, White, Gray, Red, Orange, Yellow, Green, Teal, Blue, Indigo, Purple \u0026 Pink`\n\nAll the colors except Black \u0026 White comes with a 100 to 900 color shades that you can use like this `{color-name}-{shade-no}`\n\nAlert:\n\n```blade\n    \u003cx-laratify-alert text-color=\"black\"\n                      bg-color=\"green-500\"\u003e\n        Your alert message goes here\n    \u003c/x-laratify-alert\u003e\n```\n\nBadge:\n\n```blade\n    \u003cx-laratify-badge text-color=\"gray-700\"\n                      bg-color=\"teal-200\"\n                      rounded\u003e\n        Your text goes here\n    \u003c/x-laratify-badge\u003e\n```\n\nButton:\n\n```blade\n    \u003cx-laratify-button variant=\"pink-500\"\n                       size=\"lg\"\n                       outline\n                       rounded\n                       :events=\"['onclick' =\u003e 'alert(\\'clicked\\')']\"\n\u003e\n        Button Title\n    \u003c/x-laratify-button\u003e\n```\n\n- Note: available sizes: 'sm', 'md', 'lg'\n\nInput:\n\n```blade\n    \u003cx-laratify-input name=\"email\"\n                      type=\"email\"\n                      label=\"Email:\"\n                      id=\"email_id\"\n                      placeholder=\"Enter your email\"\n                      :value=\"old('email', $data-\u003eemail ?? '')\"\u003e\n    \u003c/x-laratify-input\u003e\n```\n\n- for disabling the input set `disabled` attributes, for readonly input set `readonly` attribute**\n```blade\n    \u003cx-laratify-input disabled readonly\u003e\u003c/x-laratify-input\u003e\n```\n\nCheckbox:\n\n```blade\n    \u003cx-laratify-checkbox name=\"terms\"\n                         label=\"accept terms \u0026 conditions\"\n                         checkbox-label=\"accept\"\n                         id=\"terms_id\"\n                         :value=\"old('terms', $data-\u003eterms ?? '')\"\u003e\n    \u003c/x-laratify-checkbox\u003e\n```\n\n- for disabling the checkbox set `disabled` attributes \\\n- checkbox attributes should have `boolean` migration columns.\n\nSelect:\n\n```blade\n    \u003cx-laratify-select name=\"option\"\n                       label=\"Option Label:\"\n                       first-option=\"Select your option\"\n                       :options=\"[1 =\u003e 'option1', 2 =\u003e 'option2']\"\n                       :value=\"old('option', $data-\u003eoption ?? '')\"\u003e\n    \u003c/x-laratify-select\u003e\n```\n\n-   if the options are an associative array, the keys are used as the labels and the values as the values. For sequential arrays, the values are used for both the labels and values.\n-   :options=\"['option1', 'option2', 'option3']\" =\u003e options with sequential array\n-   :options=\"[1 =\u003e 'option1', 2 =\u003e 'option2']\" =\u003e options with associate array\n\nFile:\n\n```blade\n    \u003cx-laratify-file name=\"avatar\"\n                     id=\"upload\"\n                     label=\"Upload your avatar\"\n                     variant=\"indigo-500\"\u003e\n    \u003c/x-laratify-file\u003e\n```\n\nTextarea:\n\n```blade\n    \u003cx-laratify-textarea name=\"body\"\n                         label=\"Text Body:\"\n                         placeholder=\"Your text body goes here\"\n                         :value=\"old('body', $data-\u003ebody ?? '')\"\u003e\n    \u003c/x-laratify-textarea\u003e\n```\n\nRadios:\n\n```blade\n    \u003cx-laratify-radios name=\"option\"\n                       :options=\"['option1', 'option2', 'option3']\"\n                       :value=\"old('option', $data-\u003eoption ?? '')\"\u003e\n    \u003c/x-laratify-radios\u003e\n```\n\n-   :options=\"['option1', 'option2', 'option3']\" =\u003e options with sequential array\n-   :options=\"[1 =\u003e 'option1', 2 =\u003e 'option2']\" =\u003e options with associate array\n\nDropdown:\n\n```blade\n    \u003cx-laratify-dropdown name=\"My Dropdown\" :links=\"[\n        'URL link' =\u003e '/auth/login', '|', 'Google' =\u003e 'https://google.com', 'Login' =\u003e 'login'\n    ]\"\n                         bg-color=\"teal-500\"\n    \u003e\n    \u003c/x-laratify-dropdown\u003e\n```\n\n- '|' is the separator in the drop down list, so use it when you want to separate links\n\nDialog:\n\n```blade\n    \u003cx-laratify-dialog size=\"lg\" scrollable no-transition no-header no-footer no-close close-title=\"Cancel\" ok-title=\"Submit\"\u003e\n        \u003cx-slot name=\"activator\"\u003e\n            \u003cx-laratify-button :events=\"['click' =\u003e 'toggleDialog()']\" variant=\"red-500\" outline\u003eOpen Dialog\u003c/x-laratify-button\u003e\n        \u003c/x-slot\u003e\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut enim eos error eveniet explicabo\n        ipsa ipsam laudantium minima nisi obcaecati omnis quam qui reprehenderit sapiente sunt, tenetur veniam.\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis deserunt, dolore harum maxime nam\n        nulla quasi voluptate? Adipisci error illum laudantium magnam praesentium quibusdam sit ut. Dolor, dolore,\n        rem.\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam, autem corporis deserunt dolores ea\n        eligendi et impedit magni mollitia natus necessitatibus odio quae recusandae reiciendis sunt suscipit vel\n        voluptas?\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias, aspernatur atque aut\n        consequuntur cumque deleniti distinctio dolorum et facere fugit iusto labore maxime nemo quam quas\n        repellendus, reprehenderit voluptatibus!\n\n        \u003cx-slot name=\"footer\"\u003e\n            \u003cx-laratify-button :events=\"['click' =\u003e 'toggleDialog()']\" variant=\"green-500\" rounded\u003eSave\u003c/x-laratify-button\u003e\n        \u003c/x-slot\u003e\n    \u003c/x-laratify-dialog\u003e\n```\n\nTooltip:\n\n```blade\n    \u003cx-laratify-button id=\"elButton\"\u003eElement\u003c/x-laratify-button\u003e\n    \u003cx-laratify-button id=\"idButton\"\u003eId\u003c/x-laratify-button\u003e\n    \u003cx-laratify-tooltip content=\"Tooltip with id\" placement=\"left\" append-to=\"button\" no-arrow /\u003e\n    \u003cx-laratify-tooltip content=\"Tooltip with element\" placement=\"top-start\" append-to=\"#idButton\" /\u003e\n```\n\nAvailable placements:\n \n- top, bottom, right, left, \n- {top,bottom,right,left}-start, {top,bottom,right,left}-end'\n\nNote: **remember to put tooltip after the parent element**\n\nGrids \u0026 Grid\n\n```blade\n    \u003cx-laratify-grids :cols=\"['all' =\u003e 3, 'sm' =\u003e 2]\" :rows=\"['all' =\u003e 5, 'md' =\u003e 3]\" :gaps=\"['all'=\u003e 2, 'md' =\u003e 20]\"\u003e\n        \u003cx-laratify-grid :col-start=\"['all' =\u003e 1, 'md'=\u003e2]\" :col-end=\"['all' =\u003e 2, 'sm' =\u003e 1]\" :row-start=\"['all' =\u003e 2, 'lg' =\u003e 4]\" :row-end=\"['all' =\u003e 4]\"\u003e\n            \u003cdiv class=\"h-full bg-blue-500\"\u003e2\u003c/div\u003e\n        \u003c/x-laratify-grid\u003e\n        \u003cx-laratify-grid\u003e\n            \u003cdiv class=\"h-full bg-red-500\"\u003e1\u003c/div\u003e\n        \u003c/x-laratify-grid\u003e\n        \u003cx-laratify-grid\u003e\n            \u003cdiv class=\"h-full bg-black\"\u003e3\u003c/div\u003e\n        \u003c/x-laratify-grid\u003e\n        \u003cx-laratify-grid\u003e\n            \u003cdiv class=\"h-full bg-gray-500\"\u003e4\u003c/div\u003e\n        \u003c/x-laratify-grid\u003e\n    \u003c/x-laratify-grids\u003e\n```\n\nContainer, Col \u0026 Row\n\n```blade\n    \u003cx-laratify-container class=\"py-5\"\u003e\n        \u003cx-laratify-row class=\"h-64 border border-2 border-blue-500\" flex-dir=\"col\" align=\"center\" justify=\"end\"\u003e\n            \u003cx-laratify-col class=\"px-8\" cols=\"6\" md=\"4\" xl=\"4\"\u003e\n                \u003cdiv class=\"text-center bg-blue-400 p-2\"\u003e1\u003c/div\u003e\n            \u003c/x-laratify-col\u003e\n            \u003cx-laratify-col cols=\"6\" md=\"4\" xl=\"4\" order=\"first\"\u003e\n                \u003cdiv class=\"text-center bg-green-300 p-2\"\u003e2\u003c/div\u003e\n            \u003c/x-laratify-col\u003e\n            \u003cx-laratify-col cols=\"6\" md=\"4\" xl=\"4\" flex=\"grow\"\u003e\n                \u003cdiv class=\"text-center bg-green-200 p-2\"\u003e3\u003c/div\u003e\n            \u003c/x-laratify-col\u003e\n        \u003c/x-laratify-row\u003e\n        \u003cx-laratify-row class=\"h-64 my-4 border border-2 border-blue-500\" align=\"center\" justify=\"center\"\u003e\n            \u003cx-laratify-col cols=\"3\"\u003e\n                \u003cdiv class=\"text-center bg-yellow-400 p-2\"\u003eA\u003c/div\u003e\n            \u003c/x-laratify-col\u003e\n            \u003cx-laratify-col cols=\"3\" align-self=\"end\"\u003e\n                \u003cdiv class=\"text-center bg-indigo-400 p-2\"\u003eB\u003c/div\u003e\n            \u003c/x-laratify-col\u003e\n            \u003cx-laratify-col cols=\"3\"\u003e\n                \u003cdiv class=\"text-center bg-teal-400 p-2\"\u003eC\u003c/div\u003e\n            \u003c/x-laratify-col\u003e\n        \u003c/x-laratify-row\u003e\n    \u003c/x-laratify-container\u003e\n```\n- flex options: initial,1,auto,none,grow,grow-0,shrink,shrink-0,\n- order options: 1,2,3,4,5,6,7,8,9,10,11,12, first,last,none\n- align-self options: auto, start, center, end, stretch\n- flex-dir options: row, row-reverse, col, col-reverse\n- align option: stretch, start, center, end, baseline (flex's align-items)\n- justify options: start, center, end, between, around\n- align-content options: start, center, end, between, around\n\nCard\n\n```blade\n    \u003cx-laratify-container class=\"py-5\"\u003e\n        \u003cx-laratify-row class=\"h-full my-4\" wrap-cols\u003e\n            \u003cx-laratify-col cols=\"full\" sm=\"6\" md=\"4\" class=\"p-2\" flex=\"shrink-0\"\u003e\n                \u003cx-laratify-card title=\"Card Title\" subtitle=\"Card Subtitle\" title-class=\"text-center\" subtitle-class=\"text-center\"\u003e\n                    \u003cx-slot name=\"title\"\u003e\n                        \u003cdiv class=\"text-blue-500\"\u003eCard Title\u003c/div\u003e\n                    \u003c/x-slot\u003e\n                    \u003cdiv class=\"text-sm leading-5 text-black px-4 py-5\"\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem\n                        ipsam\n                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.\n                        Deleniti\n                        illo quod repellat.\n                    \u003c/div\u003e\n                \u003c/x-laratify-card\u003e\n            \u003c/x-laratify-col\u003e\n            \u003cx-laratify-col cols=\"full\" sm=\"6\" md=\"4\" class=\"p-2\" flex=\"shrink-0\"\u003e\n                \u003cx-laratify-card title=\"Card Title\" subtitle=\"Card Subtitle\"\u003e\n                    \u003cdiv class=\"text-sm leading-5 text-gray-600 px-4 py-5\"\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem\n                        ipsam\n                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.\n                        Deleniti\n                        illo quod repellat.\n                    \u003c/div\u003e\n                \u003c/x-laratify-card\u003e\n            \u003c/x-laratify-col\u003e\n            \u003cx-laratify-col cols=\"full\" sm=\"6\" md=\"4\" class=\"p-2\" flex=\"shrink-0\"\u003e\n                \u003cx-laratify-card title=\"Card Title\" subtitle=\"Card Subtitle\"\u003e\n                    \u003cdiv class=\"text-sm leading-5 text-gray-600 px-4 py-5\"\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem\n                        ipsam\n                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.\n                        Deleniti\n                        illo quod repellat.\n                    \u003c/div\u003e\n                \u003c/x-laratify-card\u003e\n            \u003c/x-laratify-col\u003e\n        \u003c/x-laratify-row\u003e\n        \n        \u003cx-laratify-card title=\"Card Title\" subtitle=\"Card Subtitle\"\u003e\n            \u003cdl\u003e\n                \u003cdiv class=\"bg-gray-100 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\"\u003e\n                    \u003cdt class=\"text-sm leading-5 font-medium text-gray-500\"\u003e\n                        Full name\n                    \u003c/dt\u003e\n                    \u003cdd class=\"mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2\"\u003e\n                        Muhsen Maqsudi\n                    \u003c/dd\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\"\u003e\n                    \u003cdt class=\"text-sm leading-5 font-medium text-gray-500\"\u003e\n                        Job Title\n                    \u003c/dt\u003e\n                    \u003cdd class=\"mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2\"\u003e\n                        Backend Developer\n                    \u003c/dd\u003e\n                \u003c/div\u003e\n            \u003c/dl\u003e\n        \u003c/x-laratify-card\u003e\n    \u003c/x-laratify-container\u003e\n```\n\nNavbar\n\n```blade\n    \u003cx-laratify-navbar :links=\"['URL link' =\u003e '/auth/login', 'Google' =\u003e 'https://google.com', 'Login' =\u003e 'login']\"\u003e\n        \u003cx-slot name=\"logo\"\u003e\n            \u003cimg class=\"block lg:hidden h-8 w-auto\"\n                 src=\"https://tailwindui.com//img/logos/workflow-mark-on-dark.svg\" alt=\"\"/\u003e\n            \u003cimg class=\"hidden lg:block h-8 w-auto\"\n                 src=\"https://tailwindui.com/img/logos/workflow-logo-on-dark.svg\" alt=\"\"/\u003e\n        \u003c/x-slot\u003e\n        \u003cx-slot name=\"profileDropdown\"\u003e\n            \u003ca href=\"#\"\n               class=\"block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out\"\u003eYour\n                Profile\u003c/a\u003e\n            \u003ca href=\"#\"\n               class=\"block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out\"\u003eSettings\u003c/a\u003e\n            \u003ca href=\"#\"\n               class=\"block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out\"\u003eSign\n                out\u003c/a\u003e\n        \u003c/x-slot\u003e\n    \u003c/x-laratify-navbar\u003e\n```\n\nTable\n\n```blade\n    \u003cx-laratify-table stripped hover \n        :columns=\"[\n            'name' =\u003e 'Name',\n            'title' =\u003e 'Title',\n            'status' =\u003e 'Status',\n            'role' =\u003e 'Role'\n         ]\"\n        :rows=\"[\n            [\n                'id' =\u003e 1,\n                'name' =\u003e 'Bernard Lane',\n                'title' =\u003e 'Human Resources',\n                'status' =\u003e 'Active',\n                'role' =\u003e 'Owner'\n            ],\n            [\n                'id' =\u003e 2,\n                'name' =\u003e 'Muhsen Maqsudi',\n                'title' =\u003e 'Backend Developer',\n                'status' =\u003e 'Inactive',\n                'role' =\u003e 'Admin'\n            ],\n            [\n                'id' =\u003e 3,\n                'name' =\u003e 'Muhsen Maqsudi',\n                'title' =\u003e 'Backend Developer',\n                'status' =\u003e 'Inactive',\n                'role' =\u003e 'Admin'\n            ],\n         ]\"\n        :actions=\"[\n                'show' =\u003e 'get_view_route_name',\n                'edit' =\u003e 'get_edit_route_name',\n                'delete' =\u003e 'get_edit_route_delete'\n         ]\"\n         actions-custom-view=\"components.partials.my-action\"\n    \u003e\n    \u003c/x-laratify-table\u003e\n```\n\nTabs \u0026 Tab\n\n```blade\n    \u003cx-laratify-tabs :navs=\"['first', 'second', 'third']\"\u003e\n        \u003cx-laratify-tab id=\"first\"\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor odit rerum voluptatibus. Ad alias\n            aperiam beatae culpa delectus, dolor eligendi ipsam minus necessitatibus nihil numquam odit provident ut\n            vitae voluptatibus?\n        \u003c/x-laratify-tab\u003e\n        \u003cx-laratify-tab id=\"second\"\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem\n            eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit\n            voluptatum.\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos\n            dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe\n            veritatis, voluptatum.\n        \u003c/x-laratify-tab\u003e\n        \u003cx-laratify-tab id=\"third\"\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem\n            eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit\n            voluptatum.\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos\n            dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe\n            veritatis, voluptatum.\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam asperiores assumenda at corporis\n            cum dolor ea id, impedit ipsa laborum nobis obcaecati ratione rem reprehenderit, unde voluptatem\n            voluptatum. Quaerat!\n        \u003c/x-laratify-tab\u003e\n    \u003c/x-laratify-tabs\u003e\n```\n\nCollapse\n\n```blade\n        \u003cx-laratify-collapse class=\"w-1/2 m-2\"\u003e\n            \u003cx-slot name=\"activator\"\u003e\n                \u003cbutton\n                    class=\"bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1\"\n                    @click=\"isOpen = !isOpen\"\u003e\n                    Collapse\n                \u003c/button\u003e\n            \u003c/x-slot\u003e\n            \u003cx-laratify-card title=\"Card Title\" subtitle=\"Card Subtitle\"\u003e\n                \u003cdiv class=\"text-sm leading-5 text-gray-600 px-4 py-5\"\u003e\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem\n                    ipsam\n                    quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.\n                    Deleniti\n                    illo quod repellat.\n                \u003c/div\u003e\n            \u003c/x-laratify-card\u003e\n        \u003c/x-laratify-collapse\u003e\n```\n\n## Package Config\n\nFor publishing package's config file run the bellow command\n\n    php artisan vendor:publish --tag=\"laratify-config\"\n    \n```php\n    // app/config.php\n    return [\n        'text-base-color' =\u003e 'white', // changing the app text base color\n        'background-base-color' =\u003e 'blue-500' // changing the app background base color\n    ];  \n```\n\n## Packages Used\n\nComposer packages:\n-   [laravel/ui](https://github.com/laravel/ui)\n\nNPM packages:\n\n-   [tailwindcss](https://www.npmjs.com/package/tailwindcss)\n-   [@tailwindcss/custom-forms](https://www.npmjs.com/package/@tailwindcss/custom-forms)\n-   [laravel-mix-purgecss](https://www.npmjs.com/package/laravel-mix-purgecss)\n-   [laravel-mix-tailwind](https://www.npmjs.com/package/laravel-mix-tailwind)\n-   [alpinejs](https://www.npmjs.com/package/alpinejs)\n-   [tippyjs](https://github.com/atomiks/tippyjs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuhsenmaqsudi%2Flaratify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuhsenmaqsudi%2Flaratify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuhsenmaqsudi%2Flaratify/lists"}