markmead/hyperui

Stars
8,178
Rank 4,302 (Top 0.09 %)
Language
HTML
License
MIT License
Created over 2 years ago
Updated 24 days ago

markmead/hyperui

markmead

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Free Tailwind CSS components for application UI, ecommerce and marketing with support for dark mode, RTL and Alpine JS 🚀

🚀 HyperUI

HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.

FAQs

Is HyperUI free?

Yes, HyperUI is completely free to use. You can use it in your personal or commercial projects.

How do I use HyperUI?

Browse the website for the components you need, copy the code and paste it into your project. Some components will have support for dark mode and Alpine JS variants.

How do I install HyperUI?

There is no HyperUI installation, if you have a Tailwind CSS project, you can copy the code and paste it into your project. Some components do use Alpine JS.

Got more questions?

Contributing

Contributions are welcome! 👋

How to Contribute to HyperUI

hyperjs

HyperJS is a component library for Alpine JS allowing developers to quickly copy and paste functionality into their projects 🛵

alpinejs-component

Reusable HTML components powered by Alpine JS reactivity 🛸

alpinejs-tash

Use a more familiar syntax when rendering Alpine JS `{variables}` 🚀

alpinejs-masonry

Create masonry layouts based on your CSS grid values 🎉

tiny-markdown

📝 Simple markdown editor in the browser for quick and easy markdown creation

tailwindcss-assistant

Get assistance when developing projects with Tailwind CSS 🤖

alpinejs-money

Format money through Alpine JS into any language and currency (works with Shopify settings) 💸

alpinejs-sticky

Toggle CSS class names when an element becomes sticky to the DOM 🐙

alpinejs-notifications

Simple notifications in your projects using Alpine JS 🙋‍♀️

custom-cursor

Create your own custom cursor with minimal JavaScript 👆

alpinejs-slug

Transform a string into a slug with Alpine JS and Slugify 🐌

alpinejs-form-data

Get the data from the form in a key/value pair of name and value 🥯

alpinejs-form-validation

Adds client side form/input validation powered by Alpine JS ✅

alpinejs-head

Manage the HTML `<head>` with Alpine JS 🗿

alpinejs-textarea-autogrow

🌲 Alpine JS plugin that auto grows the height of a textarea based on its value

js-masonry

Create masonry layouts based on your CSS grid values 🎉

alpinejs-persist-extended

Extends the official `$persist` plugin to help you work with `localStorage` 📦

alpinejs-emit

Emit `x-data` changes to other Alpine JS elements 📣

alpinejs-axios

Alpine JS magic methods wrapper for Axios API methods 📨

alpinejs-cursor

Create a custom cursor with Alpine JS and easily apply hover effects 👆

alpinejs-character-count

Track the character count of an input with the option to compare against the max length 🔟

alpinejs-scroll-to

Easily add scroll to functionality with options, powered by Alpine JS 🐭

shopify-schema

🛍 Build Shopify schema in a UI built with Alpine JS and Tailwind CSS

blog

Personal website built with Next JS 🚀

alpinejs-scroll-amount

Track the users scroll position and their progress on the page 🤿

alpinejs-plugin-template

Template for creating Alpine JS plugins 📋

alpinejs-manage

Manage another Alpine JS elements `x-data` values 👩‍💼

shopify-skeleton

🛍 Skeleton for Shopify 2.0 themes using Tailwind CSS and Alpine JS

js-bionic-reading

Helps developers add support for bionic reading to their content 📚

github-contact-form

Add a contact form to your website that creates a GitHub issue when submitted.

alpinejs-sort

Sort data in Alpine JS without writing any JavaScript 🦜

alpinejs-desktop-notifications

Create desktop notifications with Alpine JS 📣

alpinejs-overlap

Check if an element is overlapping another 🥞

old.markmead.dev

🐸 Old portfolio website built with Nuxt JS and Tailwind CSS

tailwind-group-classes

Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes 👩‍🚀

portfolio

🐸 Old portfolio website built with Nuxt JS and Tailwind CSS

fetch-components

Write simple, reusable HTML components in the style of React and Vue 🚀

alpinejs-form-captcha

Prevent your forms getting unwanted submissions through the use of an image puzzle ✅

negative-hover

Hover effect but in reverse (spotlight hover) 🔦

tailwindcss-wordle

🐳 Can you guess the Tailwind CSS class name from over 6000 options? Tailwind CSS Wordle.

code-snippet-viewer-extension

Instantly view all the code snippets in a blog post 🔍

alpinejs-force-next-tick

Alpine JS implementation of the double `requestAnimationFrame` method to force `$nextTick`

markmead

📖 README for my GitHub profile

magnify-image

JavaScript function to magnify an image on hover

string-like-query

A looser but configurable approach to searching a string for a matching substring 🔍

aniwait

Wait for elements to be in the viewport before animating them, includes option to toggle once 🛑

string2html

Convert a string of HTML into a string of formatted HTML 🧵

alpinejs-routes

Create dynamic routes similar to Laravel with Alpine JS 🛤

alpinejs-cookie-banner

🍪 Alpine JS plugin that sets up simple cookie functionality with the option of saving to session or local storage

shopify-custom-fields

🛍 Create custom fields for Shopify product forms in an Angular UI

alpinejs-multistep-form

tailwind-jit-rails-livereload

liquid.hyperui.dev

🛍 HyperUI components converted to Shopify Liquid syntax

blazing-fast-phrase-generator

No more need for "blazing fast" as your totally original JavaScript package description, now you can generate your own "blazing fast" phrase with this blazing fast phrase generator! 🔥

hypercolor-maintained

A version of Hypercolor that is maintained and updated