Skip to content

Add UI Framework: Penguin UI #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sejutaimpian wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add UI Framework: Penguin UI #46

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 71 additions & 70 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,101 +6,102 @@ A curated list of [Alpine](https://github.com/alpinejs/alpine) resources.

<!-- TOC -->

* [Official Resources](#official-resources)
* [Articles](#articles)
* [Podcasts](#podcasts)
* [Videos & Screencasts](#videos--screencasts)
* [Examples](#examples)
* [Extensions & Plugins](#extensions--plugins)
* [UI Frameworks](#ui-frameworks)
* [Other](#other)
- [Official Resources](#official-resources)
- [Articles](#articles)
- [Podcasts](#podcasts)
- [Videos & Screencasts](#videos--screencasts)
- [Examples](#examples)
- [Extensions & Plugins](#extensions--plugins)
- [UI Frameworks](#ui-frameworks)
- [Other](#other)

<!-- /TOC -->

To contribute, fork this repository, add your new resource and submit a PR. For more information, see [CONTRIBUTING](/CONTRIBUTING.md).

## Official Resources

* [Alpine Website](https://alpinejs.dev)
* [Alpine GitHub](https://github.com/alpinejs/alpine)
* [Alpine Twitter](https://twitter.com/Alpine_JS)
- [Alpine Website](https://alpinejs.dev)
- [Alpine GitHub](https://github.com/alpinejs/alpine)
- [Alpine Twitter](https://twitter.com/Alpine_JS)

## Articles

* [Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/)
* [Add Behavior To HTML Using Alpine.js – A Todo App](https://lukasznojek.com/blog/2020/02/add-behavior-to-html-using-alpine-js-a-todo-app/?utm_content=bufferbb4ff&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
* [Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev](https://chasingcode.dev/blog/build-signup-form-with-alpinejs/)
* [Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld](https://www.infoworld.com/article/3527958/alpinejs-mixes-vue-react-and-minimalism.html)
* [Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup. - Bram Van Damme / bram.us](https://www.bram.us/2020/01/14/alpine-js-a-rugged-minimal-framework-for-composing-javascript-behavior-in-your-markup/)
* [Starting with AlpineJS - Thomas Toledo-Pierre](https://dev.to/nugetchar/starting-with-alpinejs-hjn)
* [A comparison of a simple app in Vue.js and Alpine.js - Liam Hall](https://medium.com/@wearethreebears/a-comparison-of-a-simple-app-in-vue-js-and-alpine-js-2a8c57f8b0e3)
* [AlpineJS – a lightweight alternative to Vue - Ben Furfie](https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue)
* [Run Alpine.js inside of React - Code with Hugo](https://codewithhugo.com/alpine-js-react/)
* [Build an RSS reader with Alpine.js - Codecourse](https://blog.codecourse.com/build-an-rss-reader-with-alpine-js/)
* [Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS - CSS Tricks](https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/)
* [Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-fetching/)
* [Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-watch-url/)
* [Creating Custom Magic Variables in Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/creating-custom-magic-variables-in-alpinejs)
* [Writing Reusable Alpine Components - Ryan Chandler](https://ryangjchandler.co.uk/articles/writing-reusable-alpine-components)
* [Authoring progressive enhanced fragments with Alpine - Nicolás Delfino](https://www.nicolasdelfino.com/blog/progressive-enhancement-scs)
* [Build a Remaining Character Count Component with Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs)
* [How to Use Cookies With AlpineJS - Peter Thaleikis](https://releasecandidate.dev/posts/2021/how-to-use-cookies-with-alpinejs/)
- [Introducing Alpine.js: A Tiny JavaScript Framework - Smashing Magazine](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/)
- [Add Behavior To HTML Using Alpine.js – A Todo App](https://lukasznojek.com/blog/2020/02/add-behavior-to-html-using-alpine-js-a-todo-app/?utm_content=bufferbb4ff&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
- [Build a Dynamic Sign Up Form With Alpine.js - chasingcode.dev](https://chasingcode.dev/blog/build-signup-form-with-alpinejs/)
- [Alpine.js mixes Vue, React, and minimalism - Paul Krill / InfoWorld](https://www.infoworld.com/article/3527958/alpinejs-mixes-vue-react-and-minimalism.html)
- [Alpine.js – A rugged, minimal framework for composing JavaScript behavior in your markup. - Bram Van Damme / bram.us](https://www.bram.us/2020/01/14/alpine-js-a-rugged-minimal-framework-for-composing-javascript-behavior-in-your-markup/)
- [Starting with AlpineJS - Thomas Toledo-Pierre](https://dev.to/nugetchar/starting-with-alpinejs-hjn)
- [A comparison of a simple app in Vue.js and Alpine.js - Liam Hall](https://medium.com/@wearethreebears/a-comparison-of-a-simple-app-in-vue-js-and-alpine-js-2a8c57f8b0e3)
- [AlpineJS – a lightweight alternative to Vue - Ben Furfie](https://benfurfie.co.uk/articles/alpinejs-a-lightweight-alternative-to-vue)
- [Run Alpine.js inside of React - Code with Hugo](https://codewithhugo.com/alpine-js-react/)
- [Build an RSS reader with Alpine.js - Codecourse](https://blog.codecourse.com/build-an-rss-reader-with-alpine-js/)
- [Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS - CSS Tricks](https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/)
- [Practical Alpine.js: x-data data access & data fetching examples - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-fetching/)
- [Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch - Code with Hugo](https://codewithhugo.com/alpinejs-x-data-watch-url/)
- [Creating Custom Magic Variables in Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/creating-custom-magic-variables-in-alpinejs)
- [Writing Reusable Alpine Components - Ryan Chandler](https://ryangjchandler.co.uk/articles/writing-reusable-alpine-components)
- [Authoring progressive enhanced fragments with Alpine - Nicolás Delfino](https://www.nicolasdelfino.com/blog/progressive-enhancement-scs)
- [Build a Remaining Character Count Component with Alpine.js - Ryan Chandler](https://ryangjchandler.co.uk/articles/build-a-remaining-character-count-component-with-alpinejs)
- [How to Use Cookies With AlpineJS - Peter Thaleikis](https://releasecandidate.dev/posts/2021/how-to-use-cookies-with-alpinejs/)

## Podcasts

* [Alpine.js is like Tailwind CSS for JavaScript](https://devmode.fm/episodes/alpine-js-is-like-tailwind-css-for-javascript)
* [Caleb Porzio - Just Enough JavaScript with Alpine.js](http://www.fullstackradio.com/132)
* [Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby](https://remoteruby.com/194)
- [Alpine.js is like Tailwind CSS for JavaScript](https://devmode.fm/episodes/alpine-js-is-like-tailwind-css-for-javascript)
- [Caleb Porzio - Just Enough JavaScript with Alpine.js](http://www.fullstackradio.com/132)
- [Caleb Porzio on Alpine.js, Laravel Livewire & more - Remote Ruby](https://remoteruby.com/194)

## Videos & Screencasts

* [Alpine.js - a first look - Andre Madarang](https://www.youtube.com/watch?v=2pQ_WDqXkWs)
* [Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie](https://www.youtube.com/watch?v=BTAXnBFJWCY)
* [JavaScript - Introduction to Alpine.JS - SkillBakery Studio](https://www.youtube.com/channel/UCLTJ8_N2bzhidCNGt_692Ug/search?query=Javascript+-+Learn+Alpine.js)
* [Learn Alpine JS - Andre Madarang / Scrimba](https://scrimba.com/g/galpinejs)
* [Learn Alpine.js - Codecourse](https://codecourse.com/courses/learn-alpine-js)
* [Alpine.js Essentials - Jeffrey Way / Laracasts](https://laracasts.com/series/alpine-essentials)
* [Sprinkle declarative, reactive behaviour on your HTML with Alpine JS - Simon Vrachliotis](https://egghead.io/playlists/sprinkle-declarative-reactive-behaviour-on-your-html-with-alpine-js-5f8b)
- [Alpine.js - a first look - Andre Madarang](https://www.youtube.com/watch?v=2pQ_WDqXkWs)
- [Building a progressive questionnaire with Alpine JS and Tailwind CSS - Ben Furfie](https://www.youtube.com/watch?v=BTAXnBFJWCY)
- [JavaScript - Introduction to Alpine.JS - SkillBakery Studio](https://www.youtube.com/channel/UCLTJ8_N2bzhidCNGt_692Ug/search?query=Javascript+-+Learn+Alpine.js)
- [Learn Alpine JS - Andre Madarang / Scrimba](https://scrimba.com/g/galpinejs)
- [Learn Alpine.js - Codecourse](https://codecourse.com/courses/learn-alpine-js)
- [Alpine.js Essentials - Jeffrey Way / Laracasts](https://laracasts.com/series/alpine-essentials)
- [Sprinkle declarative, reactive behaviour on your HTML with Alpine JS - Simon Vrachliotis](https://egghead.io/playlists/sprinkle-declarative-reactive-behaviour-on-your-html-with-alpine-js-5f8b)

## Examples

* [Alpine Toolbox - Amrit Nagi](https://www.alpinetoolbox.com/)
* [AlpineJS meets TailwindCSS - Caneco](https://codepen.io/collection/XqVbyQ)
* [Alpine.js Playground - Hugo Di Francesco](https://github.com/HugoDF/alpinejs-playground)
* [Click Speed Test - Luciano Felix](https://github.com/FelixLuciano/clicks)
* [Dynamic Form Fields - Sanjay Ojha](https://codepen.io/sanjayojha/pen/qBONdVm)
* [Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker](https://github.com/swlkr/ridgecss)
* [Progressive enhancement with Alpine.js - Cart fragment example](https://github.com/nicolasdelfino/pe-alpine)
* [LittleBigTable - A flexible Alpine.js table](https://github.com/indgy/LittleBigTable)
* [NESHouse.com —— An open source implementation of ClubHouse](https://github.com/bestony/neshouse)
* [AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS](https://alpinetrails.netlify.app/)
- [Alpine Toolbox - Amrit Nagi](https://www.alpinetoolbox.com/)
- [AlpineJS meets TailwindCSS - Caneco](https://codepen.io/collection/XqVbyQ)
- [Alpine.js Playground - Hugo Di Francesco](https://github.com/HugoDF/alpinejs-playground)
- [Click Speed Test - Luciano Felix](https://github.com/FelixLuciano/clicks)
- [Dynamic Form Fields - Sanjay Ojha](https://codepen.io/sanjayojha/pen/qBONdVm)
- [Ridge.css - A maximalist css framework with Alpine.js markup - Sean Walker](https://github.com/swlkr/ridgecss)
- [Progressive enhancement with Alpine.js - Cart fragment example](https://github.com/nicolasdelfino/pe-alpine)
- [LittleBigTable - A flexible Alpine.js table](https://github.com/indgy/LittleBigTable)
- [NESHouse.com —— An open source implementation of ClubHouse](https://github.com/bestony/neshouse)
- [AlpineTrails - Alpine.js and Tailwind CSS adventures from the house of LUBUS](https://alpinetrails.netlify.app/)

## Extensions & Plugins

* [Alpine.js IntelliSense - Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense)
* [Spruce - a lightweight state management layer](https://github.com/ryangjchandler/spruce)
* [Alpine.js DevTools - Extension for Chrome and Firefox](https://github.com/Te7a-Houdini/alpinejs-devtools)
* [Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine](https://github.com/alpine-collective/alpine-magic-helpers)
* [Alpine Test Utils - Utilities for testing Alpine.js components](https://github.com/HugoDF/alpine-test-utils)
* [Pinecone Router - Client-side router for Alpine.js](https://github.com/pinecone-router/router)
* [Alpine.js Tash - Render data in moustache syntax](https://github.com/markmead/alpinejs-tash)
* [Alpine Wizard - Build multi-step wizards with Alpine.js](https://github.com/glhd/alpine-wizard)
* [Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup](https://github.com/hankhank10/alpine-fetch)
* [alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params](https://github.com/shaunlee/alpinejs-router)
* [Alpine Autosize - Directive for autosizing textareas](https://github.com/marcreichel/alpine-autosize)
* [Alpine Timeago - Display the human-readable distance between a date and now](https://github.com/marcreichel/alpine-timeago)
* [Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate](https://github.com/marcreichel/alpine-auto-animate)
* [Alpine Typewrite - Add a typewriter animation to any HTML element](https://github.com/marcreichel/alpine-typewriter)
* [Alpine AJAX - Tools to build AJAX-powered components and UI](https://github.com/imacrayon/alpine-ajax)
* [Norska - Create interactive Three.js scenes directly with Alpine](https://github.com/Plumie/Norska)
- [Alpine.js IntelliSense - Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.alpine-js-intellisense)
- [Spruce - a lightweight state management layer](https://github.com/ryangjchandler/spruce)
- [Alpine.js DevTools - Extension for Chrome and Firefox](https://github.com/Te7a-Houdini/alpinejs-devtools)
- [Alpine.js Magic Helpers - A collection of magic properties and helper functions for use with Alpine](https://github.com/alpine-collective/alpine-magic-helpers)
- [Alpine Test Utils - Utilities for testing Alpine.js components](https://github.com/HugoDF/alpine-test-utils)
- [Pinecone Router - Client-side router for Alpine.js](https://github.com/pinecone-router/router)
- [Alpine.js Tash - Render data in moustache syntax](https://github.com/markmead/alpinejs-tash)
- [Alpine Wizard - Build multi-step wizards with Alpine.js](https://github.com/glhd/alpine-wizard)
- [Alpine $fetch - A magic helper to integrate HTTP fetch requests directly within Alpine.js markup](https://github.com/hankhank10/alpine-fetch)
- [alpinejs-router - Easy to use and flexible router for Alpine.js, support dynamic route matching with params](https://github.com/shaunlee/alpinejs-router)
- [Alpine Autosize - Directive for autosizing textareas](https://github.com/marcreichel/alpine-autosize)
- [Alpine Timeago - Display the human-readable distance between a date and now](https://github.com/marcreichel/alpine-timeago)
- [Alpine Auto Animate - Thin Alpine wrapper for @formkit/auto-animate](https://github.com/marcreichel/alpine-auto-animate)
- [Alpine Typewrite - Add a typewriter animation to any HTML element](https://github.com/marcreichel/alpine-typewriter)
- [Alpine AJAX - Tools to build AJAX-powered components and UI](https://github.com/imacrayon/alpine-ajax)
- [Norska - Create interactive Three.js scenes directly with Alpine](https://github.com/Plumie/Norska)

## UI Frameworks

* [Vimesh UI - Agile UI framework for Alpine.js](https://github.com/vimeshjs/vimesh-ui)
- [Vimesh UI - Agile UI framework for Alpine.js](https://github.com/vimeshjs/vimesh-ui)
- [Penguin UI - Plug-n-play UI component library for Tailwind CSS & Alpine JS](https://www.penguinui.com/)

## Other

* [Alpine.js Weekly - Newsletter](https://alpinejs.codewithhugo.com/newsletter)
* [Alpine.js Discord Community](https://discord.gg/CGmj5nq)
* [Alpine.js Matrix Community](https://matrix.to/#/#AlpineJS:matrix.org)
* [Alpine.js Persian Matrix Community](https://matrix.to/#/#AlpineJS-fa:matrix.org)
- [Alpine.js Weekly - Newsletter](https://alpinejs.codewithhugo.com/newsletter)
- [Alpine.js Discord Community](https://discord.gg/CGmj5nq)
- [Alpine.js Matrix Community](https://matrix.to/#/#AlpineJS:matrix.org)
- [Alpine.js Persian Matrix Community](https://matrix.to/#/#AlpineJS-fa:matrix.org)