markmead/hyperui

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.

Table of Contents

• Getting Started
• Usage
• Components
  • 🤖 Application UI
  • 📣 Marketing
  • 🛍️ eCommerce
• Contributing
• License

Getting Started

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.

Usage

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.

1. Browse the website for a component you like.
2. Preview the component at different breakpoints and check its compatibility with:

• LTR
• Dark mode
• Interactivity with Alpine JS

3. Click on the 'Copy' button to copy the source code.
4. Paste the copied code into your project.

Components

HyperUI has a wide range of freely available components. These components include:

Application UI 🤖

• Alerts
• Auth Forms
• Badges
• Breadcrumbs
• Button Groups
• Checkboxes
• Details Lists
• Dividers
• Dropdowns
• Error Pages
• Filters
• Grids
• Header
• Inputs
• Media
• Pagination
• Progress
• Quantity Inputs
• Radio Groups
• Selects
• Side Menu
• Stats
• Steps
• Tables
• Tabs
• Textareas
• Toggles
• Vertical Menu

Marketing 📣

• Announcements
• Banners
• Blog Cards
• Buttons
• Cards
• Carts
• Collection Cards
• CTAs
• FAQs
• Footers
• Forms
• Header
• Popups
• Pricing
• Product Cards
• Product Collections
• Sections
• Stats
• Testimonials

eCommerce 🛍️

These components were originally part of the eCommerce category but have since moved, find out more in this blog post.

Contributing

You can contribute by adding new components, fixing bugs or improving the documentation. Please create an issue before starting any work. Once you get approval on your issue, you can create a new branch and submit your changes in a PR. Please note that all PRs need to be reviewed.

A detailed contributing guide on how to contribute including examples of adding new components is available on the HyperUI blog.

License

HyperUI is an open source project licensed under the MIT license.

hyperui's Issues

Application UI Components

I'll be creating a range of application UI components for HyperUI.

Collection Ideas

• Side Menus
• Nav Menus
• Tab Menus
• Cards
• Tables
• Headers

Have a request? Let me know in the comments 👇

Make Variant Dropdown Clearer

I/we need to find a way to make the variants select more "Hey I'm over here!" so it's not missed and people don't start asking...

Why does it say there are 18 components? I can only see 4.

It's also a huge part of HyperUI (IMO) as it provides developers/designers with alternatives (usually dark mode) to components.

Add Data Table Components

There's a data table in the application-ui-tables but I have an even spicier one that I was working on when mocking up some ideas for Lunar.

Here's the preview - https://ui-table.vercel.app/

Got a lot of Alpine JS, I think it will need to be interactive by default.

[BUG] Responsiveness Issue

I Noticed two navbar while making website responsive.

[REQUEST] Enhanced Use Case

Hello,

I'm writing to suggest enhanced suggestions on how to use component designs in a project. Sometimes Having something visually nice doesn't really translate to a working website flow.

Out of the box, for example, https://www.hyperui.dev/components/application-ui/side-menu the idea of the side menu is great but without more understanding, it doesn't work well with a better understanding of the layout and how it can fit into this design.

Some thing I would be looking to retain is the natural scrollbar for the browser rather than a scrollable container (better rendering performance).

This site has some fantastic starting point elements though and of course, it's up to us to enhance and figure out how to use them in our use cases. I'm just thinking of the next step for enhanced or maybe "advanced" use cases for the website to display for consumers of these components.

[BUG] Input Heights on Pagination Components

Describe the bug
I'm not sure if this is a bug or it's meant to be like this. The input field in Pagination Components: With Input has different height with the prev and next buttons around it.

Screenshots

[BUG] Filter Component Radio Buttons

Describe the bug
Once you check a radio button, if you click it again nothing happens and even when clicking the "clear all" button the radio buttons still aren't being cleared

To Reproduce
Steps to reproduce the behavior:

1. Go to the page for the filter component
2. Click on "Undergraduate" to select it
3. Click on it again to clear it
4. Click on the "clear all" button
5. See error

Expected behavior
When clicking on a selected radio button, it gets unselected. When clicking on "clear all", all buttons (including radio buttons) get unselected.

Desktop (please complete the following information):

• OS: Windows 10 21H2
• Browser: Firefox
• Version: 103.0.2

[BUG] Form Styles Missing

First of all thanks for this great UI kit.

Working with tailwindcss v3.2.1

