PHPackages aramboyajyan/sample-ui - 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. aramboyajyan/sample-ui ActiveLibrary[Templating & Views](/categories/templating) aramboyajyan/sample-ui ====================== Reusable Laravel UI components styled with Tailwind CSS for corporate projects 018PHPCI failing Since Aug 15Pushed 8mo agoCompare [ Source](https://github.com/aramboyajyan/sample-ui)[ Packagist](https://packagist.org/packages/aramboyajyan/sample-ui)[ RSS](/packages/aramboyajyan-sample-ui/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) USSF UI Components ================== [](#ussf-ui-components) A Laravel component library styled with Tailwind CSS for use in corporate projects. This package provides reusable UI components that can be maintained separately and updated across multiple projects. Installation ------------ [](#installation) 1. Install the package via Composer: ``` composer require aramboyajyan/sample-ui ``` 2. Publish the configuration file (recommended): ``` php artisan vendor:publish --tag=ui-config ``` 3. Publish the views (optional): ``` php artisan vendor:publish --tag=ui-views ``` 4. Publish the built CSS assets: ``` php artisan vendor:publish --tag=ui-assets ``` 5. Include the CSS in your layout: ``` {{-- Option 1: Use the Blade directive --}} @ussfStyles {{-- Option 2: Manual link tag --}} ``` 6. (Optional) Publish CSS source files for customization: ``` php artisan vendor:publish --tag=ui-source ``` Configuration ------------- [](#configuration) ### Global Font [](#global-font) You can optionally apply a global font to your entire website by configuring the package: ``` // config/ui-components.php return [ 'apply_global_font' => true, // Set to true to apply global font 'font_family' => 'Inter, system-ui, sans-serif', // Customize font stack ]; ``` When enabled, the specified font family will be applied to the `body` element. ### USSF Color Palette [](#ussf-color-palette) The package includes fixed USSF brand colors that extend Tailwind's default palette. These colors are standardized and cannot be customized to ensure brand consistency across all projects: - **ussf-blue**: Available in shades 100-900 (e.g., `bg-ussf-blue-600`, `text-ussf-blue-500`) - **ussf-red**: Available in shades 100-900 (e.g., `bg-ussf-red-600`, `text-ussf-red-500`) ``` {{-- Using USSF colors --}} USSF Blue Button USSF Red Title ``` **Color Values:** - **ussf-blue**: Ranges from light blue (#e6f3ff) to dark navy (#002244) - **ussf-red**: Ranges from light red (#ffe6e6) to dark crimson (#440000) Components ---------- [](#components) ### Button Component [](#button-component) The Button component supports different sizes, types, and styling options. #### Props [](#props) - `size`: `sm`, `md` (default), `lg` - `type`: `primary` (default), `secondary`, `blank` - `rounded`: `true`, `false` (default) - `tag`: `button` (default), `a`, `div`, etc. - `icon`: FontAwesome icon name (without `fa-` prefix) - `iconPosition`: `left` (default), `right` #### Usage Examples [](#usage-examples) ``` {{-- Basic primary button --}} Click me {{-- Small secondary button --}} Small Button {{-- Large rounded primary button --}} Large Rounded {{-- Blank button with custom attributes --}} Disabled Button {{-- Button as link --}} Go to Dashboard {{-- Buttons with FontAwesome icons --}} Save Changes {{-- Icon on the right --}} Next Step {{-- Large button with icon --}} Download File {{-- Small button with icon only (use empty content) --}} ``` #### FontAwesome Icons [](#fontawesome-icons) The button component supports FontAwesome icons. Make sure you have FontAwesome included in your project: ``` ``` Use any FontAwesome icon name without the `fa-` prefix: - `icon="save"` → `` - `icon="arrow-right"` → `` - `icon="download"` → `` ``` #### Button Types - **Primary**: Blue background with white text - **Secondary**: Gray background with dark text - **Blank**: Transparent background with border #### Button Sizes - **sm**: Smaller padding and text - **md**: Default size - **lg**: Larger padding and text ### Typography Component The Typography component provides consistent text styling for headings, paragraphs, and lists. #### Props - `tag`: HTML tag to render (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `ul`, `ol`, `li`) - `variant`: Override the styling variant (defaults to the tag value) #### Usage Examples ```blade {{-- Headings --}} Main Page Title Section Title Subsection Title {{-- Paragraphs --}} This is a paragraph with proper styling and spacing. {{-- Lists --}} First item Second item Third item First step Second step Third step {{-- Custom variant (h2 styling on h3 tag) --}} Large Subtitle ``` #### Typography Styles [](#typography-styles) - **h1**: 4xl, bold, tight leading - **h2**: 3xl, bold, tight leading - **h3**: 2xl, semibold, tight leading - **h4**: xl, semibold, tight leading - **h5**: lg, medium, tight leading - **h6**: base, medium, tight leading - **p**: base, relaxed leading - **ul/ol**: Lists with proper spacing and markers - **li**: List items with consistent styling Development ----------- [](#development) ### Building CSS [](#building-css) The library ships with pre-built CSS that includes all necessary styles with the `ussf-` prefix to avoid conflicts. 1. Install dependencies: ``` npm install ``` 2. Build for development (with watching): ``` npm run dev ``` 3. Build for production: ``` npm run build ``` The built CSS is automatically generated in the `dist/ui-components.css` file and includes: - All Tailwind CSS utilities with `ussf-` prefix - Component-specific classes - USSF brand colors (ussf-blue, ussf-red) - Custom font family support ### CSS Publishing Tags [](#css-publishing-tags) - `ui-assets`: Publishes the built CSS file to `public/vendor/ui/ui-components.css` - `ui-source`: Publishes the source CSS files to `resources/css/vendor/ui/` for customization - `ui-views`: Publishes component views for customization - `ui-config`: Publishes the configuration file ### Custom Styling [](#custom-styling) All components accept additional CSS classes through the standard `class` attribute: ``` Full Width Button Centered Title ``` ### Extending Components [](#extending-components) You can extend or customize components by publishing the views and modifying them in your project: ``` php artisan vendor:publish --tag=ui-views ``` This will copy the component views to `resources/views/vendor/ui/` where you can customize them. Local Development ----------------- [](#local-development) For local development and testing of this library, see [dev-setup.md](dev-setup.md) for detailed instructions on setting up a development environment with path repositories. Troubleshooting --------------- [](#troubleshooting) ### Styles Not Appearing [](#styles-not-appearing) If styles aren't working in your project: 1. **Ensure you've published the assets**: ``` php artisan vendor:publish --tag=ui-assets ``` 2. **Check the CSS file exists**: ``` ls -la public/vendor/ui/ui-components.css ``` 3. **Verify CSS is included in your layout**: ``` {{-- In your layout file (app.blade.php, etc.) --}} @ussfStyles {{-- OR manually --}} ``` 4. **Clear cache if needed**: ``` php artisan view:clear php artisan config:clear ``` ### Component Not Found [](#component-not-found) If you get component errors like "Component \[ui::button\] not found": 1. **Ensure the service provider is registered** (should be automatic with Laravel auto-discovery) 2. **Check config is published**: ``` php artisan vendor:publish --tag=ui-config ``` License ------- [](#license) MIT License ### Health Score 17 — LowBetter than 6% of packages Maintenance42 Moderate activity, may be stable Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity13 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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/1519006035b783ae0f1ce3306c93456690c6d28842a61a5d2cac10e3414471d1?d=identicon)[AramBoyajyan](/maintainers/AramBoyajyan) --- Top Contributors [![aramboyajyan](https://avatars.githubusercontent.com/u/1978925?v=4)](https://github.com/aramboyajyan "aramboyajyan (13 commits)") ### Embed Badge ![Health badge](/badges/aramboyajyan-sample-ui/health.svg) ``` [![Health](https://phpackages.com/badges/aramboyajyan-sample-ui/health.svg)](https://phpackages.com/packages/aramboyajyan-sample-ui) ``` ### 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)