{"id":45597060,"url":"https://github.com/rapidez/blade-components","last_synced_at":"2026-05-06T16:04:35.013Z","repository":{"id":255458817,"uuid":"852632876","full_name":"rapidez/blade-components","owner":"rapidez","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-15T14:26:25.000Z","size":1569,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-16T11:30:38.666Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rapidez.github.io/blade-components/demo/components.html","language":"Blade","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rapidez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-05T06:32:44.000Z","updated_at":"2025-10-15T14:26:30.000Z","dependencies_parsed_at":"2024-12-03T17:27:57.280Z","dependency_job_id":"ad5eb287-fd09-4836-acc5-102c873bd338","html_url":"https://github.com/rapidez/blade-components","commit_stats":null,"previous_names":["rapidez/blade-components"],"tags_count":20,"template":false,"template_full_name":"rapidez/package-template","purl":"pkg:github/rapidez/blade-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidez%2Fblade-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidez%2Fblade-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidez%2Fblade-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidez%2Fblade-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rapidez","download_url":"https://codeload.github.com/rapidez/blade-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidez%2Fblade-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29744878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"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":[],"created_at":"2026-02-23T13:50:32.376Z","updated_at":"2026-05-06T16:04:35.004Z","avatar_url":"https://github.com/rapidez.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rapidez Blade Components\n\nThis package includes some Tailwind CSS styled Blade components, the components do not need or require Rapidez. This package is only used within Rapidez by default, but **can be used in any Laravel project**.\n\n- [Input](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/input.blade.php)\n- [Checkbox](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/checkbox/checkbox.blade.php)\n- [Radio](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/radio/radio.blade.php)\n- [Select](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/select/select.blade.php)\n- [Textarea](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/textarea/textarea.blade.php)\n- [Label](https://github.com/rapidez/blade-components/blob/master/resources/views/components/label/label.blade.php)\n- [Accordion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/accordion/accordion.blade.php)\n- [Buttons](#buttons)\n- [Prose](https://github.com/rapidez/blade-components/blob/master/resources/views/components/prose/prose.blade.php)\n- [Slideover](https://github.com/rapidez/blade-components/blob/master/resources/views/components/slideover/slideover.blade.php)\n- [Slideover (mobile only)](https://github.com/rapidez/blade-components/blob/master/resources/views/components/slideover/mobile.blade.php)\n- [Readmore](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php)\n\nThe idea with these components is to have a good starting point and centralized styling. Most of the components use a [Anonymous Index](https://laravel.com/docs/master/blade#anonymous-index-components), this way you have a default and variants can be added next to it. We're using the (currently undocumented) [component name guessing](https://github.com/laravel/framework/pull/52669) here.\n\nWe don't provide a input + label combination component as you'll end up with attribute merging issues. We can't guess where the attribute should go; the input or the label. We could provide a 99% use case but you'll eventually end up with exceptions and complexity within the components. But; we do provide it for the checkbox and radio as you can see within those components. If you don't need the label you can use the `base` component as you can find within the examples.\n\n[![](.github/media/screenshot.png)](https://rapidez.github.io/blade-components/demo/components.html)\n\n\u003ca name=\"buttons\"\u003e\u003c/a\u003e\n\nThe base button doesn't have any styling; here, we only use the `x-rapidez::tag`. All other buttons use the `button/button`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.\n\n![](.github/media/buttons.png)\n\n- [Base](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/base.blade.php)\n- [Default](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/button.blade.php)\n- [Primary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/primary.blade.php)\n- [Secondary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/secondary.blade.php)\n- [Outline](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/outline.blade.php)\n- [Conversion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/conversion.blade.php)\n- [Slider](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/slider.blade.php)\n\n\n## Installation\n\n```\ncomposer require rapidez/blade-components\n```\n\nAnd include the CSS file in your `resources/css/app.css`:\n```\n@import '../../vendor/rapidez/blade-components/resources/css/package.css';\n```\n\nIf you're not using Tailwind yet, you've to make sure you've setup Tailwind 4 with these plugins:\n\n- [Forms](https://github.com/tailwindlabs/tailwindcss-forms)\n- [Typography](https://github.com/tailwindlabs/tailwindcss-typography)\n\nA minimal setup can be found in this repos `app.css`, `package.json` and `vite.config.js`.\n\nMore information about the usage and variables can be found in the Rapidez docs: https://docs.rapidez.io/5.x/theming.html#css\n\n### Views\n\nIf you like to change the components you can publish the views with:\n```\nphp artisan vendor:publish --tag=rapidez-blade-components-views\n```\n\n### Read more component\n\nThe [readmore component](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php) includes some Javascript, we're using a [Blade Stack](https://laravel.com/docs/master/blade#stacks) named `foot` for that. Make sure you've an `@stack('foot')` before your closing `\u003c/body\u003e` tag. Within Rapidez this is already present within the [`layouts/app.blade.php`](https://github.com/rapidez/core/blob/master/resources/views/layouts/app.blade.php).\n\n## Usage\n\nJust like any other Blade component, check out the [Laravel Blade docs](https://laravel.com/docs/master/blade) and the examples within the components code linked above. All components are prefixed with `x-rapidez::` to avoid any conflicts with existing Blade components within your project.\n\n### Basic examples\n\n#### Input with a label\n\n```blade\n\u003clabel\u003e\n    \u003cx-rapidez::label\u003eSomething\u003c/x-rapidez::label\u003e\n    \u003cx-rapidez::input name=\"something\" class=\"extra-styling\" /\u003e\n\u003c/label\u003e\n```\n\n#### Checkbox\n\n```blade\n\u003cx-rapidez::input.checkbox name=\"something\"\u003e\n    @lang('Translatable label')\n\u003c/x-rapidez::input.checkbox\u003e\n```\n\n#### Prose\n\n```blade\n\u003cx-rapidez::prose\u003e\n    Content\n\u003c/x-rapidez::prose\u003e\n```\n\n#### Accordion\n\n```blade\n\u003cx-rapidez::accordion\u003e\n    \u003cx-slot:label\u003eTitle\u003c/x-slot:label\u003e\n    \u003cx-slot:content\u003e\n        Collapsable content goes here\n    \u003c/x-slot:content\u003e\n\u003c/x-rapidez::accordion\u003e\n```\n\n#### Slideover\n```blade\n\u003clabel for=\"my-slideover\"\u003e\n    Open Slideover\n\u003c/label\u003e\n\n\u003cx-rapidez::slideover id=\"my-slideover\" title=\"Example Slideover\"\u003e\n    Your slideover content goes here\n\u003c/x-rapidez::slideover\u003e\n```\nMake sure to add this class to your body tag to prevent scrolling when the slideover is open:\n```html\n\u003cbody class=\"has-[.prevent-scroll:checked]:overflow-clip\"\u003e\n```\n\n#### Tag\n\nIt is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n\n##### Usage\n\n```blade\n\u003cx-rapidez::tag is=\"span\" class=\"font-bold\"\u003e\n    Something\n\u003c/x-rapidez::tag\u003e\n```\n\nwhich will result in\n\n```html\n\u003cspan class=\"font-bold\"\u003e\n    Something\n\u003c/span\u003e\n```\n\n## Changing components\n\nIf you like to change the components you can publish the views with:\n```\nphp artisan vendor:publish --tag=rapidez-blade-components-views\n```\n\n## Preview\n\nThere is a preview Blade file included with all the components, to view that in your project you could register a route for it within `routes/web.php` and visit the `/components` route from your browser:\n\n```php\nRoute::view('components', 'rapidez::components-preview');\n```\n\n## Development\n\nWhen you're working on this package you should first install the frontend dependencies with `yarn`, create an initial build with `yarn build`, symlink the public build with `yarn symlink-public` and to show a preview in the browser use `yarn preview`.\n\n## License\n\nGNU General Public License v3. Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frapidez%2Fblade-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frapidez%2Fblade-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frapidez%2Fblade-components/lists"}