PHPackages exactsports/blade-component-library - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. exactsports/blade-component-library ActiveLibrary[Templating & Views](/categories/templating) exactsports/blade-component-library =================================== UI components pre-styled with our branding 09.1kBlade Since Nov 9Pushed 3y ago4 watchersCompare [ Source](https://github.com/EXACTsports/brand)[ Packagist](https://packagist.org/packages/exactsports/blade-component-library)[ RSS](/packages/exactsports-blade-component-library/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (2)Used By (0) EXACT Sports ============ [](#exact-sports) About This Repository --------------------- [](#about-this-repository) This repository contains UI components and assets with our branding. It is only designed for use on EXACT Sports branded websites. Installation ------------ [](#installation) In the project composer.json file add the following to the 'require' list: ``` "exactsports/blade-component-library": "dev-main", ``` In Terminal, run the following code: ``` composer require exactsports/blade-component-library npm run dev ``` Components ---------- [](#components) - [Headings](#headings) - [Links](#links) - [Alerts](#alerts) - [Badges](#badges) - [Buttons](#buttons) - [Icon Links](#icon-links) - [Logos](#logos) - [Progress Steps](#progress-steps) - [Loading Spinners](#loading-spinners) - [Inputs](#inputs) - [Tables](#tables) All the components can have class attributes which will be merged with the base component class. For some components there are different settings based on the brand. The brand is added to the .env file: ``` BRAND = exact ``` The current options are: 'exact' and 'spect8'. ### Headings [](#headings) HTML headings are defined with the `` to `` tags. ``` Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 ``` AlpineJS and Livewire models can also be used with the 'x-' and 'wire:' attributes. ### Links [](#links) Anchor tags `` have four variables that can be passed through to the component: href (default: #), color (default: blue), icon (default: null) and target (default: \_blank). The color choices are: blue, logo-orange, bright-orange and maroon. The icon choices are: ext (external link) and back (back arrow). Target and href are standard anchor variables. ``` Laravel ``` ### Alerts [](#alerts) Alerts have two variable that can be passed to the component: type and flag (default = false). This is a choice between success, warning and failure. Each option is a different colour and icon. Alternatively, you can change the icon to be a flag by padding this through, as below. ``` You have no credits left. Upgrade your account to add more credits. ``` AlpineJS and Livewire models can also be used with the 'x-' and 'wire:' attributes. ### Badges [](#badges) Buttons have one optional variable that can be passed to the component: color. The color choices are based on the brands and are: logo-orange, bright-orange, maroon, dark-gray, pale-brown and beige. AlpineJS and Livewire models can also be used with the 'x-' and 'wire:' attributes. ``` Badge ``` ### Buttons [](#buttons) Buttons have one optional variable that can be passed to the component: icon. The icon choices are: football, video, upload, share, label. AlpineJS and Livewire models can also be used with the 'x-' and 'wire:' attributes. ``` Primary Button Secondary Button Cancel Button ``` ### Icon Links [](#icon-links) Icon links are standard anchor tags that are icons instead of text. One variable can be passed to the component: icon. The icon choices are: football, edit, delete, share, label. ``` ``` ### Logos [](#logos) ### Progress Steps [](#progress-steps) ### Loading Spinners [](#loading-spinners) The loading spinner is used with a Livewire component and can be used on its own or as part of another element, e.g. a button. The spinner also requires some custom CSS. There are options for the spinner which are size (la-sm or la-2x or la-3x), icon (default is ball-spin-clockwise, the other is line-scale) and whether it is dark or light (light is default, the example below shows the dark alternative). ``` ``` ### Inputs [](#inputs) Inputs can be used horizontally or vertically. The default is vertical (the label above the input), to change to the label being to the left of the input add the 'inline' attribute. There are size different types of input: text, textarea, checkbox and select. There are also two input groups: checkbox and radio. Vertical alignment requires a grid or flex on the containing ``, see the example below. The vertical alignment has no class requirements on the containing div. Each input is contained within either the group component or, for checbox and radio groups, the option-group component. Each type of input has its own attributes: #### Group [](#group) Attributes: label, for, error (default is false), helpText (default is false) and inline (default is false). #### Option Group [](#option-group) Attributes: inline and label. #### Text [](#text) Attributes: id, name, placeholder and type (default is text). #### Textarea [](#textarea) Attributes: id, name, placeholder and rows (default is 3). #### Select [](#select) Attributes: id, name and placeholder. #### Checkbox [](#checkbox) Attributes: id, name, value. #### Option [](#option) Attributes: id, name, label, value and type (radio or checkbox). ``` Select Column... Option 1 Option 1 ``` ### Tables [](#tables) The tables are split into the base table and then three parts: head, body and foot. ### Health Score 21 — LowBetter than 19% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity18 Limited adoption so far Community11 Small or concentrated contributor base Maturity30 Early-stage or recently created project Bus Factor1 Top contributor holds 53.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/55eed7400c452edf7e7adfa4f1c6676b65b5ce1867fff6bddcb80b1bb45360af?d=identicon)[edgrosvenor](/maintainers/edgrosvenor) --- Top Contributors [![edgrosvenor](https://avatars.githubusercontent.com/u/1053395?v=4)](https://github.com/edgrosvenor "edgrosvenor (16 commits)")[![SarahSibert](https://avatars.githubusercontent.com/u/38976391?v=4)](https://github.com/SarahSibert "SarahSibert (14 commits)") ### Embed Badge ![Health badge](/badges/exactsports-blade-component-library/health.svg) ``` [![Health](https://phpackages.com/badges/exactsports-blade-component-library/health.svg)](https://phpackages.com/packages/exactsports-blade-component-library) ``` ### Alternatives [mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[nicmart/string-template StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions. 2101.7M30](/packages/nicmart-string-template) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)