Skip to Main Content
HyperUI
GitHub 11k
Enjoy HyperUI? Give it a star on GitHub

Contributing to HyperUI

Updated:

Contributing to open source can feel overwhelming, but getting involved with HyperUI is straightforward and rewarding. Here’s how you can help make HyperUI even better.

Found a Bug or Have an Idea?

If you notice something off—like a typo, accessibility issue, or SEO concern—or if you have an idea for an improvement, please open an issue. This helps us discuss and plan the best way forward together.

Want to Add or Improve Something?

Thinking of adding a new component or feature? Before you start, create an issue so we can chat about your idea. For new components, sharing example designs is helpful.

Pull Request Process

All pull requests are reviewed before merging. You may receive feedback—this is part of making HyperUI great! If feedback from the first review isn’t addressed by the third review, the PR will be closed. If new feedback comes up in the third review, that’s fine—just address it as usual.

Setting Up HyperUI Locally

HyperUI runs on Next.js. To get started:

git clone git@github.com:markmead/hyperui.git
yarn install
yarn dev
yarn css --watch

Adding a New Component

For example, to add a new footer component in the marketing category:

  1. Create a new file in /public/components/marketing/footers.
  2. Add the component to the group in /src/data/components/marketing/footers.mdx.

Component files are named incrementally (e.g., 21, 22, etc.). Please follow this pattern. You can use container: to adjust the preview position—these classes won’t affect the copied code.

Component Guidelines

  1. Use Tailwind CSS for all components.
  2. Only use official Tailwind CSS plugins. Declare any plugins used in the component object in the MDX file, for example: plugins: ['@tailwindcss/forms'].

See examples in the input component.

Creating a New Collection

To propose a new collection, open an issue so we can discuss and brainstorm ideas together.

Console Warnings

When developing locally, you might see the warning: params should be awaited before using its properties. This can be ignored—await is used for getX functions that resolve data from params.