Noticing the following input & select elements in my case are missing padding etc properties and is not browser specific.

Got following

@tailwind base;
@tailwind components;
@tailwind utilities;

Examples:
The input elements missing padding.

The select element missing pretty much most of the styling.

After inspecting the select element, have noticed that am missing at least the following properties.

TLDR; Are there any prerequisites? Apart from tailwind framework and imports that are mentioned above?

[REQUEST] Framework Options

I would like to have the components readily available for usage in frameworks such as React JS.

The options can come when users want to copy the source code, then they can choose to copy the raw code or as React JS code. React JS code will make use of className instead of class.

This is a feature I'm hoping to bring.

Update to Latest Tailwind CSS Code

This is an ongoing improvement to bring the website and components code to newer Tailwind CSS approaches.

I'm not too sure what needs to be done, but I'll track what I know is done.

• Replace space-{x,y} classes with gap-{x,y}
• Replace custom CSS with JIT
• React components and pages

[REQUEST] New Issue Templates

The issue template we had currently splits the issue only in two categories

• Bug
• Feature request

However there may be other issues that do not come under these two categories such as

• Documentation issue
• Any kind of security vulnerabilities
• May be any question or general doubt regarding the project
• Or???? may be if you want an we can have an "other" category for those which doesn't comes under any other type

Would love to know your views on how do you wish to customize it.
If everything is fine regarding the issue I'd love to work on it
Thank you 🙂

[BUG] Missing Closing Tag on Card

Bug Description
The card component is missing the appropriate closing </dt> at components/cards/23.html:26.

P.S. Thanks for this amazing kit!

[REQUEST] Dark Mode

I think it would be better if there were a dark mode button because I felt that the site was too bright and my eye couldn't look too long, such a feat could give many developers comfort in reading and trying components for a long period of time.

[QUESTION] Figma Files?

It will be great to have a template on Figma to design a great interfaces with your components 🚀🚀

[FEATURE] Dark Mode Footer Variants

Well, first off all i have to say thanks, great work.
I am on rails and wanted a clean looking "framework" without npm, and this fits the bill SO well.
I would not mind paying some if you had a button for it. (coffee/paypal)
Anyway, i will start probably several sites with this, writing a cms around the elements. Meaning i will probably be able to contribute in the future, now i am just starting with tailwind.

Is your feature request related to a problem? Please describe.
The first footer is great, but only in dark

Describe the solution you'd like
I need the footer in white

Describe alternatives you've considered
Obviously using another as place holder for now

Additional context
I've seen many other components where one can choose dark/white and that would be great for the first one too.

[REQUEST] RTL Support

I'm trying to add a direction button to support RTL but I'm not good at react
and I'm having problems with the proper way to activate this button
I want to click on it to add classes
as an example rtl:text-right

[FEATURE] Add JSX Copy Functionality

Is your feature request related to a problem? Please describe.
No 🙏

Describe the solution you'd like
Add support to copy HTML code as JSX code.

Describe alternatives you've considered
Add aa setting to toggle use JSX or not and when click copy button, should convert to JSX.

Additional context
No context

[REQUEST] Improve Website UI

Is your feature request related to a problem? Please describe.
Its not actually a major problem but the website looks dull and quite basic

Describe the solution you'd like
Allow me to apply my UI skills and improve the frontend

[REQUEST] Highlight Tailwind CSS Plugin Use

It should be noted somewhere on this page (https://hyperui.dev/components/forms) that it requires installing @tailwindcss/forms plugin to properly reset selects and inputs to make them look like shown in the demo.

Other than that, HyperUI is an awesome project - keep up the good work! :)

[ENHANCEMENT] Add Jest Testing Library

Is your feature request related to a problem? Please describe.
I think it would be a good idea to add some kind of testing library to this project.

