{"id":24764094,"url":"https://github.com/stillat/antlers-components","last_synced_at":"2025-08-21T07:02:48.611Z","repository":{"id":103169057,"uuid":"609296800","full_name":"Stillat/antlers-components","owner":"Stillat","description":"Makes it easy to integrate Blade and Livewire components into an Antlers template, and create isolated, reusable Antlers components utilizing partials.","archived":false,"fork":false,"pushed_at":"2023-09-14T23:45:48.000Z","size":180,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main-v2","last_synced_at":"2024-03-15T09:22:32.188Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/Stillat.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license.md","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},"funding":{"github":"johnathonkoster"}},"created_at":"2023-03-03T19:56:12.000Z","updated_at":"2024-05-11T20:23:00.519Z","dependencies_parsed_at":null,"dependency_job_id":"8fa2b374-f0b3-45b5-a403-e65f50a1a1dd","html_url":"https://github.com/Stillat/antlers-components","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"1d056ea751be66ae9e1782020c0ad9b88606aff3"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stillat%2Fantlers-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stillat%2Fantlers-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stillat%2Fantlers-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stillat%2Fantlers-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Stillat","download_url":"https://codeload.github.com/Stillat/antlers-components/tar.gz/refs/heads/main-v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236092447,"owners_count":19093641,"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":[],"created_at":"2025-01-28T21:32:41.745Z","updated_at":"2025-08-21T07:02:48.592Z","avatar_url":"https://github.com/Stillat.png","language":"PHP","funding_links":["https://github.com/sponsors/johnathonkoster"],"categories":[],"sub_categories":[],"readme":"![Antlers Components](.art/banner.png)\n\nAntlers Components is a Statamic addon that makes creating isolated, reusable Antlers partials easy and integrating existing Blade and Livewire components a breeze using a familiar syntax.\n\n## Installation\n\nYou may install Antlers Components using composer:\n\n```bash\ncomposer require stillat/antlers-components\n```\n\n## Requirements\n\nAntlers Components requires at least PHP 8.1 and:\n\n* Statamic version `3.4.*` or higher\n* Laravel `9.36` or higher\n\nThis package provides a familiar syntax for Livewire components, and it is compiled into the Antlers tags provided by this package:\n\n[https://github.com/marcorieser/statamic-livewire](https://github.com/marcorieser/statamic-livewire)\n\nIn order to use the Livewire/Flux syntax, you will also need to install it using the following command:\n\n```bash\ncomposer require marcorieser/statamic-livewire\n```\n\nFor support/reporting issues related to the Livewire functionality beyond compilation errors, please use the following GitHub link:\n\n[https://github.com/marcorieser/statamic-livewire/issues](https://github.com/marcorieser/statamic-livewire/issues)\n\n## Using Blade Components\n\nYou may use Blade Components within your Antlers template using the syntax you are familiar with.\n\nFor example, to include a `card` Blade component we may use the `\u003cx-card /\u003e` syntax. This package supports Blade component slots; you may use Antlers within the slot:\n\n```antlers\n{{ collection:articles }}\n    \u003cx-card class=\"shadow-sm\"\u003e\n        \u003cx-slot:heading class=\"font-bold\"\u003e\n            {{ title }}\n        \u003c/x-slot\u003e\n    \n        {{ content | safe_truncate(120) }}\n    \n        \u003cx-slot:footer class=\"text-sm\"\u003e\n            ...\n        \u003c/x-slot\u003e\n    \u003c/x-card\u003e\n{{ /collection:articles }}\n\n```\n\nUsing Antlers inside parameter values is acceptable.\n\n## Livewire Components\n\nWe can integrate existing Livewire components in our Antlers templates using the `\u003clivewire /\u003e` syntax like so:\n\n```antlers\n{{ collection:articles }}\n    \u003clivewire:counter :start=\"index\" /\u003e\n{{ /collection:articles }}\n```\n\n## Flux Components\n\nIf you'd like to use [Flux](https://fluxui.dev/) components, ensure you've also installed the Livewire addon.\n\n### Flux v1 Styles and Scripts\n\nOnce you have Livewire and Flux installed in your site, you can use the `flux` tag to add the required styles and scripts to your layout:\n\n```antlers\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\n    {{ flux:styles /}}\n\u003c/head\u003e\n\u003cbody\u003e\n    {{ template_content /}}\n\n    {{ flux:scripts /}}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou may now use Flux components directly within your Antlers templates (or within your Livewire components if you are using Antlers for those).\n\n### Flux v2 Styles and Scripts\n\nOnce you have Livewire and Flux installed in your site, you can use the `flux` tag to add the required styles and scripts to your layout:\n\n```antlers\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\n    {{ flux:appearance /}}\n\u003c/head\u003e\n\u003cbody\u003e\n    {{ template_content /}}\n\n    {{ flux:scripts /}}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou may now use Flux components directly within your Antlers templates (or within your Livewire components if you are using Antlers for those).\n\n\n## Supported Parameter Types\n\nThis package supports the following parameter types when compiling component tags to Antlers:\n\n**Shorthand Variables**:\n\n```antlers\n{{ title = 'The title'; }}\n\n\u003cx-alert :$title /\u003e\n```\n\n**Variable References**:\n\n```antlers\n{{ title = 'The title'; }}\n\n\u003cx-alert :title=\"title\" /\u003e\n```\n\n**Name/Value**:\n\n```antlers\n\n{{ title = 'The title'; }}\n\n\u003cx-alert title=\"title\" /\u003e\n```\n\n**Attribute**:\n\n```antlers\n\u003cx-editor readonly /\u003e\n```\n\n## Antlers Components\n\nThis package also supports the concept of Antlers \"components\", which are really just syntax sugar on top of partials (with a few special behaviors).\n\nAs an example, we could include a partial named `partial-name.antlers.html` using this library like so:\n\n```antlers\n\u003ca-partial-name :$title /\u003e\n```\n\n**Very Important**: When using this syntax, the partials **will not** inherit the scope they were included in (except for the general Cascade). This means that if we want current data to be supplied to our partial, we must explicitly pass it in via. parameters.\n\nThe behavior of slots is also slightly different when using this syntax, and is closer to anonymous Blade components.\n\nLet us consider an Antlers partial named `_card.antlers.html`:\n\n```antlers\n\u003cdiv {{ attributes.class(['border']) }}\u003e\n    \u003ch1 {{ title.attributes.class(['border']) }}\u003e\n        {{ title }}\n    \u003c/h1\u003e\n    \n    {{ slot }}\n    \n    \u003cfooter {{ footer.attributes.class(['text-gray-700']) }}\u003e\n        {{ footer }}\n    \u003c/footer\u003e\n\u003c/div\u003e\n```\n\nwe can render this Antlers partial in our main template like so:\n\n```antlers\n{{ collection:articles }}\n    \u003ca-card :$title :$content\u003e\n        \u003ca:slot:title\u003e{{ title }}\u003c/a:slot:title\u003e\n        \u003ca:slot:footer\u003e...\u003c/a:slot:footer\u003e\n\n        {{ content | safe_truncate(120) }}\n    \u003c/a-card\u003e\n{{ /collection:articles }}\n```\n\n\u003e Note: We have to explicitly allow the current article's title and content values by supplying them via. parameters. Without this, it will default to the current page's values.\n\n\nWhen using this syntax, we do not need to prefix named slots with `slot:` inside our partial. Additionally, we also have access to an attributes bag. Parameters supplied to named slots will be available within the partial, as well:\n\n```antlers\n{{ collection:articles }}\n    \u003ca-card :$title :$content\u003e\n        \u003ca:slot:title class=\"custom title classes\"\u003e{{ title }}\u003c/a:slot:title\u003e\n        \u003ca:slot:footer\u003e...\u003c/a:slot:footer\u003e\n\n        {{ content | safe_truncate(120) }}\n    \u003c/a-card\u003e\n{{ /collection:articles }}\n```\n\n### Nesting Antlers Component Partials\n\nWe may also nest partial components by including them within other components. Like with regular components, we must specify what values we want to be passed along to our nested components:\n\n```antlers\n\u003cdiv\u003e\n    \u003ca-child-partial :$title /\u003e\n\u003c/div\u003e\n```\n\nWe can check if we are inside a nested/child component using the `__is_nested` variable:\n\n```antlers\n{{ if __is_nested }}\n    I am a nested partial.\n{{ else }}\n    I am not nested.\n{{ /if }}\n```\n\nWe can also see how deeply nested we are using the `__depth` variable:\n\n```antlers\nThe current nested partial depth is: {{ __depth }}.\n```\n\nAnd finally, we may access data from the parent partial if we are nested by referencing the `__parent` variable:\n\n```antlers\n{{ __parent.title }}\n```\n\nIf that parent has a parent, we can keep on going:\n\n```antlers\n{{ __parent.__parent.title }}\n```\n\n## License\n\nThis addon is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstillat%2Fantlers-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstillat%2Fantlers-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstillat%2Fantlers-components/lists"}