HyperUI - a free, open source Tailwind CSS component library🐳

  • By Mark Mead
  • Last update: Jan 9, 2023
  • Comments: 12

HyperUI

HyperUI is a free, open source Tailwind CSS component library.

How Does it Work?

Search through the website for a component you like, when you find one you can view it at the following breakpoints:

  • 340px
  • 640px
  • 768px
  • 1024px
  • 1348px

If it does the job you have the following options:

Copy Code

Copy the HTML to your clipboard ready to be pasted wherever you need it.

View Code

View the HTML and check if there any Tailwind CSS plugins, CSS or JavaScript required for it to work as it is displayed.

Save Component

Don't need the component now? Save it and come back to it later - https://hyperui.dev/saved

Contributing

Setup

  1. Clone Repo
  2. Run yarn
  3. Run yarn dev
  4. Run yarn css -w

Step 4 is optional, but if you find your new components missing Tailwind CSS classes then you'll need to run yarn css -w.

Adding Components

All components and collections are stored in /public/components/[collection]/[component].

Adding to Existing Collection

Let's say you've created a new footer component.

Create a new file in /public/components/footers/ called 10.html (or whatever the next number is).

You'll then need to add the new component to the footer collection.

Head to /lib/components.ts and search for "footers". You should see something that looks like:

export const footers = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
  { id: 9 },
]

Here you can add your new component like so:

export const footers = [
  { id: 1 },
  // ...
  { id: 9 },
  { id: 10 }, // New component
]

If needed, you can override the default spacing for the collection:

export const footers = [
  { id: 1 },
  // ...
  { id: 9 },
  { id: 10, spacing: 'max-w-3xl mx-auto' }, // New component
]

Adding a New Collection

If you want to add a new component and a new collection then follow the steps above but add the new collection folder to /public/components first.

Let's say you've created a new checkout component, first you'd need a checkout collection.

Create /public/components/checkouts/1.html.

You'll then want to add the component to /lib/components.ts.

export const checkouts = [{ id: 1 }]

Then add the new collection to the collections array in /lib/collections.ts.

First, import the checkouts array that you just created:

This is done at the top of the file

import {
  alerts,
  // ...
  reviews,
  checkouts,
} from './components'

Then you can add the new collection like this:

{
  id: 'checkouts',
  title: 'Checkouts',
  components: checkouts,
  count: checkouts.length,
  emoji: '💸',
  spacing: '', // Optional
  ecommerce: '', // Optional
},

And that's it, nice and simple!

Github

https://github.com/markmead/hyperui

Comments(12)

  • 1

    feat/components/toggles

    Below are the changes I made . Here I added to toggle buttons which I think are useful in app or websites to toggle anything in general . If there is something I can improve on or any mistake I made in general please do tell me . Thank you 😄😄

    https://user-images.githubusercontent.com/92184189/181916605-b7cf7cc4-e3ab-4f44-8e46-9a6b1fe3e81a.mp4

  • 2

    fix/site/toast-gtag-responsive

    • [x] fix copied toast
    • [x] gtag script warning (next/script)
    • [x] responsive mian
    • [x] update range when current breakpoint changes
    • [ ] disable button text selection
  • 3

    [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.

    • [x] Product Cards (Update)
    • [x] Product Cards (New)
    • [x] Collection Cards (New)
    • [x] Product Collections (Update)
    • [x] Carts (Update)
    • [ ] Carts (New)
    • [x] Checkouts (Update)
    • [x] Quantity Inputs
  • 4

    [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

    video

  • 5

    Update - Broken link in MDX

    Updated "How to contribute" URL. Earlier it was giving 404 error.

    Describe Changes Earlier URL was 'https://github.com/markmead/hyperui/blob/main/blog/how-to-contribute'. It was showing 404 error. U[dated URL: 'https://github.com/markmead/hyperui/blob/main/src/data/posts/how-to-contribute.mdx'

  • 6

    Application UI Components

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

    Collection Ideas

    • [x] Side Menus
    • [x] Nav Menus
    • [ ] Tab Menus
    • [ ] Cards
    • [x] Tables
    • [x] Headers

    Have a request? Let me know in the comments 👇

  • 7

    Feat - Component links on component page

    This was requested on #228

    I want to release this with an "experimental" flag. Therefore, it needs to be toggled on/off.

    ~~Once I'm happy with this PR, I'll make a new issue that will be a place for people (if they wish) to share opinions on the feature.~~

    I'll make this PR the deployed version of the site once it's in a better state, then we can use this PR as a place to share thoughts on the feature.

  • 8

    [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

  • 9

    [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.

  • 10

    [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. Screenshot 2022-10-25 at 21 19 38

    The select element missing pretty much most of the styling. Screenshot 2022-10-25 at 21 20 03

    After inspecting the select element, have noticed that am missing at least the following properties. Screenshot 2022-10-25 at 21 43 46

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

  • 11

    [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
  • 12

    Bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related