{"id":19458824,"url":"https://github.com/leafsphp/ui","last_synced_at":"2025-04-25T06:30:34.585Z","repository":{"id":57013270,"uuid":"266368426","full_name":"leafsphp/ui","owner":"leafsphp","description":"Leaf UI is a PHP library for building user interfaces.","archived":false,"fork":false,"pushed_at":"2023-04-18T01:20:14.000Z","size":813,"stargazers_count":35,"open_issues_count":5,"forks_count":3,"subscribers_count":3,"default_branch":"next","last_synced_at":"2025-04-22T00:27:35.526Z","etag":null,"topics":["frontend-framework","leaf-ui","php","ui"],"latest_commit_sha":null,"homepage":"https://ui.leafphp.dev/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leafsphp.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"open_collective":"leaf","github":"leafsphp"}},"created_at":"2020-05-23T15:47:51.000Z","updated_at":"2025-04-19T08:53:29.000Z","dependencies_parsed_at":"2023-02-18T16:32:37.892Z","dependency_job_id":"bf59ca49-ab78-4ee5-8719-76b0caed8277","html_url":"https://github.com/leafsphp/ui","commit_stats":{"total_commits":175,"total_committers":2,"mean_commits":87.5,"dds":0.005714285714285672,"last_synced_commit":"326d85a3bfe34da4923d0e0a032aa183ef8aa7d7"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafsphp%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafsphp%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafsphp%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafsphp%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leafsphp","download_url":"https://codeload.github.com/leafsphp/ui/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250766975,"owners_count":21483898,"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","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":["frontend-framework","leaf-ui","php","ui"],"created_at":"2024-11-10T17:28:40.082Z","updated_at":"2025-04-25T06:30:34.195Z","avatar_url":"https://github.com/leafsphp.png","language":"PHP","readme":"\u003c!-- markdownlint-disable no-inline-html --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"https://leafphp.dev/logo-circle.png\" height=\"100\"/\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eLeaf UI [WIP v0.2.0]\u003c/h1\u003e\n\nLeaf UI is a PHP library for building user interfaces.\n\nLeaf UI doesn't need a new compiler or any extensive compiling, it's just the same old PHP you write everyday; as such, you can build full scalable Leaf UI powered apps or just sprinkle Leaf UI into your existing HTML/PHP code.\n\nv0.2.0 of Leaf UI is currently in development, it is a complete rewrite of the library that comes with a lot of new features and a new API. Leaf UI v0.2.0 will allow you to build full scalable Leaf UI powered apps, write reactive UIs all in PHP. You can think of it as a PHP version of React.\n\n## Installing Leaf UI\n\nLike most PHP libraries, we recommend installing Leaf UI with the [Leaf CLI](https://cli.leafphp.dev):\n\n```bash\nleaf install ui@dev-next\n```\n\nOr with [composer](//getcomposer.org). Just open up your console and type:\n\n```bash\ncomposer require leafs/ui:dev-next\n```\n\nAfter this, you can use all of Leaf UI's methods and components.\n\nView the [documentation here](https://staging.ui.leafphp.dev/)\n\n## Building your first Leaf UI\n\nSince Leaf UI is modelled after React, everything is a component. You can create your own components and handle your application state in them.\n\n```php\n\u003c?php\n\nuse Leaf\\UI\\Component;\n\nclass Test2 extends Component\n{\n    // every component needs a unique key\n    public $key = \"test2\";\n    public $count = 1;\n\n    public function increment()\n    {\n        $this-\u003ecount++;\n    }\n\n    public function decrement()\n    {\n        $this-\u003ecount--;\n    }\n\n    public function render()\n    {\n        // your UI will go here\n        return '\n            \u003cbody\u003e\n                \u003cdiv\u003e\n                    \u003cdiv\u003eStatic text\u003c/div\u003e\n                    \u003cbutton @click=\"decrement\"\u003e-\u003c/button\u003e\n                    \u003ch1\u003e{{ $count }}\u003c/h1\u003e\n                    \u003cbutton @click=\"increment\"\u003e+\u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/body\u003e\n        ';\n    }\n}\n```\n\nThis component renders some static text, a button to decrement a counter, a counter and a button to increment the counter. The counter is stored in the component's state and is updated when the buttons are clicked.\n\nTo actually make this work, you simply need to render this component wherever you want it to appear.\n\n```php\n\u003c?php\n\nuse Leaf\\UI;\n\nrequire __DIR__ . '/vendor/autoload.php';\n\nUI::render(new Test2());\n```\n\nThe most beautiful part about all this is that it can run outside Leaf. It is completely independent of Leaf or any other framework and can be used in any PHP application.\n\n_This file is still being updated!_\n\n***Docs @ https://staging.ui.leafphp.dev are still being updated.***\n\n## 💬 Stay In Touch\n\n- [Twitter](https://twitter.com/leafphp)\n- [Join the forum](https://github.com/leafsphp/leaf/discussions/37)\n- [Chat on discord](https://discord.com/invite/Pkrm9NJPE3)\n\n## 📓 Learning Leaf 3\n\n- Leaf has a very easy to understand [documentation](https://leafphp.dev) which contains information on all operations in Leaf.\n- You can also check out our [youtube channel](https://www.youtube.com/channel/UCllE-GsYy10RkxBUK0HIffw) which has video tutorials on different topics\n- We are also working on codelabs which will bring hands-on tutorials you can follow and contribute to.\n\n## 😇 Contributing\n\nWe are glad to have you. All contributions are welcome! To get started, familiarize yourself with our [contribution guide](https://leafphp.dev/community/contributing.html) and you'll be ready to make your first pull request 🚀.\n\nTo report a security vulnerability, you can reach out to [@mychidarko](https://twitter.com/mychidarko) or [@leafphp](https://twitter.com/leafphp) on twitter. We will coordinate the fix and eventually commit the solution in this project.\n\n## 🤩 Sponsoring Leaf\n\nYour cash contributions go a long way to help us make Leaf even better for you. You can sponsor Leaf and any of our packages on [open collective](https://opencollective.com/leaf) or check the [contribution page](https://leafphp.dev/support/) for a list of ways to contribute.\n\nAnd to all our existing cash/code contributors, we love you all ❤️\n\nView the [sponsors](https://leafphp.dev/support/) page to see all our sponsors.\n","funding_links":["https://opencollective.com/leaf","https://github.com/sponsors/leafsphp"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleafsphp%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleafsphp%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleafsphp%2Fui/lists"}