markmead/hyperui

Stars
9,697
Rank 3,650 (Top 0.08 %)
Language
HTML
License
MIT License
Created about 3 years ago
Updated 3 months 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 🙋‍♀️

alpinejs-form-validation

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

js-masonry

Create masonry layouts based on your CSS grid values 🎉

alpinejs-axios

Alpine JS magic methods wrapper for Axios API methods 📨

custom-cursor

Create your own custom cursor with minimal JavaScript 👆

alpinejs-form-data

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

alpinejs-slug

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

alpinejs-persist-extended

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

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

alpinejs-scroll-to

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

alpinejs-emit

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

alpinejs-character-count

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

alpinejs-cursor

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

blog

Personal website built with Next JS 🚀

js-bionic-reading

Helps developers add support for bionic reading to their content 📚

shopify-schema

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

alpinejs-manage

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

alpinejs-plugin-template

Template for creating Alpine JS plugins 📋

alpinejs-scroll-amount

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

alpinejs-desktop-notifications

Create desktop notifications with Alpine JS 📣

alpinejs-sort

Sort data in Alpine JS without writing any JavaScript 🦜

shopify-skeleton

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

github-contact-form

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

alpinejs-overlap

Check if an element is overlapping another 🥞

alpinejs-form-captcha

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

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-table-of-content

Generate a table of content from headings within an element 📖

negative-hover

Hover effect but in reverse (spotlight hover) 🔦

alpinejs-force-next-tick

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

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 🔍

js-table-of-content

Generate a table of content from headings within an element 📖

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 🛑

hyperui-clone

alpinejs-routes

Create dynamic routes similar to Laravel with Alpine JS 🛤

string2html

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

alpinejs-multistep-form

tailwind-jit-rails-livereload

shopify-custom-fields

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

liquid.hyperui.dev

🛍 HyperUI components converted to Shopify Liquid syntax

alpinejs-cookie-banner

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

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! 🔥

alpinejs-fetch

Alpine JS magic methods wrapper for fetch API methods 📨

hypercolor-maintained

A version of Hypercolor that is maintained and updated