Describe the solution you'd like
I have a PR ready (here: #220) for adding Jest testing library to the repo, including some basic unit tests, but can serve as a foundation for more tests added by anybody else.

Describe alternatives you've considered
I've thought also about cypress end to end or component testing, but figured this is a better place to start since Jest already is powerful enough to start.

Additional context
Add any other context or screenshots about the feature request here.

Accessibility Improvements (Components)

Most components should be OK, but there are likely to be improvements.

Accessibility Improvements (Website)

It's 100/100 on Lighthouse but there's definitely more that can be done.

[BUG] Hide Accordion Icon on Safari

Load the FAQ on Safari

https://www.hyperui.dev/components/marketing/faqs

It has a shadow Dom element that needs to be hidden.

https://stackoverflow.com/questions/6195329/how-can-you-hide-the-arrow-that-is-displayed-by-default-on-the-html5-details-e worked for me.

[BUG] Filters & Sorting Button Broken

Describe the bug
In 'Medium', 'Small' and 'Mobile' view, the 'Filters & Sorting' button is not opening like a dropdown.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://www.hyperui.dev/components/ecommerce/product-collections#component-6'
2. Click on 'Medium', 'Small' and 'Mobile' icons one-by-one and click on 'Filters & Sorting' button to see the error. It should open like a dropdown but it's not.

Expected behavior
'Filters & Sorting' button should open like a dropdown to show the filters but it's not.

[REQUEST] Navigation Between Components

First of all many special thanks for this great work!
So many fantastic components really amazing!

My suggestion for a faster navigation between the components is a side menu with groups like carts and inner with Popup, #Popup (Interactive), ...

A really good solution has https://flowrift.com or simplify https://mambaui.com.

[BUG] Dropdown Menu Toggle

Not sure if this is a bug or it's meant to be like this , the dropdown components menu should toggle when clicking .

[REQUEST] Open Source License

I like your components, they are clean and simple and a good starting point.
I'd like to use them (respectively derived work) in a commercial product.
However, I could not find a license info. (I was hoping to find something like MIT.)
Could you add one?

[BUG] Broken Category Slug in Header Search

Describe the bug
Links in HeaderSearch are broken as it contains object in the links.

To Reproduce
Steps to reproduce the behavior:

1. Click on a HeaderSerach
2. Click on a link to a category

Expected behavior
The correct page is displayed.

Screenshots
If applicable, add screenshots to help explain your problem.

[BUG] Breakpoint Buttons Jump when Variant Select Loads

Should be an easy fix, I believe I just need to tweak the flex classes.

[FEATURE] RTL Support

I'm going to add a new variant "RTL" which will render the components in the right-to-left layout.

When needed I'll tweak the components to better support this layout.

[REQUEST] Component Badges

Badge

show the count of a given data using badge
Examples of Component

https://tailwindui.com/components/application-ui/elements/badges
https://tailwind-elements.com/docs/standard/components/badges/
https://getbootstrap.com/docs/5.1/components/badge/

[REQUEST] Adding a Form Popup Component

Is your feature request related to a problem? Please describe.

As a developer who has used hyperui in a recent project, I encountered some difficulty adding a form to the existing popup component. This experience made me think about the need for a dedicated popup form component in hyperui.

Having a pre-built popup form component would greatly assist developers by saving time and effort in designing and implementing this essential feature

Describe the solution you'd like

This new popup form component would save developers time and effort in creating and styling forms from scratch. The component's versatile design would allow developers to use it as-is or modify it to fit their specific project requirements.

The component should include all the essential input types, such as text, email, password, and checkbox. It would be helpful to have additional input types, such as the date and file upload, to make the component more versatile.

In terms of design, the component should have a clean and simple aesthetic, with attention given to usability and accessibility. A straightforward layout that is easy to understand would improve the user experience and increase the form's effectiveness.

Describe alternatives you've considered

An alternative is that you take a simple popup component, remove all the things in it and add a custom form on it manually.

Additional context

I would love to contribute to this project because I have used it extensively.
I love the work hyperui team does, It would be great if I could add to it and give back something to the community that has saved me a lot of time.

This is popup that I created using the alternative solution I have mentioned above

[REQUEST] Add Creator Link

Link to the creator's GitHub profile or social profile will be a

useful addition

[BUG] Render Issue with Iframe

Clicking on any link inside the preview is rendering the whole webpage inside that iframe

[REQUEST] Interactive Buttons Components

I can add interactive buttons

[REQUEST] Component Toggles

Dark mode button

In the button section we can have dark mode buttons . People who want to toggle there theme do dark mode can use this component and add this button in their site or App .

bandicam.2022-07-28.12-36-28-701.mp4

Also a simple toggling button would be really nice to have people can use toggling button to toggle anything in general

bandicam.2022-07-28.14-53-11-971.mp4

[DUPLICATE] Dark Mode

Is your feature request related to a problem? Please describe.
there is no dark mode for web users

Describe the solution you'd like
add dark mode theme for website.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[FEEDBACK] Enhance Application UI Offering

Some improvements and additions to the "Application UI" category.

[REQUEST] Component Tables

Tables

Styled tables to display data

Examples of Component
https://tailwindui.com/components/application-ui/lists/tables
https://material.angular.io/components/table/examples
https://material.io/components/data-tables#usage
https://getbootstrap.com/docs/5.1/content/tables/

[REQUEST] Component Lists

Collection Title Lists component

Few nice lists components - which includes regular lists, card lists, lists with image on left and details on right etc would be great addition to the component library

[GOAL] Pass 100+ Ecommerce Components

The aim is to pass 100+ ecommerce components by December. As can be seen here https://www.hyperui.dev/api/stats the ecommerce component offering is lacking.

I'll use this issue as a dumping ground for ideas and progress tracking.

• Product Cards (Update)
• Product Cards (New)
• Collection Cards (New)
• Product Collections (Update)
• Carts (Update)
• Carts (New)
• Checkouts (Update)
• Quantity Inputs

[FEATURE] Global Dark Mode Toggle

Is your feature request related to a problem? Please describe.
My feature request isn't related to a problem but more of an additional feature/functionality. I think it would be really cool if the site in general had a dark mode toggle. Either one that works globally across the entire site or across components individually.

Describe the solution you'd like
I would like to contribute if possible by adding a global dark mode toggle at the top right of the site, which looks for any tailwind classes marked with dark: and then if that goes well add dark mode variants to some components..

Describe alternatives you've considered
I was thinking of either Global Dark mode, which can perhaps be placed at the top right of the website, built with a nice slider, which applies it globally across the whole site and also each component, or at a component level where each one can have a dark mode toggle, but would like to know your thoughts on this.

Additional context
Add any other context or screenshots about the feature request here.

[ENHANCEMENT] Improve eCommerce Offering

Product Cards

https://play.tailwindcss.com/8alAwL7u1S
https://play.tailwindcss.com/GzyKKfhUTF
https://play.tailwindcss.com/wCHHF1pTRI

Popout Carts

https://play.tailwindcss.com/sLVylvDIKV

[BUG] Broken Link in MDX File

Describe the bug
https://github.com/markmead/hyperui/blob/main/src/data/posts/hacktoberfest-2022.mdx
The above page has a link "How to Contribute to HyperUI" which is throwing 404 error.

Expected behavior
"How to Contribute to HyperUI" page must be opened.

Screenshots

Desktop (please complete the following information):

• OS: Window 10
• Browser: Chrome

[REQUEST] 404 Templates

I think a list of landing page templates is a great addition to this project, such as:

• Landing Page templates
• 404 Page templates

[FEEDBACK] Ecommerce Cards

Describe the bug
https://www.hyperui.dev/components/ecommerce/cards

If this is now a feature request or bug report i don't know.

As a feature request i would say more cards / hero sections with full picture

As a bug report: that last card does not fit in with the style of the rest (also the first to some degree)

I would say it's the red

Expected behavior

I would expect all the elements to look harmonious together. Otherwise you would need to introduce the concept of themes, and i don't think there are enough components for that.

Additional context

I changed the red to a mild orange (less harsh).
And made a margin around the text box, so the box does not look so squeezed in the corner, more integrated.
Also changed the transition to a zoom.
I can try to do a pr if you want

[BUG] Back Button Failing on Firefox

Bug Description
Pressing back in the browser does not work, all it does is remove the preview.

Steps to Reproduce

1. Open the website
2. Select a component
3. Click back

Expected Behavior
The site returns to the list of components

Screenshots

Screen.Recording.2022-08-14.at.00.06.24.mov

Desktop

• macOS Monterey 12.1
• Firefox 103.0.2

[REQUEST] Button Variants

I just saw that you added / refined the button styles.
Here are some things I find would be nice to have:

• Different / smaller button sizes (like xs, s, m)
• Styled active states for visual feedback (just simple stuff like a one step darker / brighter color)
• Button-Groups

[REQUEST] Component Steppers

Steppers

Indicators used for example with multi section forms

Examples of Component
https://material.angular.io/components/stepper/examples
https://semantic-ui.com/elements/step.html

Collection Page Content

Stuff like "What is a banner and why/when to use it?" would be the topics.