PHPackages akostdev/moonshine-clock - 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. [Utility & Helpers](/categories/utility) 4. / 5. akostdev/moonshine-clock ActiveLibrary[Utility & Helpers](/categories/utility) akostdev/moonshine-clock ======================== Analog clock for your admin panel and more v1.0.3(1y ago)35[1 issues](https://github.com/AkostDev/moonshine-clock/issues)MITPHPPHP ^8.0|^8.1|^8.2 Since Mar 7Pushed 1y ago1 watchersCompare [ Source](https://github.com/AkostDev/moonshine-clock)[ Packagist](https://packagist.org/packages/akostdev/moonshine-clock)[ Docs](https://github.com/AkostDev/moonshine-clock)[ RSS](/packages/akostdev-moonshine-clock/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)Dependencies (2)Versions (5)Used By (0) MoonShine Analog Clock Component ================================ [](#moonshine-analog-clock-component) [![Latest Version on Packagist](https://camo.githubusercontent.com/a19cce7c706429d1010132bb08e5fac36f8fa11f3cdd476d8304acb74d18361d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616b6f73746465762f6d6f6f6e7368696e652d636c6f636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/akostdev/moonshine-clock)[![Total Downloads](https://camo.githubusercontent.com/3c58533b9a01972ba3f7ac415f1d5f601dd698f693c4453908bef8a486de8a13/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616b6f73746465762f6d6f6f6e7368696e652d636c6f636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/akostdev/moonshine-clock) An elegant analog clock component for MoonShine Admin Panel with dark mode support and numerous customization options. [Русская версия документации](README.ru.md) Features -------- [](#features) - Smooth second hand animation - Dark mode support with separate color settings - Highly customizable appearance (colors, sizes, fonts) - Option to show/hide digits Screenshots ----------- [](#screenshots) [![Analog Clock Light Mode](assets/clock-light.png)](assets/clock-light.png)[![Analog Clock Dark Mode](assets/clock-dark.png)](assets/clock-dark.png) Installation ------------ [](#installation) You can install the package via composer: ``` composer require akostdev/moonshine-clock ``` Usage ----- [](#usage) You can use the AnalogClock component in your MoonShine admin panel pages: ``` use AKostDev\MoonShine\Components\AnalogClock; // Basic usage with default parameters AnalogClock::make() // Custom size clock AnalogClock::make(sizePx: 300) // Full customization example AnalogClock::make( sizePx: 250, smoothSecondHand: true, borderColor: '#336699', backgroundColor: '#f5f5f5', borderThickness: 3, centerDotColor: '#ff6600', showDigits: true, digitFont: 'Helvetica, sans-serif', digitColor: '#333333', hourHandColor: '#000000', minuteHandColor: '#444444', secondHandColor: '#ff0000' ) ``` Parameters ---------- [](#parameters) The component accepts the following parameters in the `make()` method: ParameterTypeDefaultDescription`sizePx`int150Clock size in pixels`smoothSecondHand`booltrueEnables smooth second hand animation`showDigits`booltrueShow or hide hour digits`borderColor`string'#000'Clock border color (light mode)`backgroundColor`string'transparent'Clock background color (light mode)`borderThickness`int2Border thickness in pixels`centerDotColor`string'#333'Center dot color (light mode)`digitFont`string'Arial, sans-serif'Font family for digits`digitColor`string'#000'Digit color (light mode)`hourMarksThickness`int3Hour marks thickness in pixels`minuteMarksThickness`int2Minute marks thickness in pixels`hourMarksColor`string'#000'Hour marks color (light mode)`minuteMarksColor`string'#666'Minute marks color (light mode)`hourHandColor`string'#333'Hour hand color (light mode)`minuteHandColor`string'#666'Minute hand color (light mode)`secondHandColor`string'#FF3333'Second hand color (light mode)### Dark Mode Parameters [](#dark-mode-parameters) The component automatically switches to dark mode colors when MoonShine's dark mode is activated. ParameterTypeDefaultDescription`hourHandColorDark`string'#CCC'Hour hand color (dark mode)`minuteHandColorDark`string'#AAA'Minute hand color (dark mode)`secondHandColorDark`string'#FF6666'Second hand color (dark mode)`centerDotColorDark`string'#CCC'Center dot color (dark mode)`digitColorDark`string'#FFF'Digit color (dark mode)`hourMarksColorDark`string'#FFF'Hour marks color (dark mode)`minuteMarksColorDark`string'#AAA'Minute marks color (dark mode)`borderColorDark`string'#FFF'Clock border color (dark mode)`backgroundColorDark`string'transparent'Clock background color (dark mode)Examples -------- [](#examples) ### Basic Clock [](#basic-clock) ``` AnalogClock::make() ``` ### Larger Clock with Custom Colors [](#larger-clock-with-custom-colors) ``` AnalogClock::make( sizePx: 300, hourHandColor: '#007bff', minuteHandColor: '#6c757d', secondHandColor: '#dc3545', borderColor: '#28a745' ) ``` ### Minimal Clock (No Digits) [](#minimal-clock-no-digits) ``` AnalogClock::make( showDigits: false, backgroundColor: '#f8f9fa', borderThickness: 1 ) ``` ### Custom Dark Mode Colors [](#custom-dark-mode-colors) ``` AnalogClock::make( secondHandColor: '#ff0000', secondHandColorDark: '#ff9999', backgroundColorDark: '#222222' ) ``` License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 28 — LowBetter than 54% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record 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. ### Release Activity Cadence Every ~0 days Total 4 Last Release 437d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/11013417?v=4)[Alexander Kostylev](/maintainers/akostdev)[@AkostDev](https://github.com/AkostDev) --- Top Contributors [![AkostDev](https://avatars.githubusercontent.com/u/11013417?v=4)](https://github.com/AkostDev "AkostDev (9 commits)") --- Tags clockmoonshinecompoenent ### Code Quality TestsPHPUnit Static AnalysisRector ### Embed Badge ![Health badge](/badges/akostdev-moonshine-clock/health.svg) ``` [![Health](https://phpackages.com/badges/akostdev-moonshine-clock/health.svg)](https://phpackages.com/packages/akostdev-moonshine-clock) ``` ### Alternatives [symfony/clock Decouples applications from the system clock 430168.9M205](/packages/symfony-clock)[beste/clock A collection of Clock implementations 7423.3M20](/packages/beste-clock)[ergebnis/clock Provides abstractions of a clock. 301.2M](/packages/ergebnis-clock)[icecave/chrono A date & time library that is decoupled from the system clock. 54188.9k7](/packages/icecave-chrono)[dev-lnk/moonshine-builder Project builder for MoonShine 254.8k](/packages/dev-lnk-moonshine-builder) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)