Skip to content
Get packs

Guide · Open source

How to use HyperUI: copy Tailwind CSS components into your project

Updated · written with AI from the project's own documentation and checked against our catalogue data

HyperUI is a free, open-source collection of Tailwind CSS components for marketing sites, web apps and eCommerce projects. You browse components on the HyperUI website, copy their markup and paste it into your own Tailwind CSS project. This guide shows you the workflow, what you need beforehand and where HyperUI fits best.

HyperUImarkmead/hyperui · ★ 12.3k · MIT

Quick start

  1. 1Check your project. Confirm you have a Tailwind CSS project. HyperUI markup depends on Tailwind classes.
  2. 2Open hyperui.dev. Browse the components on hyperui.dev and choose one that fits your layout.
  3. 3Copy the code. Copy the markup of the component you chose.
  4. 4Paste into your project. Paste the markup into the page or template where you want it.
  5. 5Adjust the markup. Edit the pasted code to match your content and design, since you own the code you use.

What you need before you start

HyperUI is built for projects that already use Tailwind CSS. The markup depends on Tailwind classes, so the components will not style correctly without it.

  • A Tailwind CSS project
  • Basic familiarity with HTML and Tailwind classes

Find and copy a component from hyperui.dev

Browse components on hyperui.dev. When you find one you want, copy its code. The README describes this as the whole process: find a component, copy the code, paste it into your project.

  • Open hyperui.dev and look through the available components.
  • Copy the code for the component you chose.
  • Paste it into the place in your project where you want it to appear.

Is there a package to install?

No. The README states that there is no package to install, so you do not run a package manager command to add HyperUI to your project. You keep full control of the code you use because you own the pasted markup.

The repository can be cloned with git clone https://github.com/markmead/hyperui. The README's local setup section covers running the site itself, which is separate from using the components in your own project.

git clone https://github.com/markmead/hyperui

Run the HyperUI site locally (optional)

If you want to work on the HyperUI site itself, the README lists these commands. Run pnpm install to install dependencies, then pnpm dev to start the development server.

To watch component styles while you edit them, run the css:component command with --watch. To preview the blog styles, run pnpm run css:blog.

pnpm install pnpm dev pnpm run css:component --watch

Contribute to HyperUI

The README asks contributors to open an issue first before starting work. The contributing guide is in CONTRIBUTING.md in the repository, and a full walkthrough is available on the HyperUI blog.

  • Open an issue before you start work.
  • Read CONTRIBUTING.md.
  • Follow the How to contribute post on the HyperUI blog.

What people use it for

  • Building a marketing site hero or feature section with Tailwind CSS
  • Starting a web app page from a ready-made layout instead of building from scratch
  • Prototyping an eCommerce product page quickly
  • Adapting free MIT-licensed components for a client project

Frequently asked questions

Is HyperUI free to use?

HyperUI is released under the MIT licence, and the project describes its components as free and open source. The licence file is named LICENSE in the repository. Check that file for the full terms.

Do I need to install a HyperUI package?

No. The README says there is no package to install. You browse components on hyperui.dev, copy the markup and paste it into your project.

What do I need to use HyperUI?

You need a Tailwind CSS project. The components are written with Tailwind CSS, so the markup will not work as intended without it.

Can I modify HyperUI components?

Yes. Because the components are MIT-licensed and you paste the markup into your own project, you can change the code to suit your needs.

Does HyperUI include interactive components or JavaScript logic?

The README describes copy-paste markup only. If you need a full framework with built-in logic or interactive components, HyperUI may not cover that need on its own.

What are alternatives to HyperUI?

The project lists Tailwind UI, Flowbite, DaisyUI and shadcn/ui as comparable projects. Choose based on whether you want copy-paste markup or a versioned package you can update with a package manager.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

HyperUI suits developers who already use Tailwind CSS and want free, MIT-licensed starter layouts they can copy and adapt. If you need a versioned component package you can update through a package manager, or interactive components with built-in logic, look at the comparable projects listed instead.

Install options & downloads