{"id":29703421,"url":"https://github.com/phlexyUI/phlexy_ui","last_synced_at":"2025-07-23T13:39:54.043Z","repository":{"id":257674694,"uuid":"836646258","full_name":"PhlexyUI/phlexy_ui","owner":"PhlexyUI","description":"✨ PhlexyUI is a Ruby UI component library for DaisyUI using Phlex","archived":false,"fork":false,"pushed_at":"2025-05-11T14:39:59.000Z","size":148,"stargazers_count":90,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-13T13:11:20.447Z","etag":null,"topics":["daisyui","phlex","ruby"],"latest_commit_sha":null,"homepage":"https://phlexyui.com","language":"Ruby","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/PhlexyUI.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2024-08-01T09:10:42.000Z","updated_at":"2025-07-09T22:19:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"762ef8d3-5028-4ef6-a85e-cfa194ed54db","html_url":"https://github.com/PhlexyUI/phlexy_ui","commit_stats":null,"previous_names":["phlexyui/phlexy_ui"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/PhlexyUI/phlexy_ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhlexyUI%2Fphlexy_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhlexyUI%2Fphlexy_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhlexyUI%2Fphlexy_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhlexyUI%2Fphlexy_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PhlexyUI","download_url":"https://codeload.github.com/PhlexyUI/phlexy_ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhlexyUI%2Fphlexy_ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266689848,"owners_count":23969146,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["daisyui","phlex","ruby"],"created_at":"2025-07-23T13:39:52.750Z","updated_at":"2025-07-23T13:39:54.021Z","avatar_url":"https://github.com/PhlexyUI.png","language":"Ruby","funding_links":[],"categories":["UI Kits"],"sub_categories":["Libraries"],"readme":"\u003cpicture\u003e\n  \u003csource srcset=\"https://github.com/user-attachments/assets/2c4d7fdb-abe7-4f71-a6d0-ef4d41b5625a\" media=\"(prefers-color-scheme: dark)\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/9afa9755-4aab-412a-9dc9-5eb2f76c12d6\" width=\"350\" alt=\"PhlexUI logo\"\u003e\u003cbr\u003e\n\u003c/picture\u003e\n\nA Ruby UI component library for DaisyUI using Phlex ✨\n\n# ⚙️ Installation\n\n## 1. Install CSS dependencies\n\nYou can install TailwindCSS and DaisyUI either via a JS bundler or via importmaps.\n\n### JS Bundler\n\n**TailwindCSS**\n\nInstall TailwindCSS by following the instructions in the TailwindCSS documentation, using either the Tailwind CLI or PostCSS.\n\n**DaisyUI**\n\nInstall DaisyUI by following the instructions in the DaisyUI documentation as a Node package.\n\n### Importmaps\n\n**TailwindCSS with DaisyUI**\n\nYou'll need to download a TailwindCSS standalone CLI that comes bundled with DaisyUI by following the instructions in the [tailwind-cli-extra repo](https://github.com/dobicinaitis/tailwind-cli-extra).\n\nAfterwards, place it somewhere in your project, e.g. in the bin directory.\n\nIf you want to compile the standalone TailwindCSS CLI with DaisyUI yourself, you can follow the instructions here.\n\n**tailwindcss-rails gem**\n\nInstall tailwindcss-rails gem for Rails to automatically include your TailwindCSS stylesheets when the asset pipeline compiles your assets.\n\nFor this, you'll need to install the gem by following the instructions in the [tailwindcss-rails repo](https://github.com/rails/tailwindcss-rails).\n\nFinally, you'll need to set the `TAILWINDCSS_INSTALL_DIR` environment variable in your Rails app pointing to the directory where you plaed the binary from the tailwind-cli-extra repo mentioned above. e.g. `TAILWINDCSS_INSTALL_DIR=bin`\n\n### 2. Install Ruby dependencies\n\n#### Install Phlex\n\nInstall Phlex by following the instructions in the [Phlex documentation](https://www.phlex.fun/#rails-introduction).\n\n#### Install PhlexyUI\n\n1. Add the PhlexyUI gem to your Gemfile:\n\n```\nbundle add phlexy_ui\n```\n\n2. (Optional) Include the `PhlexyUI` module in `ApplicationComponent`:\n\n```rb\nclass ApplicationComponent \u003c Phlex::HTML\n  include PhlexyUI\nend\n```\n\nThis will allow you to use PhlexyUI components using the short-form syntax. For example:\n\n```rb\nclass SomeView \u003c ApplicationView\n  def view_template\n    Button :primary do\n      \"Hello, world!\"\n    end\n  end\nend\n```\n\nIf you don't include PhlexyUI, you can still use the namespaced syntax:\n\n```rb\nclass SomeView \u003c ApplicationView\n  def view_template\n    PhlexyUI::Button :primary do\n      \"Hello, world!\"\n    end\n  end\nend\n```\n\nConsider not including PhlexyUI in ApplicationComponent if:\n\n- You have your own component library with the same component names as PhlexyUI.\n- You're including your own components module in `ApplicationComponent`.\n\nIn this scenario, including both PhlexyUI and your own component library in `ApplicationComponent` will lead to naming conflicts.\n\n3. Update your `tailwind.config.js` file to include PhlexyUI styles:\n\n```js\nconst execSync = require(\"child_process\").execSync;\nconst outputPhlexyUI = execSync(\"bundle show phlexy_ui\", { encoding: \"utf-8\" });\nconst phlexyUIPath = outputPhlexyUI.trim() + \"/**/*.rb\";\nmodule.exports = {\n  content: [\n    // ... other paths\n    phlexyUIPath,\n  ],\n};\n```\n\n4. Update your tailwind.config.js file to detect TailwindCSS classes in Ruby files.\n\n```js\nmodule.exports = {\n  content: [\n    // ... other paths\n    //\n    // Note the \"rb\" extension at the end\n    \"./app/views/**/*.{erb,haml,html,slim,rb}\",\n  ],\n};\n```\n\n# 💡 Usage\n\nRefer to [the docs](https://phlexyui.com) to see how to use components. Here's an example:\n\n```rb\nCard :base_100 do |card|\n  figure do\n    img(src:)\n  end\n  card.body do\n    card.title do\n      \"Shoes!\"\n    end\n    p do\n      \"If a dog chews shoes whose shoes does he choose?\"\n    end\n    card.actions class: \"justify-end\" do\n      Button :primary do\n        \"Buy Now\"\n      end\n    end\n  end\nend\n```\n\nWhich produces:\n\n\u003cimg width=\"544\" alt=\"Screenshot 2024-09-20 at 12 22 52 a m\" src=\"https://github.com/user-attachments/assets/fad06a89-85fa-43cd-8c8f-7ed23b4ad77b\"\u003e\n\n# 🔧 Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `bundle exec rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\n# 💻 Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/PhlexyUI/phlexy_ui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/phlexy_ui/blob/main/CODE_OF_CONDUCT.md).\n\n1. Visit [the docs](https://phlexyui.com/) to see which components are still not implemented or not yet added to the docs.\n\n2. Implement it.\n\n3. After your PR is merged, [add it to the docs](https://github.com/PhlexyUI/phlexy_ui_docs).\n\n4. Celebrate 🎉\n\n# 📃 License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n# ☝️ Code of Conduct\n\nEveryone interacting in the PhlexyUI project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/phlexy_ui/blob/main/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FphlexyUI%2Fphlexy_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FphlexyUI%2Fphlexy_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FphlexyUI%2Fphlexy_ui/lists"}